Mj.6884 input max min length (#1353)

* feat(input): add min and max length attributes * chore: build * docs: changeset * docs(input): update story
RocketCommunicationsInc · Oct 18, 2024 · 44237a2 · 44237a2
1 parent 0944b9e
commit 44237a2
Show file tree

Hide file tree

Showing 6 changed files with 179 additions and 12 deletions.
diff --git a/.changeset/strong-ravens-build.md b/.changeset/strong-ravens-build.md
@@ -0,0 +1,11 @@
+---
+"@astrouxds/angular": minor
+"@astrouxds/astro-web-components": minor
+"angular-workspace": minor
+"astro-angular": minor
+"astro-react": minor
+"astro-vue": minor
+"@astrouxds/react": minor
+---
+
+Added minlength and maxlength to rux-input
diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -19414,10 +19414,18 @@ export namespace Components {
           * The input max attribute
          */
         "max"?: string;
+        /**
+          * The input maxlength attribute
+         */
+        "maxlength"?: string;
         /**
           * The input min attribute
          */
         "min"?: string;
+        /**
+          * The input minlength attribute
+         */
+        "minlength"?: string;
         /**
           * The input name
          */
@@ -54952,10 +54960,18 @@ declare namespace LocalJSX {
           * The input max attribute
          */
         "max"?: string;
+        /**
+          * The input maxlength attribute
+         */
+        "maxlength"?: string;
         /**
           * The input min attribute
          */
         "min"?: string;
+        /**
+          * The input minlength attribute
+         */
+        "minlength"?: string;
         /**
           * The input name
          */

diff --git a/packages/web-components/src/components/rux-input/readme.md b/packages/web-components/src/components/rux-input/readme.md
@@ -14,7 +14,9 @@
 | `invalid`      | `invalid`      | Presentational only. Renders the Input Field as invalid.                                                                                                                                | `boolean`                                                                                                           | `false`     |
 | `label`        | `label`        | The input label text. For HTML content, use the `label` slot instead.                                                                                                                   | `string \| undefined`                                                                                               | `undefined` |
 | `max`          | `max`          | The input max attribute                                                                                                                                                                 | `string \| undefined`                                                                                               | `undefined` |
+| `maxlength`    | `maxlength`    | The input maxlength attribute                                                                                                                                                           | `string \| undefined`                                                                                               | `undefined` |
 | `min`          | `min`          | The input min attribute                                                                                                                                                                 | `string \| undefined`                                                                                               | `undefined` |
+| `minlength`    | `minlength`    | The input minlength attribute                                                                                                                                                           | `string \| undefined`                                                                                               | `undefined` |
 | `name`         | `name`         | The input name                                                                                                                                                                          | `string`                                                                                                            | `''`        |
 | `placeholder`  | `placeholder`  | The input placeholder text                                                                                                                                                              | `string \| undefined`                                                                                               | `undefined` |
 | `readonly`     | `readonly`     | The inputs readonly attribute                                                                                                                                                           | `boolean`                                                                                                           | `false`     |

diff --git a/packages/web-components/src/components/rux-input/rux-input.tsx b/packages/web-components/src/components/rux-input/rux-input.tsx
@@ -1,18 +1,19 @@
 import {
-    Prop,
-    Host,
     Component,
+    Element,
     Event,
     EventEmitter,
-    h,
-    Element,
+    Host,
+    Method,
+    Prop,
     State,
     Watch,
-    Method,
+    h,
 } from '@stencil/core'
-import { FormFieldInterface } from '../../common/interfaces.module'
 import { hasSlot, renderHiddenInput } from '../../utils/utils'
 
+import { FormFieldInterface } from '../../common/interfaces.module'
+
 let id = 0
 
 /**
@@ -113,6 +114,16 @@ export class RuxInput implements FormFieldInterface {
      */
     @Prop() max?: string
 
+    /**
+     * The input maxlength attribute
+     */
+    @Prop() maxlength?: string
+
+    /**
+     * The input minlength attribute
+     */
+    @Prop() minlength?: string
+
     /**
      * Disables the button via HTML disabled attribute. Button takes on a distinct visual state. Cursor uses the not-allowed system replacement and all keyboard and mouse events are ignored.
      */
@@ -288,6 +299,8 @@ export class RuxInput implements FormFieldInterface {
             togglePassword,
             isPasswordVisible,
             autocomplete,
+            minlength,
+            maxlength,
         } = this
 
         renderHiddenInput(true, el, name, value, disabled)
@@ -357,6 +370,8 @@ export class RuxInput implements FormFieldInterface {
                             step={step}
                             min={min}
                             max={max}
+                            minlength={minlength}
+                            maxlength={maxlength}
                             value={value}
                             class="native-input"
                             id={inputId}

diff --git a/packages/web-components/src/components/rux-input/test/input.spec.ts b/packages/web-components/src/components/rux-input/test/input.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from '../../../../tests/utils/_astro-fixtures'
+import { expect, test } from '../../../../tests/utils/_astro-fixtures'
 
 test.describe('Input with form', () => {
     const testString = 'Hello World'
@@ -145,6 +145,7 @@ test.describe('Input with form', () => {
                 </form>
                 <ul id="log"></ul>
             </div>
+
         </body>
         `
 
@@ -427,3 +428,47 @@ test.describe('Input', () => {
         expect(isFocused).toBeTruthy()
     })
 })
+
+test.describe('Min and max length', () => {
+    test('minlength works', async ({ page }) => {
+        const template = `
+          <div style="margin: auto; width: 300px;">
+            <rux-input id="minmaxlength" minlength="1" maxlength="3"></rux-input>
+          </div>`
+        await page.setContent(template)
+
+        // Access the shadow DOM input inside the <rux-input> component
+        const input = page.locator('#minmaxlength').locator('#rux-input-1')
+
+        // Type into the input
+        await input.type('12')
+
+        // Check validity
+        await input.evaluate((el: HTMLInputElement) => el.reportValidity())
+        const validityState = await input.evaluate(
+            (el: HTMLInputElement) => el.validity.tooShort
+        )
+
+        // Assert the validity
+        expect(validityState).toBe(false)
+    })
+    test('maxlength works', async ({ page }) => {
+        const template = `
+        <div style="margin: auto; width: 300px;">
+          <rux-input id="minmaxlength" minlength="1" maxlength="3"></rux-input>
+        </div>`
+        await page.setContent(template)
+
+        // Access the shadow DOM input inside the <rux-input> component
+        const input = page.locator('#minmaxlength').locator('#rux-input-1')
+
+        // Type into the input
+        await input.type('1234')
+
+        //test that only 123 were typed, since the maxlength is 3
+        const inputValue = await input.evaluate(
+            (el: HTMLInputElement) => el.value
+        )
+        expect(inputValue.length).toBe(3) // Input should only contain '123'
+    })
+})
diff --git a/packages/web-components/src/stories/input.stories.js b/packages/web-components/src/stories/input.stories.js
@@ -1,8 +1,8 @@
-import { extractArgTypes } from '@astrouxds/storybook-addon-docs-stencil';
-import { html } from 'lit-html';
+import { extractArgTypes } from '@astrouxds/storybook-addon-docs-stencil'
+import { html } from 'lit-html'
 
 const Base = (args) => {
-return html`
+    return html`
         <rux-input
             label="${args.label}"
             .disabled="${args.disabled}"
@@ -21,6 +21,8 @@ return html`
             autocomplete="${args.autocomplete}"
             ?spellcheck="${args.spellcheck}"
             size="${args.size}"
+            .minlength="${args.minlength}"
+            .maxlength="${args.maxlength}"
         ></rux-input>
     `
 }
@@ -45,6 +47,8 @@ const Icons = (args) => {
             ?readonly="${args.readonly}"
             ?autocomplete="${args.autocomplete}"
             ?spellcheck="${args.spellcheck}"
+            .minlength="${args.minlength}"
+            .maxlength="${args.maxlength}"
         >
             <rux-icon
                 slot="prefix"
@@ -71,6 +75,8 @@ const Icons = (args) => {
             ?readonly="${args.readonly}"
             ?autocomplete="${args.autocomplete}"
             ?spellcheck="${args.spellcheck}"
+            .minlength="${args.minlength}"
+            .maxlength="${args.maxlength}"
         >
             <rux-icon
                 slot="suffix"
@@ -97,6 +103,8 @@ const Icons = (args) => {
             ?readonly="${args.readonly}"
             ?autocomplete="${args.autocomplete}"
             ?spellcheck="${args.spellcheck}"
+            .minlength="${args.minlength}"
+            .maxlength="${args.maxlength}"
         >
             <rux-icon
                 slot="prefix"
@@ -132,6 +140,8 @@ const Sizes = (args) => {
             ?readonly="${args.readonly}"
             ?autocomplete="${args.autocomplete}"
             ?spellcheck="${args.spellcheck}"
+            .minlength="${args.minlength}"
+            .maxlength="${args.maxlength}"
         ></rux-input>
         <br />
         <rux-input
@@ -152,6 +162,8 @@ const Sizes = (args) => {
             ?readonly="${args.readonly}"
             ?autocomplete="${args.autocomplete}"
             ?spellcheck="${args.spellcheck}"
+            .minlength="${args.minlength}"
+            .maxlength="${args.maxlength}"
         ></rux-input>
         <br />
         <rux-input
@@ -172,6 +184,8 @@ const Sizes = (args) => {
             ?readonly="${args.readonly}"
             ?autocomplete="${args.autocomplete}"
             ?spellcheck="${args.spellcheck}"
+            .minlength="${args.minlength}"
+            .maxlength="${args.maxlength}"
         ></rux-input>
     `
 }
@@ -269,6 +283,8 @@ const HorizontalLabel = (args) => {
             ?autocomplete="${args.autocomplete}"
             ?spellcheck="${args.spellcheck}"
             size="${args.size}"
+            .minlength="${args.minlength}"
+            .maxlength="${args.maxlength}"
         ></rux-input>
     `
 }
@@ -312,6 +328,8 @@ export const Default = {
         spellcheck: false,
         step: '',
         value: '',
+        minlength: '',
+        maxlength: '',
     },
 
     argTypes: {
@@ -343,6 +361,8 @@ export const Disabled = {
         spellcheck: false,
         step: '',
         value: '',
+        minlength: '',
+        maxlength: '',
     },
 
     argTypes: {
@@ -357,10 +377,25 @@ export const Required = {
     name: 'Required',
 
     args: {
-        label: 'Required input',
-        required: true,
         type: 'text',
+        label: 'Required Input',
+        autocomplete: '',
+        disabled: false,
+        errorText: '',
+        helpText: '',
+        invalid: false,
+        max: '',
+        min: '',
+        name: '',
+        placeholder: '',
+        readonly: false,
+        required: true,
         size: 'medium',
+        spellcheck: false,
+        step: '',
+        value: '',
+        minlength: '',
+        maxlength: '',
     },
 }
 
@@ -370,7 +405,24 @@ export const WithIcons = {
 
     args: {
         type: 'text',
+        label: '',
+        autocomplete: '',
+        disabled: false,
+        errorText: '',
+        helpText: '',
+        invalid: false,
+        max: '',
+        min: '',
+        name: '',
+        placeholder: '',
+        readonly: false,
+        required: false,
         size: 'medium',
+        spellcheck: false,
+        step: '',
+        value: '',
+        minlength: '',
+        maxlength: '',
     },
 }
 
@@ -484,6 +536,16 @@ export const WithSizes = {
                 disable: true,
             },
         },
+        minlength: {
+            table: {
+                disable: true,
+            },
+        },
+        maxlength: {
+            table: {
+                disable: true,
+            },
+        },
     },
 }
 
@@ -509,6 +571,8 @@ export const HelpText = {
         spellcheck: false,
         step: '',
         value: '',
+        minlength: '',
+        maxlength: '',
     },
 
     argTypes: {
@@ -540,6 +604,8 @@ export const Invalid = {
         spellcheck: false,
         step: '',
         value: '',
+        minlength: '',
+        maxlength: '',
     },
 
     argTypes: {
@@ -661,6 +727,16 @@ export const WithTypes = {
                 disable: true,
             },
         },
+        minlength: {
+            table: {
+                disable: true,
+            },
+        },
+        maxlength: {
+            table: {
+                disable: true,
+            },
+        },
     },
 }
 
@@ -691,6 +767,8 @@ export const WithHorizontalLabel = {
         spellcheck: false,
         step: '',
         value: '',
+        minlength: '',
+        maxlength: '',
     },
 
     argTypes: {