diff --git a/packages/angular/src/lib/stencil-generated/components.ts b/packages/angular/src/lib/stencil-generated/components.ts index 4974be16e..08ff320df 100644 --- a/packages/angular/src/lib/stencil-generated/components.ts +++ b/packages/angular/src/lib/stencil-generated/components.ts @@ -1190,7 +1190,7 @@ export declare interface GcdsIcon extends Components.GcdsIcon {} @ProxyCmp({ - inputs: ['autocomplete', 'autofocus', 'disabled', 'errorMessage', 'form', 'hideLabel', 'hint', 'inputId', 'label', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'readonly', 'required', 'size', 'step', 'suggestions', 'type', 'validateOn', 'validator', 'validity', 'value'], + inputs: ['autocomplete', 'autofocus', 'disabled', 'errorMessage', 'form', 'hideLabel', 'hint', 'inputId', 'inputmode', 'label', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'readonly', 'required', 'size', 'step', 'suggestions', 'type', 'validateOn', 'validator', 'validity', 'value'], methods: ['validate', 'checkValidity', 'getValidationMessage'], outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsSuggestionSelected', 'gcdsChange', 'gcdsError', 'gcdsValid'] }) @@ -1199,7 +1199,7 @@ export declare interface GcdsIcon extends Components.GcdsIcon {} changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['autocomplete', 'autofocus', 'disabled', 'errorMessage', 'form', 'hideLabel', 'hint', 'inputId', 'label', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'readonly', 'required', 'size', 'step', 'suggestions', 'type', 'validateOn', 'validator', 'validity', 'value'], + inputs: ['autocomplete', 'autofocus', 'disabled', 'errorMessage', 'form', 'hideLabel', 'hint', 'inputId', 'inputmode', 'label', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'readonly', 'required', 'size', 'step', 'suggestions', 'type', 'validateOn', 'validator', 'validity', 'value'], outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsSuggestionSelected', 'gcdsChange', 'gcdsError', 'gcdsValid'], standalone: false, }) @@ -1247,6 +1247,10 @@ of the expected text length to the user. */ set type(_: Components.GcdsInput['type']) {}; /** + * @default null + */ + set inputmode(_: Components.GcdsInput['inputmode']) {}; + /** * Default value for an input element. */ set value(_: Components.GcdsInput['value']) {}; diff --git a/packages/vue/lib/components.ts b/packages/vue/lib/components.ts index ad61dd60e..bf03cc436 100644 --- a/packages/vue/lib/components.ts +++ b/packages/vue/lib/components.ts @@ -357,6 +357,7 @@ export const GcdsInput: StencilVueComponent { December - - + + `); @@ -71,7 +71,7 @@ describe('gcds-date-input', () => { Date input - + - + @@ -167,7 +167,7 @@ describe('gcds-date-input', () => { December - + `); @@ -223,7 +223,7 @@ describe('gcds-date-input', () => { décembre - + @@ -283,8 +283,8 @@ describe('gcds-date-input', () => { December - - + + `); @@ -343,8 +343,8 @@ describe('gcds-date-input', () => { December - - + + `); @@ -400,8 +400,8 @@ describe('gcds-date-input', () => { December - - + + `); @@ -457,7 +457,7 @@ describe('gcds-date-input', () => { December - + `); @@ -513,8 +513,8 @@ describe('gcds-date-input', () => { December - - + + @@ -571,7 +571,7 @@ describe('gcds-date-input', () => { December - + @@ -676,8 +676,8 @@ describe('gcds-date-input', () => { December - - + + `); @@ -733,7 +733,7 @@ describe('gcds-date-input', () => { December - + `); diff --git a/packages/web/src/components/gcds-input/gcds-input.tsx b/packages/web/src/components/gcds-input/gcds-input.tsx index 968e3fedb..12318507a 100644 --- a/packages/web/src/components/gcds-input/gcds-input.tsx +++ b/packages/web/src/components/gcds-input/gcds-input.tsx @@ -130,6 +130,16 @@ export class GcdsInput { // prettier-ignore @Prop() type?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text'; + @Prop() inputmode?: + | 'none' + | 'text' + | 'decimal' + | 'numeric' + | 'tel' + | 'search' + | 'email' + | 'url' = null; + /** * Default value for an input element. */ @@ -574,6 +584,7 @@ export class GcdsInput { required, size, type, + inputmode, value, hasError, autocomplete, @@ -600,6 +611,7 @@ export class GcdsInput { disabled, required, type, + inputmode, autocomplete, autofocus, form, diff --git a/packages/web/src/components/gcds-input/readme.md b/packages/web/src/components/gcds-input/readme.md index 2588a70cc..0d9a4485b 100644 --- a/packages/web/src/components/gcds-input/readme.md +++ b/packages/web/src/components/gcds-input/readme.md @@ -11,33 +11,34 @@ An input is a space to enter short-form information in response to a question or ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------- | -| `autocomplete` | `autocomplete` | String to have autocomplete enabled. | `string` | `undefined` | -| `autofocus` | `autofocus` | If true, the input will be focused on component render | `boolean` | `undefined` | -| `disabled` | `disabled` | Specifies if an input element is disabled or not. | `boolean` | `false` | -| `errorMessage` | `error-message` | Error message for an invalid input element. | `string` | `undefined` | -| `form` | `form` | The ID of the form that the input field belongs to. | `string` | `undefined` | -| `hideLabel` | `hide-label` | Specifies if the label is hidden or not. | `boolean` | `false` | -| `hint` | `hint` | Hint displayed below the label and above the input field. | `string` | `undefined` | -| `inputId` _(required)_ | `input-id` | Id attribute for an input element. | `string` | `undefined` | -| `label` _(required)_ | `label` | Form field label | `string` | `undefined` | -| `max` | `max` | The maximum value that the input field can accept. Only applies to number input type. | `number \| string` | `undefined` | -| `maxlength` | `maxlength` | The maximum number of characters that the input field can accept. | `number` | `undefined` | -| `min` | `min` | The minimum value that the input field can accept. Only applies to number input type. | `number \| string` | `undefined` | -| `minlength` | `minlength` | The minimum number of characters that the input field can accept. | `number` | `undefined` | -| `name` _(required)_ | `name` | Name attribute for an input element. | `string` | `undefined` | -| `pattern` | `pattern` | Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern | `string` | `undefined` | -| `readonly` | `readonly` | If true, the input field cannot be modified. | `boolean` | `undefined` | -| `required` | `required` | Specifies if a form field is required or not. | `boolean` | `false` | -| `size` | `size` | Size attribute for an input element to provide a visual indication of the expected text length to the user. | `number` | `undefined` | -| `step` | `step` | A number that specifies the granularity that the value must adhere to. Valid for number type. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step | `"any" \| number` | `undefined` | -| `suggestions` | `suggestions` | Array of suggestion options. This creates a datalist element with options to represent permissible or recommended options available to choose from. | `SuggestionOption[] \| string` | `undefined` | -| `type` | `type` | Set Input types | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'` | -| `validateOn` | `validate-on` | Set event to call validator | `"blur" \| "other" \| "submit"` | `'blur'` | -| `validator` | `validator` | Array of validators | `(string \| ValidatorEntry \| Validator)[]` | `undefined` | -| `validity` | `validity` | Read-only property of the input, returns a ValidityState object that represents the validity states this element is in. | `ValidityState` | `undefined` | -| `value` | `value` | Default value for an input element. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ----------- | +| `autocomplete` | `autocomplete` | String to have autocomplete enabled. | `string` | `undefined` | +| `autofocus` | `autofocus` | If true, the input will be focused on component render | `boolean` | `undefined` | +| `disabled` | `disabled` | Specifies if an input element is disabled or not. | `boolean` | `false` | +| `errorMessage` | `error-message` | Error message for an invalid input element. | `string` | `undefined` | +| `form` | `form` | The ID of the form that the input field belongs to. | `string` | `undefined` | +| `hideLabel` | `hide-label` | Specifies if the label is hidden or not. | `boolean` | `false` | +| `hint` | `hint` | Hint displayed below the label and above the input field. | `string` | `undefined` | +| `inputId` _(required)_ | `input-id` | Id attribute for an input element. | `string` | `undefined` | +| `inputmode` | `inputmode` | | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `null` | +| `label` _(required)_ | `label` | Form field label | `string` | `undefined` | +| `max` | `max` | The maximum value that the input field can accept. Only applies to number input type. | `number \| string` | `undefined` | +| `maxlength` | `maxlength` | The maximum number of characters that the input field can accept. | `number` | `undefined` | +| `min` | `min` | The minimum value that the input field can accept. Only applies to number input type. | `number \| string` | `undefined` | +| `minlength` | `minlength` | The minimum number of characters that the input field can accept. | `number` | `undefined` | +| `name` _(required)_ | `name` | Name attribute for an input element. | `string` | `undefined` | +| `pattern` | `pattern` | Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern | `string` | `undefined` | +| `readonly` | `readonly` | If true, the input field cannot be modified. | `boolean` | `undefined` | +| `required` | `required` | Specifies if a form field is required or not. | `boolean` | `false` | +| `size` | `size` | Size attribute for an input element to provide a visual indication of the expected text length to the user. | `number` | `undefined` | +| `step` | `step` | A number that specifies the granularity that the value must adhere to. Valid for number type. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step | `"any" \| number` | `undefined` | +| `suggestions` | `suggestions` | Array of suggestion options. This creates a datalist element with options to represent permissible or recommended options available to choose from. | `SuggestionOption[] \| string` | `undefined` | +| `type` | `type` | Set Input types | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'text'` | +| `validateOn` | `validate-on` | Set event to call validator | `"blur" \| "other" \| "submit"` | `'blur'` | +| `validator` | `validator` | Array of validators | `(string \| ValidatorEntry \| Validator)[]` | `undefined` | +| `validity` | `validity` | Read-only property of the input, returns a ValidityState object that represents the validity states this element is in. | `ValidityState` | `undefined` | +| `value` | `value` | Default value for an input element. | `string` | `undefined` | ## Events diff --git a/packages/web/src/components/gcds-input/stories/gcds-input.stories.tsx b/packages/web/src/components/gcds-input/stories/gcds-input.stories.tsx index 06646018a..f90ef7889 100644 --- a/packages/web/src/components/gcds-input/stories/gcds-input.stories.tsx +++ b/packages/web/src/components/gcds-input/stories/gcds-input.stories.tsx @@ -253,6 +253,7 @@ const Template = args => ${args.step ? `step="${args.step}"` : null} ${args.value ? `value="${args.value}"` : null} ${args.size ? `size="${args.size}"` : null} + ${args.inputmode ? `inputmode="${args.inputmode}"` : null} ${args.autocomplete ? `autocomplete="${args.autocomplete}"` : null} ${args.autofocus ? `autofocus` : null} ${args.readonly ? `readonly` : null} @@ -282,6 +283,7 @@ const Template = args => ${args.step ? `step="${args.step}"` : null} ${args.value ? `value="${args.value}"` : null} ${args.size ? `size="${args.size}"` : null} + ${args.inputmode ? `inputmode="${args.inputmode}"` : null} ${args.autocomplete ? `autocomplete="${args.autocomplete}"` : null} ${args.autofocus ? `autofocus` : null} ${args.readonly ? `readonly` : null} @@ -338,6 +340,7 @@ Default.args = { size: '', value: '', lang: 'en', + inputmode: '', autocomplete: '', hideLabel: false, validateOn: 'blur', @@ -364,6 +367,7 @@ Disabled.args = { hint: 'Hint / example message.', disabled: true, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -388,6 +392,7 @@ Error.args = { required: true, errorMessage: 'Error message or validation message.', lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -411,6 +416,7 @@ Required.args = { hint: 'Hint / example message.', required: true, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -436,6 +442,7 @@ Email.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -459,6 +466,7 @@ Number.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -481,6 +489,7 @@ Password.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -504,6 +513,7 @@ Search.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -527,6 +537,7 @@ Tel.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -550,6 +561,7 @@ Text.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -573,6 +585,7 @@ Url.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -596,6 +609,7 @@ Autocomplete.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: 'given-name', validateOn: 'blur', autofocus: false, @@ -619,6 +633,7 @@ Autofocus.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: true, @@ -642,6 +657,7 @@ Form.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -665,6 +681,7 @@ Max.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -688,6 +705,7 @@ Min.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -711,6 +729,7 @@ Maxlength.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -734,6 +753,7 @@ Minlength.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -757,6 +777,7 @@ Pattern.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -780,6 +801,7 @@ Step.args = { hint: 'Hint / example message.', disabled: false, lang: 'en', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -794,16 +816,40 @@ Step.args = { readonly: false, }; +export const Inputmode = Template.bind({}); +Inputmode.args = { + inputId: 'input-inputmode', + name: 'example-inputmode', + type: 'text', + label: 'Label', + hint: 'Hint / example message.', + disabled: false, + lang: 'en', + inputmode: 'numeric', + autocomplete: '', + validateOn: 'blur', + autofocus: false, + form: '', + max: '', + maxlength: '', + min: '', + minlength: '', + pattern: '', + step: '', + readonly: false, +}; + export const Readonly = Template.bind({}); Readonly.args = { inputId: 'input-readonly', name: 'example-readonly', - type: 'number', + type: 'text', label: 'Label', hint: 'Hint / example message.', disabled: false, lang: 'en', value: 'Readonly', + inputmode: '', autocomplete: '', validateOn: 'blur', autofocus: false, @@ -860,6 +906,7 @@ Props.args = { size: null, value: '', lang: 'en', + inputmode: '', autocomplete: '', hideLabel: false, validateOn: 'blur', @@ -889,6 +936,7 @@ Playground.args = { disabled: false, size: '', value: '', + inputmode: '', autocomplete: '', hideLabel: false, validateOn: 'blur', diff --git a/packages/web/src/components/gcds-input/stories/overview.mdx b/packages/web/src/components/gcds-input/stories/overview.mdx index b874e5e99..99b232f7a 100644 --- a/packages/web/src/components/gcds-input/stories/overview.mdx +++ b/packages/web/src/components/gcds-input/stories/overview.mdx @@ -97,6 +97,10 @@ An input is a space to enter short-form information in response to a question or +#### Inputmode + + + #### Readonly diff --git a/packages/web/src/components/gcds-input/test/gcds-input.spec.ts b/packages/web/src/components/gcds-input/test/gcds-input.spec.ts index c226fd6da..ac54027c5 100644 --- a/packages/web/src/components/gcds-input/test/gcds-input.spec.ts +++ b/packages/web/src/components/gcds-input/test/gcds-input.spec.ts @@ -702,6 +702,34 @@ describe('gcds-input', () => { `); }); + /** + * Input inputmode test + */ + it('renders input inputmode', async () => { + const { root } = await newSpecPage({ + components: [GcdsInput], + html: '', + }); + expect(root).toEqualHtml(` + + +
+ + +
+ + + `); + }); + /** * Input readonly test */