Skip to content

Commit

Permalink
feat(input): add autocomplete (#1254)
Browse files Browse the repository at this point in the history 
* feat(input): add autocomplete

* docs: changeset
  • Loading branch information
@micahjones13
micahjones13 authored Oct 31, 2023
1 parent 9324685 commit d773c48
Show file tree
Hide file tree
Showing 7 changed files with 77 additions and 44 deletions.
8 changes: 8 additions & 0 deletions .changeset/nine-baboons-sleep.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@astrouxds/angular": minor
"@astrouxds/astro-web-components": minor
"angular-workspace": minor
"@astrouxds/react": minor
---

Added autocomplete property to rux-input
8 changes: 8 additions & 0 deletions packages/web-components/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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.
*/
Expand Down
37 changes: 19 additions & 18 deletions packages/web-components/src/components/rux-input/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 8 additions & 0 deletions packages/web-components/src/components/rux-input/rux-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
*/
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -281,6 +287,7 @@ export class RuxInput implements FormFieldInterface {
readonly,
togglePassword,
isPasswordVisible,
autocomplete,
} = this

renderHiddenInput(true, el, name, value, disabled)
Expand Down Expand Up @@ -360,6 +367,7 @@ export class RuxInput implements FormFieldInterface {
onBlur={_onBlur}
onFocus={_onFocus}
part="input"
autocomplete={autocomplete}
></input>
{togglePassword ? (
<button
Expand Down
36 changes: 18 additions & 18 deletions packages/web-components/src/components/rux-input/test/input.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
Loading

0 comments on commit d773c48

Please sign in to comment.