Skip to content

Commit ffa332e

Browse files
ethanWallaceethanWallace
authored
feat(gcds-input): Add native HTML attributes and validation (#893)
* feat: Add native HTML attributes * Add error messages * Update patch + start spec tests * Last of spec tests * Update input method + E2E tests * Update storybook * PR feedback: update updateValidity legibility * Add new error messages * Add missing type error * Another missing error * Final error messages * Add attributes to storybook input overview * PR feedback: remove placeholder attribute
1 parent 1ee8332 commit ffa332e

File tree

12 files changed

+1481
-56
lines changed

12 files changed

+1481
-56
lines changed

‎package-lock.json

Lines changed: 0 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1126,16 +1126,16 @@ export declare interface GcdsIcon extends Components.GcdsIcon {}
11261126

11271127

11281128
@ProxyCmp({
1129-
inputs: ['autocomplete', 'disabled', 'errorMessage', 'hideLabel', 'hint', 'inputId', 'label', 'name', 'required', 'size', 'type', 'validateOn', 'validator', 'value'],
1130-
methods: ['validate'],
1129+
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'],
1130+
methods: ['validate', 'checkValidity', 'getValidationMessage'],
11311131
outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsChange', 'gcdsError', 'gcdsValid']
11321132
})
11331133
@Component({
11341134
selector: 'gcds-input',
11351135
changeDetection: ChangeDetectionStrategy.OnPush,
11361136
template: '<ng-content></ng-content>',
11371137
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1138-
inputs: ['autocomplete', 'disabled', 'errorMessage', 'hideLabel', 'hint', 'inputId', 'label', 'name', 'required', 'size', 'type', 'validateOn', 'validator', 'value'],
1138+
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'],
11391139
outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsChange', 'gcdsError', 'gcdsValid'],
11401140
standalone: false,
11411141
})
@@ -1187,10 +1187,55 @@ of the expected text length to the user.
11871187
*/
11881188
set value(_: Components.GcdsInput['value']) {};
11891189
/**
1190-
* String to have autocomplete enabled
1190+
* String to have autocomplete enabled.
11911191
*/
11921192
set autocomplete(_: Components.GcdsInput['autocomplete']) {};
11931193
/**
1194+
* If true, the input will be focused on component render
1195+
*/
1196+
set autofocus(_: Components.GcdsInput['autofocus']) {};
1197+
/**
1198+
* The ID of the form that the input field belongs to.
1199+
*/
1200+
set form(_: Components.GcdsInput['form']) {};
1201+
/**
1202+
* The maximum value that the input field can accept.
1203+
Only applies to number input type.
1204+
*/
1205+
set max(_: Components.GcdsInput['max']) {};
1206+
/**
1207+
* The maximum number of characters that the input field can accept.
1208+
*/
1209+
set maxlength(_: Components.GcdsInput['maxlength']) {};
1210+
/**
1211+
* The minimum value that the input field can accept.
1212+
Only applies to number input type.
1213+
*/
1214+
set min(_: Components.GcdsInput['min']) {};
1215+
/**
1216+
* The minimum number of characters that the input field can accept.
1217+
*/
1218+
set minlength(_: Components.GcdsInput['minlength']) {};
1219+
/**
1220+
* Specifies a regular expression the form control's value should match.
1221+
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
1222+
*/
1223+
set pattern(_: Components.GcdsInput['pattern']) {};
1224+
/**
1225+
* If true, the input field cannot be modified.
1226+
*/
1227+
set readonly(_: Components.GcdsInput['readonly']) {};
1228+
/**
1229+
* A number that specifies the granularity that the value must adhere to.
1230+
Valid for number type.
1231+
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
1232+
*/
1233+
set step(_: Components.GcdsInput['step']) {};
1234+
/**
1235+
* Read-only property of the input, returns a ValidityState object that represents the validity states this element is in. @readonly
1236+
*/
1237+
set validity(_: Components.GcdsInput['validity']) {};
1238+
/**
11941239
* Array of validators
11951240
*/
11961241
set validator(_: Components.GcdsInput['validator']) {};

‎packages/vue/lib/components.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,16 @@ export const GcdsInput: StencilVueComponent<JSX.GcdsInput, JSX.GcdsInput["value"
331331
'type',
332332
'value',
333333
'autocomplete',
334+
'autofocus',
335+
'form',
336+
'max',
337+
'maxlength',
338+
'min',
339+
'minlength',
340+
'pattern',
341+
'readonly',
342+
'step',
343+
'validity',
334344
'validator',
335345
'validateOn',
336346
'gcdsFocus',

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

Lines changed: 92 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -625,9 +625,17 @@ export namespace Components {
625625
}
626626
interface GcdsInput {
627627
/**
628-
* String to have autocomplete enabled
628+
* String to have autocomplete enabled.
629629
*/
630630
"autocomplete"?: string;
631+
/**
632+
* If true, the input will be focused on component render
633+
*/
634+
"autofocus": boolean;
635+
/**
636+
* Check the validity of gcds-input
637+
*/
638+
"checkValidity": () => Promise<boolean>;
631639
/**
632640
* Specifies if an input element is disabled or not.
633641
* @default false
@@ -637,6 +645,14 @@ export namespace Components {
637645
* Error message for an invalid input element.
638646
*/
639647
"errorMessage"?: string;
648+
/**
649+
* The ID of the form that the input field belongs to.
650+
*/
651+
"form"?: string;
652+
/**
653+
* Get validationMessage of gcds-input
654+
*/
655+
"getValidationMessage": () => Promise<string>;
640656
/**
641657
* Specifies if the label is hidden or not.
642658
* @default false
@@ -654,10 +670,34 @@ export namespace Components {
654670
* Form field label
655671
*/
656672
"label": string;
673+
/**
674+
* The maximum value that the input field can accept. Only applies to number input type.
675+
*/
676+
"max"?: number | string;
677+
/**
678+
* The maximum number of characters that the input field can accept.
679+
*/
680+
"maxlength"?: number;
681+
/**
682+
* The minimum value that the input field can accept. Only applies to number input type.
683+
*/
684+
"min"?: number | string;
685+
/**
686+
* The minimum number of characters that the input field can accept.
687+
*/
688+
"minlength"?: number;
657689
/**
658690
* Name attribute for an input element.
659691
*/
660692
"name": string;
693+
/**
694+
* Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
695+
*/
696+
"pattern"?: string;
697+
/**
698+
* If true, the input field cannot be modified.
699+
*/
700+
"readonly"?: boolean;
661701
/**
662702
* Specifies if a form field is required or not.
663703
* @default false
@@ -667,6 +707,10 @@ export namespace Components {
667707
* Size attribute for an input element to provide a visual indication of the expected text length to the user.
668708
*/
669709
"size"?: number;
710+
/**
711+
* 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
712+
*/
713+
"step"?: number | 'any';
670714
/**
671715
* Set Input types
672716
* @default 'text'
@@ -687,6 +731,11 @@ export namespace Components {
687731
"validator": Array<
688732
string | ValidatorEntry | Validator<string>
689733
>;
734+
/**
735+
* Read-only property of the input, returns a ValidityState object that represents the validity states this element is in.
736+
* @readonly
737+
*/
738+
"validity": ValidityState;
690739
/**
691740
* Default value for an input element.
692741
*/
@@ -2524,9 +2573,13 @@ declare namespace LocalJSX {
25242573
}
25252574
interface GcdsInput {
25262575
/**
2527-
* String to have autocomplete enabled
2576+
* String to have autocomplete enabled.
25282577
*/
25292578
"autocomplete"?: string;
2579+
/**
2580+
* If true, the input will be focused on component render
2581+
*/
2582+
"autofocus"?: boolean;
25302583
/**
25312584
* Specifies if an input element is disabled or not.
25322585
* @default false
@@ -2536,6 +2589,10 @@ declare namespace LocalJSX {
25362589
* Error message for an invalid input element.
25372590
*/
25382591
"errorMessage"?: string;
2592+
/**
2593+
* The ID of the form that the input field belongs to.
2594+
*/
2595+
"form"?: string;
25392596
/**
25402597
* Specifies if the label is hidden or not.
25412598
* @default false
@@ -2553,6 +2610,22 @@ declare namespace LocalJSX {
25532610
* Form field label
25542611
*/
25552612
"label": string;
2613+
/**
2614+
* The maximum value that the input field can accept. Only applies to number input type.
2615+
*/
2616+
"max"?: number | string;
2617+
/**
2618+
* The maximum number of characters that the input field can accept.
2619+
*/
2620+
"maxlength"?: number;
2621+
/**
2622+
* The minimum value that the input field can accept. Only applies to number input type.
2623+
*/
2624+
"min"?: number | string;
2625+
/**
2626+
* The minimum number of characters that the input field can accept.
2627+
*/
2628+
"minlength"?: number;
25562629
/**
25572630
* Name attribute for an input element.
25582631
*/
@@ -2581,6 +2654,14 @@ declare namespace LocalJSX {
25812654
* Emitted when the input has a validation error.
25822655
*/
25832656
"onGcdsValid"?: (event: GcdsInputCustomEvent<object>) => void;
2657+
/**
2658+
* Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
2659+
*/
2660+
"pattern"?: string;
2661+
/**
2662+
* If true, the input field cannot be modified.
2663+
*/
2664+
"readonly"?: boolean;
25842665
/**
25852666
* Specifies if a form field is required or not.
25862667
* @default false
@@ -2590,6 +2671,10 @@ declare namespace LocalJSX {
25902671
* Size attribute for an input element to provide a visual indication of the expected text length to the user.
25912672
*/
25922673
"size"?: number;
2674+
/**
2675+
* 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
2676+
*/
2677+
"step"?: number | 'any';
25932678
/**
25942679
* Set Input types
25952680
* @default 'text'
@@ -2606,6 +2691,11 @@ declare namespace LocalJSX {
26062691
"validator"?: Array<
26072692
string | ValidatorEntry | Validator<string>
26082693
>;
2694+
/**
2695+
* Read-only property of the input, returns a ValidityState object that represents the validity states this element is in.
2696+
* @readonly
2697+
*/
2698+
"validity"?: ValidityState;
26092699
/**
26102700
* Default value for an input element.
26112701
*/

0 commit comments

Comments
 (0)