From d788ea20b4d27adeb5f8f5470a1ff5ea306b3fe2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kater=CC=8Cina=20Dlouha=CC=81?= Date: Wed, 7 Feb 2024 16:18:16 +0100 Subject: [PATCH] Docs(web, web-twig, web-react): Extend `TextField`s README.md about missing section `inputWidth` --- .../src/components/TextField/README.md | 49 ++++++++++++++++++- .../Resources/components/TextField/README.md | 48 +++++++++++++++++- .../src/scss/components/TextField/README.md | 22 ++++++--- 3 files changed, 109 insertions(+), 10 deletions(-) diff --git a/packages/web-react/src/components/TextField/README.md b/packages/web-react/src/components/TextField/README.md index 661a0a17c2..cf616332f7 100644 --- a/packages/web-react/src/components/TextField/README.md +++ b/packages/web-react/src/components/TextField/README.md @@ -42,6 +42,52 @@ TextField with password toggle (button to reveal the password): /> ``` +## Input Width + +There are several ways to adjust the input width: + +### `inputWidth` Attribute + +The `inputWidth` attribute is supported on inputs of the following types: `email`, +`password`, `tel`, `text`, `url`. + +```jsx + +``` + +This option is generally recommended for inputs with a limited value length +(e.g. numeric representation of day, month, year). Supported values are `2`, `3` +and `4` (characters). + +### `--width` CSS Custom Property + +If you need any other value or prefer using `em` unit +instead of default `ch`, define a `--width` CSS custom property on the `` +element via `inputProps` attribute: + +```jsx + +``` + +### Grid + +For other use cases (wider input or input with unknown value length), we +recommend placing them inside the Grid component and set `isFluid` to `true` to fill the available space. + ## API | Name | Type | Default | Required | Description | @@ -50,8 +96,9 @@ TextField with password toggle (button to reveal the password): | `hasPasswordToggle` | `bool` | — | ✔ | If true, the `type` is set to `password` and a password toggle is shown | | `helperText` | `string` | — | ✕ | Custom helper text | | `id` | `string` | — | ✕ | Input and label identification | -| `inputWidth` | `number` | — | ✕ | Input width | +| `inputWidth` | `[2, 3, 4]` | — | ✕ | Input width in the characters | | `isDisabled` | `bool` | — | ✕ | Whether is field disabled | +| `isFluid` | `bool` | — | ✕ | If true, the element spans to the full width of its parent | | `isLabelHidden` | `bool` | — | ✕ | Whether is label hidden | | `isRequired` | `bool` | — | ✕ | Whether is field required | | `label` | `string` | — | ✕ | Label text | diff --git a/packages/web-twig/src/Resources/components/TextField/README.md b/packages/web-twig/src/Resources/components/TextField/README.md index fb19dee129..53f0df12e7 100644 --- a/packages/web-twig/src/Resources/components/TextField/README.md +++ b/packages/web-twig/src/Resources/components/TextField/README.md @@ -56,6 +56,52 @@ Without lexer: }} %} ``` +## Input Width + +There are several ways to adjust the input width: + +### `inputWidth` Attribute + +The `inputWidth` attribute is supported on inputs of the following types: `email`, +`password`, `tel`, `text`, `url`. + +```twig + +``` + +This option is generally recommended for inputs with a limited value length +(e.g. numeric representation of day, month, year). Supported values are `2`, `3` +and `4` (characters). + +### `--width` CSS Custom Property + +If you need any other value or prefer using `em` unit +instead of default `ch`, define a `--width` CSS custom property on the `` +element via `inputProps` attribute: + +```twig + +``` + +### Grid + +For other use cases (wider input or input with unknown value length), we +recommend placing them inside the Grid component and set `isFluid` to `true` to fill the available space. + ## API | Name | Type | Default | Required | Description | @@ -65,7 +111,7 @@ Without lexer: | `helperText` | `string` | `null` | ✕ | Custom helper text | | `id` | `string` | — | ✔ | Input and label identification | | `inputProps` | `string[]` | `[]` | ✕ | Pass additional attributes to the input element | -| `inputWidth` | `number` | `null` | ✕ | Input width | +| `inputWidth` | `[2, 3, 4]` | `null` | ✕ | Input width in the characters | | `isDisabled` | `bool` | `false` | ✕ | If true, input is disabled | | `isFluid` | `bool` | `false` | ✕ | If true, the element spans to the full width of its parent | | `isLabelHidden` | `bool` | `false` | ✕ | If true, label is hidden | diff --git a/packages/web/src/scss/components/TextField/README.md b/packages/web/src/scss/components/TextField/README.md index 80d528a402..7409fced98 100644 --- a/packages/web/src/scss/components/TextField/README.md +++ b/packages/web/src/scss/components/TextField/README.md @@ -86,23 +86,29 @@ The `size` attribute is supported on inputs of the following types: `email`, This option is generally recommended for inputs with a limited value length (e.g. numeric representation of day, month, year). Supported values are `2`, `3` -and `4` (characters). If you need any other value or prefer using `em` unit -instead of default `ch`, define a `--width` CSS custom property on the `` -element: +and `4` (characters). ```html
- +
+``` + +### `--width` CSS Custom Property + +If you need any other value or prefer using `em` unit +instead of default `ch`, define a `--width` CSS custom property on the `` +element: + +```html
- +