From d773c4829492b2ecba8ab17889429cc7d3d2f3b9 Mon Sep 17 00:00:00 2001 From: Micah Jones <48889844+micahjones13@users.noreply.github.com> Date: Tue, 31 Oct 2023 10:51:19 -0600 Subject: [PATCH] feat(input): add autocomplete (#1254) * feat(input): add autocomplete * docs: changeset --- .changeset/nine-baboons-sleep.md | 8 ++++ packages/web-components/src/components.d.ts | 8 ++++ .../src/components/rux-input/readme.md | 37 ++++++++++--------- .../src/components/rux-input/rux-input.tsx | 8 ++++ .../components/rux-input/test/input.spec.ts | 36 +++++++++--------- .../src/components/rux-timeline/readme.md | 17 +++++---- .../rux-timeline/rux-track/readme.md | 7 ++++ 7 files changed, 77 insertions(+), 44 deletions(-) create mode 100644 .changeset/nine-baboons-sleep.md diff --git a/.changeset/nine-baboons-sleep.md b/.changeset/nine-baboons-sleep.md new file mode 100644 index 000000000..0658a9549 --- /dev/null +++ b/.changeset/nine-baboons-sleep.md @@ -0,0 +1,8 @@ +--- +"@astrouxds/angular": minor +"@astrouxds/astro-web-components": minor +"angular-workspace": minor +"@astrouxds/react": minor +--- + +Added autocomplete property to rux-input diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts index 2b0eea4de..f8e3fcc75 100644 --- a/packages/web-components/src/components.d.ts +++ b/packages/web-components/src/components.d.ts @@ -19380,6 +19380,10 @@ export namespace Components { interface RuxIndeterminateProgress { } interface RuxInput { + /** + * The inputs autocomplete attribute. In password inputs, this attribute gets set to 'off'. + */ + "autocomplete": 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. */ @@ -54907,6 +54911,10 @@ declare namespace LocalJSX { interface RuxIndeterminateProgress { } interface RuxInput { + /** + * The inputs autocomplete attribute. In password inputs, this attribute gets set to 'off'. + */ + "autocomplete"?: 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. */ diff --git a/packages/web-components/src/components/rux-input/readme.md b/packages/web-components/src/components/rux-input/readme.md index 81cdd773e..0a0da1830 100644 --- a/packages/web-components/src/components/rux-input/readme.md +++ b/packages/web-components/src/components/rux-input/readme.md @@ -5,24 +5,25 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------- | -| `disabled` | `disabled` | 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. | `boolean` | `false` | -| `errorText` | `error-text` | The validation error text | `string \| undefined` | `undefined` | -| `helpText` | `help-text` | The help or explanation text | `string \| undefined` | `undefined` | -| `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` | -| `min` | `min` | The input min 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` | -| `required` | `required` | Sets the input as required | `boolean` | `false` | -| `size` | `size` | Control the padding around the input field | `"large" \| "medium" \| "small"` | `'medium'` | -| `spellcheck` | `spellcheck` | The input's spellcheck attribute | `boolean` | `false` | -| `step` | `step` | The input step attribute | `string \| undefined` | `undefined` | -| `type` | `type` | The input type | `"date" \| "datetime-local" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url"` | `'text'` | -| `value` | `value` | The input value | `string` | `''` | +| Property | Attribute | Description | Type | Default | +| -------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ----------- | +| `autocomplete` | `autocomplete` | | `string` | `'off'` | +| `disabled` | `disabled` | 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. | `boolean` | `false` | +| `errorText` | `error-text` | The validation error text | `string \| undefined` | `undefined` | +| `helpText` | `help-text` | The help or explanation text | `string \| undefined` | `undefined` | +| `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` | +| `min` | `min` | The input min 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` | +| `required` | `required` | Sets the input as required | `boolean` | `false` | +| `size` | `size` | Control the padding around the input field | `"large" \| "medium" \| "small"` | `'medium'` | +| `spellcheck` | `spellcheck` | The input's spellcheck attribute | `boolean` | `false` | +| `step` | `step` | The input step attribute | `string \| undefined` | `undefined` | +| `type` | `type` | The input type | `"date" \| "datetime-local" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url"` | `'text'` | +| `value` | `value` | The input value | `string` | `''` | ## Events diff --git a/packages/web-components/src/components/rux-input/rux-input.tsx b/packages/web-components/src/components/rux-input/rux-input.tsx index 6ca0134a4..df79150d9 100644 --- a/packages/web-components/src/components/rux-input/rux-input.tsx +++ b/packages/web-components/src/components/rux-input/rux-input.tsx @@ -143,6 +143,11 @@ export class RuxInput implements FormFieldInterface { */ @Prop() readonly = false + /** + * The inputs autocomplete attribute. In password inputs, this attribute gets set to 'off'. + */ + @Prop() autocomplete = 'off' + /** * Fired when the value of the input changes - [HTMLElement/input_event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) */ @@ -244,6 +249,7 @@ export class RuxInput implements FormFieldInterface { this.type === 'password' ? (this.togglePassword = true) : (this.togglePassword = false) + if (this.type === 'password') this.autocomplete = 'off' } private _handleTogglePassword() { @@ -281,6 +287,7 @@ export class RuxInput implements FormFieldInterface { readonly, togglePassword, isPasswordVisible, + autocomplete, } = this renderHiddenInput(true, el, name, value, disabled) @@ -360,6 +367,7 @@ export class RuxInput implements FormFieldInterface { onBlur={_onBlur} onFocus={_onFocus} part="input" + autocomplete={autocomplete} ></input> {togglePassword ? ( <button 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 index a11de309e..353924dbf 100644 --- a/packages/web-components/src/components/rux-input/test/input.spec.ts +++ b/packages/web-components/src/components/rux-input/test/input.spec.ts @@ -299,24 +299,24 @@ test.describe('Input with form', () => { await expect(spellCheckInput).toHaveAttribute('spellcheck', 'true') }) //! Uncomment autocomplete tests when the attribute is added back in and working. - // test('applies autocomplete prop to shadow input', async ({ page }) => { - // //Arrange - // const autocomplete = page.locator('#autocomplete') - // const autocompleteInput = autocomplete.locator('input').nth(1) - - // //Assert - // await expect(autocompleteInput).toHaveAttribute('autocomplete', 'on') - // }) - // test('changes autocomplete to false if type is password', async ({ - // page, - // }) => { - // //Arrange - // const autocomplete = page.locator('#autocomplete-to-off') - // const autocompleteInput = autocomplete.locator('input').nth(1) - - // //Assert - // await expect(autocompleteInput).toHaveAttribute('autocomplete', 'off') - // }) + test('applies autocomplete prop to shadow input', async ({ page }) => { + //Arrange + const autocomplete = page.locator('#autocomplete') + const autocompleteInput = autocomplete.locator('input').nth(1) + + //Assert + await expect(autocompleteInput).toHaveAttribute('autocomplete', 'on') + }) + test('changes autocomplete to off if type is password', async ({ + page, + }) => { + //Arrange + const autocomplete = page.locator('#autocomplete-to-off') + const autocompleteInput = autocomplete.locator('input').nth(1) + + //Assert + await expect(autocompleteInput).toHaveAttribute('autocomplete', 'off') + }) test('submits the correct value in type date', async ({ page }) => { //Arrange const dateType = page.locator('#date-type') diff --git a/packages/web-components/src/components/rux-timeline/readme.md b/packages/web-components/src/components/rux-timeline/readme.md index 1e7597970..dee2754da 100644 --- a/packages/web-components/src/components/rux-timeline/readme.md +++ b/packages/web-components/src/components/rux-timeline/readme.md @@ -5,14 +5,15 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `end` | `end` | The timeline's end date. Must be an ISO string "2021-02-02T05:00:00Z" | `string` | `''` | -| `interval` | `interval` | The timeline's date time interval | `"day" \| "hour"` | `'hour'` | -| `playhead` | `playhead` | The timeline's playhead date time. Must be an ISO string "2021-02-02T05:00:00Z" | `string \| undefined` | `undefined` | -| `start` | `start` | The timeline's start date. Must be an ISO string "2021-02-02T05:00:00Z" | `string` | `''` | -| `timezone` | `timezone` | Controls the timezone that the timeline is localized to. Must be an IANA time zone name ("America/New_York") or an offset string. | `string` | `'UTC'` | -| `zoom` | `zoom` | The timeline's zoom level. | `number` | `1` | +| Property | Attribute | Description | Type | Default | +| -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | +| `end` | `end` | The timeline's end date. Must be an ISO string "2021-02-02T05:00:00Z" | `string` | `''` | +| `hasPlayedIndicator` | `has-played-indicator` | Visually marks past time as played in each track | `boolean` | `false` | +| `interval` | `interval` | The timeline's date time interval | `"day" \| "hour"` | `'hour'` | +| `playhead` | `playhead` | The timeline's playhead date time. Must be an ISO string "2021-02-02T05:00:00Z" | `string \| undefined` | `undefined` | +| `start` | `start` | The timeline's start date. Must be an ISO string "2021-02-02T05:00:00Z" | `string` | `''` | +| `timezone` | `timezone` | Controls the timezone that the timeline is localized to. Must be an IANA time zone name ("America/New_York") or an offset string. | `string` | `'UTC'` | +| `zoom` | `zoom` | The timeline's zoom level. | `number` | `1` | ## Shadow Parts diff --git a/packages/web-components/src/components/rux-timeline/rux-track/readme.md b/packages/web-components/src/components/rux-timeline/rux-track/readme.md index d621660b2..3978a62aa 100644 --- a/packages/web-components/src/components/rux-timeline/rux-track/readme.md +++ b/packages/web-components/src/components/rux-timeline/rux-track/readme.md @@ -3,6 +3,13 @@ <!-- Auto Generated Below --> +## Properties + +| Property | Attribute | Description | Type | Default | +| ---------- | ---------- | ----------- | ----- | ----------- | +| `playhead` | `playhead` | | `any` | `undefined` | + + ## Slots | Slot | Description |