Docs(web, web-twig, web-react): Extend TextFields README.md about m…

…issing section `inputWidth`
lmc-eu · Feb 7, 2024 · d788ea2 · d788ea2
1 parent 2054a79
commit d788ea2
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 10 deletions.
diff --git 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
+<TextField
+  id="textFieldWidthCh"
+  inputWidth={4}
+  label="Input width wide 4 characters"
+  name="textFieldWidthCh"
+  placeholder="Placeholder"
+  type="text"
+/>
+```
+
+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 `<input>`
+element via `inputProps` attribute:
+
+```jsx
+<TextField
+  id="textFieldWidthCh"
+  inputProps="{{ { style: '--width: 10ch' } }}"
+  label="Input width wide 10 characters"
+  name="textFieldWidthCh"
+  placeholder="Placeholder"
+  type="text"
+/>
+```
+
+### 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
@@ -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
+<TextField
+  id="textFieldWidthCh"
+  inputWidth="4"
+  label="Input width wide 4 characters"
+  name="textFieldWidthCh"
+  placeholder="Placeholder"
+  type="text"
+/>
+```
+
+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 `<input>`
+element via `inputProps` attribute:
+
+```twig
+<TextField
+  id="textFieldWidthCh"
+  inputProps="{{ { style: '--width: 10ch' } }}"
+  label="Input width wide 10 characters"
+  name="textFieldWidthCh"
+  placeholder="Placeholder"
+  type="text"
+/>
+```
+
+### 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
@@ -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 `<input>`
-element:
+and `4` (characters).
 
 ```html
 <div class="TextField">
-  <label for="textFieldSize" class="TextField__label">4000 (in Roman numerals)</label>
+  <label for="textFieldSize" class="TextField__label">Input width wide 4 characters</label>
   <input type="text" size="4" id="textFieldSize" class="TextField__input" name="size" placeholder="Placeholder" />
 </div>
+```
+
+### `--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 `<input>`
+element:
+
+```html
 <div class="TextField">
-  <label for="textFieldSizeEm" class="TextField__label">4000 (in Roman numerals)</label>
+  <label for="textFieldWidthEm" class="TextField__label">Input width wide 4em</label>
   <input
     type="text"
-    size="4"
-    id="textFieldSizeEm"
+    id="textFieldWidthEm"
     class="TextField__input"
-    name="sizeEm"
+    name="textFieldWidthEm"
     placeholder="Placeholder"
     style="--width: 4em;"
   />