Skip to content

Commit f1274ec

Browse files
montezumemontezume
authored
feat: add autoComplete to most inputs / fields. (#696)
* feat: start adding autocomplete attributes
1 parent 4872f92 commit f1274ec

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+158
-1
lines changed

‎src/components/fields/localized-multiline-text-field/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { LocalizedMultilineTextField } from '@commercetools-frontend/ui-kit';
2525
| Props | Type | Required | Values | Default | Description |
2626
| ------------------------------- | ------------------ | :------: | ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2727
| `id` | `string` | - | - | - | Used as HTML `id` property. An `id` is auto-generated when it is not specified. |
28+
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
2829
| `horizontalConstraint` | `object` | | `m`, `l`, `xl`, `scale` | `scale` | Horizontal size limit of the input fields. |
2930
| `errors` | `object` | - | - | - | A map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to `renderError`. |
3031
| `renderError` | `function` | - | - | - | Called with custom errors, as `renderError(key, error)`. This function can return a message which will be wrapped in an `ErrorMessage`. It can also return `null` to show no error. |

‎src/components/fields/localized-multiline-text-field/localized-multiline-text-field.js

+2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ class LocalizedMultilineTextField extends React.Component {
3030
touched: PropTypes.bool,
3131

3232
// LocalizedMultilineTextInput
33+
autoComplete: PropTypes.string,
3334
name: PropTypes.string,
3435
value: PropTypes.objectOf(PropTypes.string).isRequired,
3536
onChange: requiredIf(PropTypes.func, props => !props.isReadOnly),
@@ -102,6 +103,7 @@ class LocalizedMultilineTextField extends React.Component {
102103
<LocalizedMultilineTextInput
103104
id={this.state.id}
104105
name={this.props.name}
106+
autoComplete={this.props.autoComplete}
105107
value={this.props.value}
106108
onChange={this.props.onChange}
107109
selectedLanguage={this.props.selectedLanguage}

‎src/components/fields/localized-multiline-text-field/localized-multiline-text-field.spec.js

+7
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,13 @@ it('should forward data-attributes', () => {
7272
expect(container.querySelector('[data-foo="bar"]')).toBeInTheDocument();
7373
});
7474

75+
it('should pass autoComplete', () => {
76+
const { getByLabelText } = renderLocalizedMultilineTextField({
77+
autoComplete: 'off',
78+
});
79+
expect(getByLabelText('EN')).toHaveAttribute('autocomplete', 'off');
80+
});
81+
7582
it('should have an HTML name for input, according to the language', () => {
7683
const { container } = renderLocalizedMultilineTextField({ name: 'foo' });
7784
expect(container.querySelector('[name="foo.en"]')).toBeInTheDocument();

‎src/components/fields/localized-text-field/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { LocalizedTextField } from '@commercetools-frontend/ui-kit';
2626
| Props | Type | Required | Values | Default | Description |
2727
| ------------------------------- | ------------------ | :------: | ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2828
| `id` | `string` | - | - | - | Used as HTML `id` property. An `id` is auto-generated when it is not specified. |
29+
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
2930
| `horizontalConstraint` | `object` | | `m`, `l`, `xl`, `scale` | `scale` | Horizontal size limit of the input fields. |
3031
| `errors` | `object` | - | - | - | A map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to `renderError`. |
3132
| `renderError` | `function` | - | - | - | Called with custom errors, as `renderError(key, error)`. This function can return a message which will be wrapped in an `ErrorMessage`. It can also return `null` to show no error. |

‎src/components/fields/localized-text-field/localized-text-field.js

+2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ class LocalizedTextField extends React.Component {
3030
touched: PropTypes.bool,
3131

3232
// LocalizedTextInput
33+
autoComplete: PropTypes.string,
3334
name: PropTypes.string,
3435
value: PropTypes.objectOf(PropTypes.string).isRequired,
3536
onChange: requiredIf(PropTypes.func, props => !props.isReadOnly),
@@ -99,6 +100,7 @@ class LocalizedTextField extends React.Component {
99100
htmlFor={this.state.id}
100101
/>
101102
<LocalizedTextInput
103+
autoComplete={this.props.autoComplete}
102104
id={this.state.id}
103105
name={this.props.name}
104106
value={this.props.value}

‎src/components/fields/localized-text-field/localized-text-field.spec.js

+5
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,11 @@ it('should call onBlur when input loses focus', () => {
100100
expect(onBlur).toHaveBeenCalled();
101101
});
102102

103+
it('should pass autocomplete', () => {
104+
const { getByLabelText } = renderLocalizedTextField({ autoComplete: 'off' });
105+
expect(getByLabelText('EN')).toHaveAttribute('autocomplete', 'off');
106+
});
107+
103108
it('should have focus automatically when isAutofocussed is passed', () => {
104109
const { getByLabelText } = renderLocalizedTextField({ isAutofocussed: true });
105110
expect(getByLabelText('EN')).toHaveFocus();

‎src/components/fields/money-field/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ The amount can have an arbitrary precision. When the precision of the amount exc
3434
| Props | Type | Required | Values | Default | Description |
3535
| ----------------------- | ------------------------------------------ | :------: | ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
3636
| `id` | `string` | - | - | - | Used as HTML `id` property. An `id` is auto-generated when it is not specified. |
37+
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
3738
| `horizontalConstraint` | `object` | | `m`, `l`, `xl`, `scale` | `scale` | Horizontal size limit of the input fields. |
3839
| `errors` | `object` | - | - | - | A map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to `renderError`. |
3940
| `renderError` | `function` | - | - | - | Called with custom errors, as `renderError(key, error)`. This function can return a message which will be wrapped in an `ErrorMessage`. It can also return `null` to show no error. |

‎src/components/fields/money-field/money-field.js

+2
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ class MoneyField extends React.Component {
4747
},
4848

4949
// MoneyInput
50+
autoComplete: PropTypes.string,
5051
name: PropTypes.string,
5152
value: PropTypes.shape({
5253
amount: PropTypes.string.isRequired,
@@ -110,6 +111,7 @@ class MoneyField extends React.Component {
110111
<MoneyInput
111112
id={this.state.id}
112113
name={this.props.name}
114+
autoComplete={this.props.autoComplete}
113115
value={this.props.value}
114116
currencies={this.props.currencies}
115117
placeholder={this.props.placeholder}

‎src/components/fields/money-field/money-field.spec.js

+5
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,11 @@ it('should have an HTML name for dropdown and amount input', () => {
8383
).toBeInTheDocument();
8484
});
8585

86+
it('should pass autocomplete', () => {
87+
const { getByLabelText } = renderMoneyField({ autoComplete: 'off' });
88+
expect(getByLabelText('Amount')).toHaveAttribute('autocomplete', 'off');
89+
});
90+
8691
it('should call onFocus when amount input is focused', () => {
8792
const onFocus = jest.fn();
8893
const { getByLabelText } = renderMoneyField({ onFocus });

‎src/components/fields/multiline-text-field/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { MultilineTextField } from '@commercetools-frontend/ui-kit';
2222
| Props | Type | Required | Values | Default | Description |
2323
| ---------------------------- | ------------------ | :------: | ----------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2424
| `id` | `string` | - | - | - | Used as HTML `id` property. An `id` is auto-generated when it is not specified. |
25+
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` property |
2526
| `horizontalConstraint` | `object` | | `m`, `l`, `xl`, `scale` | `scale` | Horizontal size limit of the input fields. |
2627
| `errors` | `object` | - | - | - | A map of errors. Error messages for known errors are rendered automatically. Unknown errors will be forwarded to `renderError`. |
2728
| `renderError` | `function` | - | - | - | Called with custom errors, as `renderError(key, error)`. This function can return a message which will be wrapped in an `ErrorMessage`. It can also return `null` to show no error. |

‎src/components/fields/multiline-text-field/multiline-text-field.js

+2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ class MultilineTextField extends React.Component {
2929
touched: PropTypes.bool,
3030

3131
// TextInput
32+
autoComplete: PropTypes.string,
3233
name: PropTypes.string,
3334
value: PropTypes.string.isRequired,
3435
onChange: requiredIf(PropTypes.func, props => !props.isReadOnly),
@@ -84,6 +85,7 @@ class MultilineTextField extends React.Component {
8485
<MultilineTextInput
8586
id={this.state.id}
8687
name={this.props.name}
88+
autoComplete={this.props.autoComplete}
8789
value={this.props.value}
8890
onChange={this.props.onChange}
8991
onBlur={this.props.onBlur}

‎src/components/fields/multiline-text-field/multiline-text-field.spec.js

+8
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,14 @@ it('should have focus automatically when isAutofocussed is passed', () => {
8989
expect(getByLabelText('MultilineTextField')).toHaveFocus();
9090
});
9191

92+
it('should pass autocomplete', () => {
93+
const { getByLabelText } = renderMultilineTextField({ autoComplete: 'off' });
94+
expect(getByLabelText('MultilineTextField')).toHaveAttribute(
95+
'autocomplete',
96+
'off'
97+
);
98+
});
99+
92100
it('should call onChange when changing the value', () => {
93101
const onChange = jest.fn();
94102
const { getByLabelText } = renderMultilineTextField({ onChange });

‎src/components/fields/number-field/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { NumberField } from '@commercetools-frontend/ui-kit';
2727
| `isRequired` | `bool` | - | - | `false` | Indicates if the value is required. Shows an the "required asterisk" if so. |
2828
| `touched` | `bool` | - | - | `false` | Indicates whether the field was touched. Errors will only be shown when the field was touched. |
2929
| `name` | `string` | - | - | - | Used as HTML `name` of the input component. property |
30+
| `autoComplete` | `string` | - | - | - | Used as HTML `autocomplete` of the input component. property |
3031
| `value` | `string` or `number` | ✅ | - | - | Value of the number input component. |
3132
| `onChange` | `func` | - | - | - | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as `value`. This is either called with a valid number or with an empty string. |
3233
| `onBlur` | `func` | - | - | - | Called when input is blurred |

‎src/components/fields/number-field/number-field.js

+2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ class NumberField extends React.Component {
2929
touched: PropTypes.bool,
3030

3131
// NumberInput
32+
autoComplete: PropTypes.string,
3233
name: PropTypes.string,
3334
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
3435
onChange: requiredIf(PropTypes.func, props => !props.isReadOnly),
@@ -86,6 +87,7 @@ class NumberField extends React.Component {
8687
<NumberInput
8788
id={this.state.id}
8889
name={this.props.name}
90+
autoComplete={this.props.autoComplete}
8991
value={this.props.value}
9092
onChange={this.props.onChange}
9193
onBlur={this.props.onBlur}

‎src/components/fields/number-field/number-field.spec.js

+10
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,16 @@ describe('when `description` is passed', () => {
110110
});
111111
});
112112

113+
describe('when `autoComplete` is passed', () => {
114+
it('should render an input with autocomplete', () => {
115+
const { getByLabelText } = renderNumberField({ autoComplete: 'off' });
116+
expect(getByLabelText('NumberField')).toHaveAttribute(
117+
'autocomplete',
118+
'off'
119+
);
120+
});
121+
});
122+
113123
describe('when `min` is passed', () => {
114124
it('should render a description', () => {
115125
const { getByLabelText } = renderNumberField({ min: 20 });

‎src/components/fields/select-field/select-field.form.story.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,8 @@ storiesOf('Examples|Forms/Fields', module)
9696
errors={formik.errors.animal}
9797
isRequired={true}
9898
touched={formik.touched.animal}
99-
name="animal"
99+
name="name"
100+
isSearchable={true}
100101
value={formik.values.animal}
101102
onChange={formik.handleChange}
102103
onBlur={formik.handleBlur}

0 commit comments

Comments
 (0)