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

Author: ethanWallace

package-lock.json

@@ -1126,16 +1126,16 @@ export declare interface GcdsIcon extends Components.GcdsIcon {}
 
 
 @ProxyCmp({
-  inputs: ['autocomplete', 'disabled', 'errorMessage', 'hideLabel', 'hint', 'inputId', 'label', 'name', 'required', 'size', 'type', 'validateOn', 'validator', 'value'],
-  methods: ['validate'],
+  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'],
+  methods: ['validate', 'checkValidity', 'getValidationMessage'],
   outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsChange', 'gcdsError', 'gcdsValid']
 })
 @Component({
   selector: 'gcds-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['autocomplete', 'disabled', 'errorMessage', 'hideLabel', 'hint', 'inputId', 'label', 'name', 'required', 'size', 'type', 'validateOn', 'validator', 'value'],
+  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'],
   outputs: ['gcdsFocus', 'gcdsBlur', 'gcdsInput', 'gcdsChange', 'gcdsError', 'gcdsValid'],
   standalone: false,
 })
@@ -1187,10 +1187,55 @@ of the expected text length to the user.
    */
   set value(_: Components.GcdsInput['value']) {};
     /**
-   * String to have autocomplete enabled
+   * String to have autocomplete enabled.
    */
   set autocomplete(_: Components.GcdsInput['autocomplete']) {};
     /**
+   * If true, the input will be focused on component render
+   */
+  set autofocus(_: Components.GcdsInput['autofocus']) {};
+    /**
+   * The ID of the form that the input field belongs to.
+   */
+  set form(_: Components.GcdsInput['form']) {};
+    /**
+   * The maximum value that the input field can accept.
+Only applies to number input type.
+   */
+  set max(_: Components.GcdsInput['max']) {};
+    /**
+   * The maximum number of characters that the input field can accept.
+   */
+  set maxlength(_: Components.GcdsInput['maxlength']) {};
+    /**
+   * The minimum value that the input field can accept.
+Only applies to number input type.
+   */
+  set min(_: Components.GcdsInput['min']) {};
+    /**
+   * The minimum number of characters that the input field can accept.
+   */
+  set minlength(_: Components.GcdsInput['minlength']) {};
+    /**
+   * Specifies a regular expression the form control's value should match.
+See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
+   */
+  set pattern(_: Components.GcdsInput['pattern']) {};
+    /**
+   * If true, the input field cannot be modified.
+   */
+  set readonly(_: Components.GcdsInput['readonly']) {};
+    /**
+   * 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
+   */
+  set step(_: Components.GcdsInput['step']) {};
+    /**
+   * Read-only property of the input, returns a ValidityState object that represents the validity states this element is in. @readonly 
+   */
+  set validity(_: Components.GcdsInput['validity']) {};
+    /**
    * Array of validators
    */
   set validator(_: Components.GcdsInput['validator']) {};

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

@@ -331,6 +331,16 @@ export const GcdsInput: StencilVueComponent<JSX.GcdsInput, JSX.GcdsInput["value"
   'type',
   'value',
   'autocomplete',
+  'autofocus',
+  'form',
+  'max',
+  'maxlength',
+  'min',
+  'minlength',
+  'pattern',
+  'readonly',
+  'step',
+  'validity',
   'validator',
   'validateOn',
   'gcdsFocus',

packages/vue/lib/components.ts

@@ -625,9 +625,17 @@ export namespace Components {
     }
     interface GcdsInput {
         /**
-          * String to have autocomplete enabled
+          * String to have autocomplete enabled.
          */
         "autocomplete"?: string;
+        /**
+          * If true, the input will be focused on component render
+         */
+        "autofocus": boolean;
+        /**
+          * Check the validity of gcds-input
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * Specifies if an input element is disabled or not.
           * @default false
@@ -637,6 +645,14 @@ export namespace Components {
           * Error message for an invalid input element.
          */
         "errorMessage"?: string;
+        /**
+          * The ID of the form that the input field belongs to.
+         */
+        "form"?: string;
+        /**
+          * Get validationMessage of gcds-input
+         */
+        "getValidationMessage": () => Promise<string>;
         /**
           * Specifies if the label is hidden or not.
           * @default false
@@ -654,10 +670,34 @@ export namespace Components {
           * Form field label
          */
         "label": string;
+        /**
+          * The maximum value that the input field can accept. Only applies to number input type.
+         */
+        "max"?: number | string;
+        /**
+          * The maximum number of characters that the input field can accept.
+         */
+        "maxlength"?: number;
+        /**
+          * The minimum value that the input field can accept. Only applies to number input type.
+         */
+        "min"?: number | string;
+        /**
+          * The minimum number of characters that the input field can accept.
+         */
+        "minlength"?: number;
         /**
           * Name attribute for an input element.
          */
         "name": string;
+        /**
+          * Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
+         */
+        "pattern"?: string;
+        /**
+          * If true, the input field cannot be modified.
+         */
+        "readonly"?: boolean;
         /**
           * Specifies if a form field is required or not.
           * @default false
@@ -667,6 +707,10 @@ export namespace Components {
           * Size attribute for an input element to provide a visual indication of the expected text length to the user.
          */
         "size"?: number;
+        /**
+          * 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
+         */
+        "step"?: number | 'any';
         /**
           * Set Input types
           * @default 'text'
@@ -687,6 +731,11 @@ export namespace Components {
         "validator": Array<
     string | ValidatorEntry | Validator<string>
   >;
+        /**
+          * Read-only property of the input, returns a ValidityState object that represents the validity states this element is in.
+          * @readonly
+         */
+        "validity": ValidityState;
         /**
           * Default value for an input element.
          */
@@ -2524,9 +2573,13 @@ declare namespace LocalJSX {
     }
     interface GcdsInput {
         /**
-          * String to have autocomplete enabled
+          * String to have autocomplete enabled.
          */
         "autocomplete"?: string;
+        /**
+          * If true, the input will be focused on component render
+         */
+        "autofocus"?: boolean;
         /**
           * Specifies if an input element is disabled or not.
           * @default false
@@ -2536,6 +2589,10 @@ declare namespace LocalJSX {
           * Error message for an invalid input element.
          */
         "errorMessage"?: string;
+        /**
+          * The ID of the form that the input field belongs to.
+         */
+        "form"?: string;
         /**
           * Specifies if the label is hidden or not.
           * @default false
@@ -2553,6 +2610,22 @@ declare namespace LocalJSX {
           * Form field label
          */
         "label": string;
+        /**
+          * The maximum value that the input field can accept. Only applies to number input type.
+         */
+        "max"?: number | string;
+        /**
+          * The maximum number of characters that the input field can accept.
+         */
+        "maxlength"?: number;
+        /**
+          * The minimum value that the input field can accept. Only applies to number input type.
+         */
+        "min"?: number | string;
+        /**
+          * The minimum number of characters that the input field can accept.
+         */
+        "minlength"?: number;
         /**
           * Name attribute for an input element.
          */
@@ -2581,6 +2654,14 @@ declare namespace LocalJSX {
           * Emitted when the input has a validation error.
          */
         "onGcdsValid"?: (event: GcdsInputCustomEvent<object>) => void;
+        /**
+          * Specifies a regular expression the form control's value should match. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
+         */
+        "pattern"?: string;
+        /**
+          * If true, the input field cannot be modified.
+         */
+        "readonly"?: boolean;
         /**
           * Specifies if a form field is required or not.
           * @default false
@@ -2590,6 +2671,10 @@ declare namespace LocalJSX {
           * Size attribute for an input element to provide a visual indication of the expected text length to the user.
          */
         "size"?: number;
+        /**
+          * 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
+         */
+        "step"?: number | 'any';
         /**
           * Set Input types
           * @default 'text'
@@ -2606,6 +2691,11 @@ declare namespace LocalJSX {
         "validator"?: Array<
     string | ValidatorEntry | Validator<string>
   >;
+        /**
+          * Read-only property of the input, returns a ValidityState object that represents the validity states this element is in.
+          * @readonly
+         */
+        "validity"?: ValidityState;
         /**
           * Default value for an input element.
          */