Skip to content

Commit

Permalink
feat(forms): add autocomplete (autofill) support
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Oct 30, 2023
1 parent 23edce7 commit 3245337
Show file tree
Hide file tree
Showing 25 changed files with 279 additions and 80 deletions.
4 changes: 4 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,10 @@ When building your application forms, preferably use the following layout compon

To build an entire form, there are surrounding components such as [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler) and [StepsLayout](/uilib/extensions/forms/extended-features/StepsLayout) that make data flow and layout easier and save you a lot of extra code, without compromising flexibility.

#### Related topics

- [Best Practices on Forms](/uilib/extensions/forms/best-practices-on-forms/).

### Value components

Beside the interactive [Field](/uilib/extensions/forms/create-component/Field/) components, there are also the static [Value](/uilib/extensions/forms/create-component/Value/) components. Use these to show summaries or read-only parts of your application with benefits such as linking to source data and standardized formatting based on the type of data to be displayed.
Expand Down
4 changes: 4 additions & 0 deletions ...esign-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,7 @@ showTabs: true
`Field.Number` is the base component for receiving user input where the target data is of type `number`.

There is a corresponding [Value.Number](/uilib/extensions/forms/create-component/Value/Number) component.

## Autocomplete and autofill

Check out the [Field.String](/uilib/extensions/forms/base-fields/String/#autocomplete-and-autofill) docs about autocomplete.
1 change: 1 addition & 0 deletions ...system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,5 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
| `multipleOf` | `number` | _(optional)_ Validation that requires the number to be a multiple of given value. |
| `width` | `string` or `false` | _(optional)_ `false` for no width (use browser default), `small`, `medium` or `large` for predefined standard widths, `stretch` for fill available width. |
| `help` | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `contents` |
| `autoComplete` | `on` or `string` | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ Spacing properties like `top` or `bottom` are supported. |
24 changes: 24 additions & 0 deletions ...esign-system-portal/src/docs/uilib/extensions/forms/base-fields/String/info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,27 @@ showTabs: true
`Field.String` is the base component for receiving user input where the target data is of type `string`.

There is a corresponding [Value.String](/uilib/extensions/forms/create-component/Value/String) component.

## Autocomplete and autofill

The string component does support HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).

1. You may either set the property directly on each field:

```tsx
<Form.Hander>
<Field.String autoComplete="first-name" path="/your-pointer" />
<Field.String autoComplete="last-name" path="/your-pointer" />
</Form.Hander>
```

2. Or use the "less-code" approach, by just giving the data pointer `path` a meaningful name:

```tsx
<Form.Hander autoComplete={true}>
<Field.String path="/firstName" />
<Field.String path="/lastName" />
</Form.Hander>
```

The `path` property will be used to set the `name` attribute.
1 change: 1 addition & 0 deletions ...system-portal/src/docs/uilib/extensions/forms/base-fields/String/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties.
| `innerRef` | `React.ref` | _(optional)_ by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`. |
| `clear` | `boolean` | _(optional)_ True to have a clickable clear-icon for removing the active value |
| `autoresize` | `boolean` | _(optional)_ For `multiline`, set true to expand when writing longer texts. |
| `autoComplete` | `on` or `string` | _(optional)_ For HTML `autocomplete` [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). |
| `autoresizeMaxRows` | `boolean` | _(optional)_ For `multiline`, set how many rows of text can be shown at max. |
| `characterCounter` | `boolean` | _(optional)_ True to show a character counter. |
| `minLength` | `boolean` | _(optional)_ Validation for minimum length of the text (number of characters) |
Expand Down
23 changes: 23 additions & 0 deletions ...esign-system-portal/src/docs/uilib/extensions/forms/best-practices-on-forms.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
breadcrumb:
- text: Forms
href: /uilib/extensions/forms/
- text: Best Practices on Forms
href: /uilib/extensions/forms/best-practice-on-forms/
---

# Best Practices on Forms

- Ensure you have a `form` element. It will add support for additional keyboard and auto-complete features. Use the [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler/) that uses the [Form.Element](/uilib/extensions/forms/extended-features/Form/Element/) under the hood.
- Ensure your form HTML elements have a semantic and unique `name`. By using the `path` property (e.g. `path="/firstName"`), it will set an unique `name` attribute to the rendered HTML element.
- Ensure you have a submit button. Use the [Form.SubmitButton](/uilib/extensions/forms/extended-features/Form/SubmitButton/) for that.
- Ensure to let browser autofill personal data if applicable, based on HTML [autocomplete attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete). By using the `path` property with semantic names (e.g. `path="/firstName"`), browser will be able to provide a correct autofill integration.
- In some cases, it is appreciated to temporary store user entered input data. Use the `sessionStorageId` feature provided by [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler/) for that.

```jsx
<Form.Hander autoComplete={true}>
<Field.String path="/firstName" />
<Field.Email path="/email" />
<Form.SubmitButton>Submit</Form.SubmitButton>
</Form.Hander>
```
24 changes: 13 additions & 11 deletions ...stem-portal/src/docs/uilib/extensions/forms/data-value-readwrite-properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@

| Property | Type | Description |
| ---------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `className` | `string` | _(optional)_ Outer DOM element class name |
| `value` | {<code>{props.type}</code>} | _(optional)_ Source data value for the input |
| `layout` | `string` | _(optional)_ Layout for the label and input. Can be `horizontal` or `vertical` |
| `label` | `string` | _(optional)_ Field label to show above / before the input feature |
| `labelDescription` | `string` | _(optional)_ A more discreet text displayed beside the label (i.e for "(optional)") |
| `labelSecondary` | `string` | _(optional)_ Secondary information displayed at the end of the label line (i.e character counter) |
| `placeholder` | `string` | _(optional)_ Text showing in place of the value if no value is given |
| `path` | `string` | _(optional)_ JSON Pointer for where the data for this input is located in the source dataset (when using DataContext) |
| `info` | `Error` or `string` | _(optional)_ Info message shown below / after the input |
| `warning` | `Error` or `string` | _(optional)_ Warning message shown below / after the input |
| `error` | `Error` | _(optional)_ Error message shown below / after the input |
| `className` | `string` | _(optional)_ Outer DOM element class name. |
| `value` | {<code>{props.type}</code>} | _(optional)_ Source data value for the input. |
| `id` | `string` | _(optional)_ Outer DOM element id attribute. |
| `name` | `string` | _(optional)_ Outer DOM element name attribute. |
| `layout` | `string` | _(optional)_ Layout for the label and input. Can be `horizontal` or `vertical`. |
| `label` | `string` | _(optional)_ Field label to show above / before the input feature. |
| `labelDescription` | `string` | _(optional)_ A more discreet text displayed beside the label (i.e for "(optional)"). |
| `labelSecondary` | `string` | _(optional)_ Secondary information displayed at the end of the label line (i.e character counter). |
| `placeholder` | `string` | _(optional)_ Text showing in place of the value if no value is given. |
| `path` | `string` | _(optional)_ JSON Pointer for where the data for this input is located in the source dataset (when using Form.Handler or DataContext). The `path` will also be sett as the `name` attribute for the [string](/uilib/extensions/forms/base-fields/String/)-field. |
| `info` | `Error` or `string` | _(optional)_ Info message shown below / after the input. |
| `warning` | `Error` or `string` | _(optional)_ Warning message shown below / after the input. |
| `error` | `Error` | _(optional)_ Error message shown below / after the input. |
| `disabled` | `boolean` | _(optional)_ Set `true` to show the field but without the possibility of changing the value. |
| `emptyValue` | `any` | _(optional)_ The value to use (in `onChange` events etc) when emptying the field. Makes it possible for instance to provide `undefined` instead of an empty string when clearing the content of a text input. |
| `required` | `boolean` | _(optional)_ When set `true`, the input will give an error if the value cannot be empty. |
Expand Down
13 changes: 13 additions & 0 deletions ...-portal/src/docs/uilib/extensions/forms/extended-features/Form/Handler/info.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,16 @@ render(
</Form.Handler>,
)
```

## Autocomplete and autofill

You can set `autoComplete` on the `Form.Hander` – each [Field.String](/uilib/extensions/forms/base-fields/String/)-field will then get `autoComplete="on"`:

```tsx
<Form.Hander autoComplete={true}>
<Field.String path="/firstName" />
<Field.String path="/lastName" />
</Form.Hander>
```

The `path` property will be used to set the `name` attribute, which lets browser know which autocomplete value should be proposed to the user.
13 changes: 7 additions & 6 deletions ...l/src/docs/uilib/extensions/forms/extended-features/Form/Handler/properties.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@ showTabs: true

## Properties

| Property | Type | Description |
| ------------------------------------------------------------------------------------------------ | ------------ | --------------------------------------------------------------------- |
| `children` | `React.Node` | _(required)_ The content of the form. |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ spacing properties like `top` or `bottom` are supported. |
| [DataContext.Provider](/uilib/extensions/forms/create-component/DataContext/Provider/properties) | Various | _(optional)_ provider properties such as `data` and `onChange`. |
| [Form Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes) | Various | _(optional)_ all supported form element attributes. |
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------- |
| `children` | `React.Node` | _(required)_ The content of the form. |
| `autoComplete` | `boolean` | _(optional)_ Will set `autoComplete="on"` on all nested [Field.String](/uilib/extensions/forms/base-fields/String/)-fields. |
| [Space](/uilib/layout/space/properties) | Various | _(optional)_ spacing properties like `top` or `bottom` are supported. |
| [DataContext.Provider](/uilib/extensions/forms/create-component/DataContext/Provider/properties) | Various | _(optional)_ provider properties such as `data` and `onChange`. |
| [Form Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attributes) | Various | _(optional)_ all supported form element attributes. |
Loading

0 comments on commit 3245337

Please sign in to comment.