Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs(web, web-twig, web-react): Extend TextFields README.md about missing section inputWidth #1269

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Docs(web, web-twig, web-react): Extend TextFields README.md about missing section inputWidth #1269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 48 additions & 1 deletion packages/web-react/src/components/TextField/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IDs should be turned into kebab-case.

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).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please be more specific? I do not understand why only these values are supported. In the case of day, month, and year it is applicable but in all other cases, it could be any number. So the modification of the default value makes no sense to me. Could you, please, provide some source to enlighte me? :-)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The reason is it must be hard-coded in the CSS. I agree it can be noted here.


### `--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:
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not applicable to React. Edit.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In Twig and React, CSS custom properties are always hidden in the implementation, so this really shouldn't be here.


```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 |
Expand All @@ -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 |
Expand Down
48 changes: 47 additions & 1 deletion packages/web-twig/src/Resources/components/TextField/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' } }}"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
inputProps="{{ { style: '--width: 10ch' } }}"
inputProps="{{ { style: '--width: 10ch' } }}"
inputWidth="10"

Copy link
Contributor Author

@dlouhak dlouhak Feb 12, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have to set invalid value for inputWidth otherwise style via CSS property isn't applied. Not intuitive.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we should support this approach, see my comment in the React README.

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 |
Expand All @@ -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 |
Expand Down
22 changes: 14 additions & 8 deletions packages/web/src/scss/components/TextField/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As in React, we should explain why these values.


```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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<label for="textFieldSize" class="TextField__label">Input width wide 4 characters</label>
<label for="textFieldSize" class="TextField__label">Input width of 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"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
id="textFieldWidthEm"
id="textFieldWidthEm"
size="4"

class="TextField__input"
name="sizeEm"
name="textFieldWidthEm"
placeholder="Placeholder"
style="--width: 4em;"
/>
Expand Down
Loading