Skip to content

Commit 495ca18

Browse files
radmorecameronradmorecameron
committed
Add inputmode support
1 parent 80d04e4 commit 495ca18

File tree

10 files changed

+170
-48
lines changed

10 files changed

+170
-48
lines changed

‎packages/angular/src/lib/stencil-generated/components.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1190,7 +1190,7 @@ export declare interface GcdsIcon extends Components.GcdsIcon {}
11901190

11911191

11921192
@ProxyCmp({
1193-
inputs: ['autocomplete', 'autofocus', 'disabled', 'errorMessage', 'form', 'hideLabel', 'hint', 'inputId', 'label', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'readonly', 'required', 'size', 'step', 'type', 'validateOn', 'validator', 'validity', 'value'],
1193+
inputs: ['autocomplete', 'autofocus', 'disabled', 'errorMessage', 'form', 'hideLabel', 'hint', 'inputId', 'inputmode', 'label', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'readonly', 'required', 'size', 'step', 'type', 'validateOn', 'validator', 'validity', 'value'],
11941194
methods: ['validate', 'checkValidity', 'getValidationMessage'],
11951195
outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsChange', 'gcdsError', 'gcdsValid']
11961196
})
@@ -1199,7 +1199,7 @@ export declare interface GcdsIcon extends Components.GcdsIcon {}
11991199
changeDetection: ChangeDetectionStrategy.OnPush,
12001200
template: '<ng-content></ng-content>',
12011201
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1202-
inputs: ['autocomplete', 'autofocus', 'disabled', 'errorMessage', 'form', 'hideLabel', 'hint', 'inputId', 'label', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'readonly', 'required', 'size', 'step', 'type', 'validateOn', 'validator', 'validity', 'value'],
1202+
inputs: ['autocomplete', 'autofocus', 'disabled', 'errorMessage', 'form', 'hideLabel', 'hint', 'inputId', 'inputmode', 'label', 'max', 'maxlength', 'min', 'minlength', 'name', 'pattern', 'readonly', 'required', 'size', 'step', 'type', 'validateOn', 'validator', 'validity', 'value'],
12031203
outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsChange', 'gcdsError', 'gcdsValid'],
12041204
standalone: false,
12051205
})
@@ -1247,6 +1247,10 @@ of the expected text length to the user.
12471247
*/
12481248
set type(_: Components.GcdsInput['type']) {};
12491249
/**
1250+
* @default null
1251+
*/
1252+
set inputmode(_: Components.GcdsInput['inputmode']) {};
1253+
/**
12501254
* Default value for an input element.
12511255
*/
12521256
set value(_: Components.GcdsInput['value']) {};

‎packages/vue/lib/components.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,7 @@ export const GcdsInput: StencilVueComponent<JSX.GcdsInput, JSX.GcdsInput["value"
357357
'required',
358358
'size',
359359
'type',
360+
'inputmode',
360361
'value',
361362
'autocomplete',
362363
'autofocus',

‎packages/web/src/components.d.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -732,6 +732,17 @@ export namespace Components {
732732
* Id attribute for an input element.
733733
*/
734734
"inputId": string;
735+
/**
736+
* @default null
737+
*/
738+
"inputmode"?: | 'none'
739+
| 'text'
740+
| 'decimal'
741+
| 'numeric'
742+
| 'tel'
743+
| 'search'
744+
| 'email'
745+
| 'url';
735746
/**
736747
* Form field label
737748
*/
@@ -3078,6 +3089,17 @@ declare namespace LocalJSX {
30783089
* Id attribute for an input element.
30793090
*/
30803091
"inputId": string;
3092+
/**
3093+
* @default null
3094+
*/
3095+
"inputmode"?: | 'none'
3096+
| 'text'
3097+
| 'decimal'
3098+
| 'numeric'
3099+
| 'tel'
3100+
| 'search'
3101+
| 'email'
3102+
| 'url';
30813103
/**
30823104
* Form field label
30833105
*/

‎packages/web/src/components/gcds-date-input/gcds-date-input.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -451,6 +451,7 @@ export class GcdsDateInput {
451451
label={i18n[lang].year}
452452
inputId="year"
453453
type="number"
454+
inputmode="numeric"
454455
size={4}
455456
disabled={disabled}
456457
value={this.yearValue}
@@ -470,6 +471,7 @@ export class GcdsDateInput {
470471
label={i18n[lang].day}
471472
inputId="day"
472473
type="number"
474+
inputmode="numeric"
473475
size={2}
474476
disabled={disabled}
475477
value={this.dayValue}

‎packages/web/src/components/gcds-date-input/test/gcds-date-input.spec.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ describe('gcds-date-input', () => {
5252
December
5353
</option>
5454
</gcds-select>
55-
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" value="" validate-on="other"></gcds-input>
56-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="" validate-on="other"></gcds-input>
55+
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
56+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
5757
</fieldset>
5858
</gcds-date-input>
5959
`);
@@ -71,7 +71,7 @@ describe('gcds-date-input', () => {
7171
<legend id="date-input-legend">
7272
Date input
7373
</legend>
74-
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Jour" name="day" size="2" type="number" value="" validate-on="other"></gcds-input>
74+
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Jour" name="day" size="2" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
7575
<gcds-select aria-invalid="false" class="gcds-date-input__month" defaultvalue="Sélectionnez un mois" label="Mois" name="month" selectid="month" value="">
7676
<option value="01">
7777
janvier
@@ -110,7 +110,7 @@ describe('gcds-date-input', () => {
110110
décembre
111111
</option>
112112
</gcds-select>
113-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Année" name="year" size="4" type="number" value="" validate-on="other"></gcds-input>
113+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Année" name="year" size="4" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
114114
</fieldset>
115115
</mock:shadow-root>
116116
</gcds-date-input>
@@ -167,7 +167,7 @@ describe('gcds-date-input', () => {
167167
December
168168
</option>
169169
</gcds-select>
170-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="" validate-on="other"></gcds-input>
170+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
171171
</fieldset>
172172
</gcds-date-input>
173173
`);
@@ -223,7 +223,7 @@ describe('gcds-date-input', () => {
223223
décembre
224224
</option>
225225
</gcds-select>
226-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Année" name="year" size="4" type="number" value="" validate-on="other"></gcds-input>
226+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Année" name="year" size="4" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
227227
</fieldset>
228228
</mock:shadow-root>
229229
</gcds-date-input>
@@ -283,8 +283,8 @@ describe('gcds-date-input', () => {
283283
December
284284
</option>
285285
</gcds-select>
286-
<gcds-input aria-invalid="false" aria-required="true" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" value="" validate-on="other"></gcds-input>
287-
<gcds-input aria-invalid="false" aria-required="true" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="" validate-on="other"></gcds-input>
286+
<gcds-input aria-invalid="false" aria-required="true" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
287+
<gcds-input aria-invalid="false" aria-required="true" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
288288
</fieldset>
289289
</gcds-date-input>
290290
`);
@@ -343,8 +343,8 @@ describe('gcds-date-input', () => {
343343
December
344344
</option>
345345
</gcds-select>
346-
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" value="" validate-on="other"></gcds-input>
347-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="" validate-on="other"></gcds-input>
346+
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
347+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="" validate-on="other"></gcds-input>
348348
</fieldset>
349349
</gcds-date-input>
350350
`);
@@ -400,8 +400,8 @@ describe('gcds-date-input', () => {
400400
December
401401
</option>
402402
</gcds-select>
403-
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" value="15" validate-on="other"></gcds-input>
404-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="1991" validate-on="other"></gcds-input>
403+
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" inputmode="numeric" value="15" validate-on="other"></gcds-input>
404+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="1991" validate-on="other"></gcds-input>
405405
</fieldset>
406406
</gcds-date-input>
407407
`);
@@ -457,7 +457,7 @@ describe('gcds-date-input', () => {
457457
December
458458
</option>
459459
</gcds-select>
460-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="1991" validate-on="other"></gcds-input>
460+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="1991" validate-on="other"></gcds-input>
461461
</fieldset>
462462
</gcds-date-input>
463463
`);
@@ -513,8 +513,8 @@ describe('gcds-date-input', () => {
513513
December
514514
</option>
515515
</gcds-select>
516-
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" value="015" validate-on="other"></gcds-input>
517-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="1991" validate-on="other"></gcds-input>
516+
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" inputmode="numeric" value="015" validate-on="other"></gcds-input>
517+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="1991" validate-on="other"></gcds-input>
518518
</fieldset>
519519
</mock:shadow-root>
520520
</gcds-date-input>
@@ -571,7 +571,7 @@ describe('gcds-date-input', () => {
571571
December
572572
</option>
573573
</gcds-select>
574-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="1991" validate-on="other"></gcds-input>
574+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="1991" validate-on="other"></gcds-input>
575575
</fieldset>
576576
</mock:shadow-root>
577577
</gcds-date-input>
@@ -676,8 +676,8 @@ describe('gcds-date-input', () => {
676676
December
677677
</option>
678678
</gcds-select>
679-
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" value="red" validate-on="other"></gcds-input>
680-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="222f" validate-on="other"></gcds-input>
679+
<gcds-input aria-invalid="false" class="gcds-date-input__day" inputid="day" label="Day" name="day" size="2" type="number" inputmode="numeric" value="red" validate-on="other"></gcds-input>
680+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="222f" validate-on="other"></gcds-input>
681681
</fieldset>
682682
</gcds-date-input>
683683
`);
@@ -733,7 +733,7 @@ describe('gcds-date-input', () => {
733733
December
734734
</option>
735735
</gcds-select>
736-
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" value="222f" validate-on="other"></gcds-input>
736+
<gcds-input aria-invalid="false" class="gcds-date-input__year" inputid="year" label="Year" name="year" size="4" type="number" inputmode="numeric" value="222f" validate-on="other"></gcds-input>
737737
</fieldset>
738738
</gcds-date-input>
739739
`);

‎packages/web/src/components/gcds-input/gcds-input.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,16 @@ export class GcdsInput {
126126
// prettier-ignore
127127
@Prop() type?: 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url' = 'text';
128128

129+
@Prop() inputmode?:
130+
| 'none'
131+
| 'text'
132+
| 'decimal'
133+
| 'numeric'
134+
| 'tel'
135+
| 'search'
136+
| 'email'
137+
| 'url' = null;
138+
129139
/**
130140
* Default value for an input element.
131141
*/
@@ -503,6 +513,7 @@ export class GcdsInput {
503513
required,
504514
size,
505515
type,
516+
inputmode,
506517
value,
507518
hasError,
508519
autocomplete,
@@ -529,6 +540,7 @@ export class GcdsInput {
529540
disabled,
530541
required,
531542
type,
543+
inputmode,
532544
autocomplete,
533545
autofocus,
534546
form,

0 commit comments

Comments
 (0)