Docs(web, web-twig, web-react): Extend TextFields README.md about missing section inputWidth
#1269
Conversation
…issing section `inputWidth`
|
|
||
| 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: |
There was a problem hiding this comment.
Not applicable to React. Edit.
There was a problem hiding this comment.
In Twig and React, CSS custom properties are always hidden in the implementation, so this really shouldn't be here.
✅ Deploy Preview for spirit-design-system-storybook ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for spirit-design-system-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for spirit-design-system-validations canceled.
|
✅ Deploy Preview for spirit-design-system-demo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| <input | ||
| type="text" | ||
| size="4" | ||
| id="textFieldSizeEm" | ||
| id="textFieldWidthEm" |
There was a problem hiding this comment.
| id="textFieldWidthEm" | |
| id="textFieldWidthEm" | |
| size="4" |
| ```twig | ||
| <TextField | ||
| id="textFieldWidthCh" | ||
| inputProps="{{ { style: '--width: 10ch' } }}" |
There was a problem hiding this comment.
| inputProps="{{ { style: '--width: 10ch' } }}" | |
| inputProps="{{ { style: '--width: 10ch' } }}" | |
| inputWidth="10" |
There was a problem hiding this comment.
We have to set invalid value for inputWidth otherwise style via CSS property isn't applied. Not intuitive.
There was a problem hiding this comment.
I don't think we should support this approach, see my comment in the React README.
|
|
||
| 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). |
There was a problem hiding this comment.
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? :-)
There was a problem hiding this comment.
The reason is it must be hard-coded in the CSS. I agree it can be noted here.
|
👏 Thanks for this contribution and a big update of our docs. Otherwise, there are some changes I do not really understand. If you can provide more detail to me, it would be great :-) |
|
We've discussed with @adamkudrna and we suggest slightly change the API.
|
Resulting CSS could look like this: .TextField__input--customWidth {
box-sizing: content-box;
width: calc(var(--width, 3) * 1ch + var(--arrows-width, 0px));
} |
|
|
||
| ```jsx | ||
| <TextField | ||
| id="textFieldWidthCh" |
There was a problem hiding this comment.
IDs should be turned into kebab-case.
|
|
||
| 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: |
There was a problem hiding this comment.
In Twig and React, CSS custom properties are always hidden in the implementation, so this really shouldn't be here.
|
|
||
| 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). |
There was a problem hiding this comment.
The reason is it must be hard-coded in the CSS. I agree it can be noted here.
| ```twig | ||
| <TextField | ||
| id="textFieldWidthCh" | ||
| inputProps="{{ { style: '--width: 10ch' } }}" |
There was a problem hiding this comment.
I don't think we should support this approach, see my comment in the React README.
| 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). |
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
| <label for="textFieldSize" class="TextField__label">Input width wide 4 characters</label> | |
| <label for="textFieldSize" class="TextField__label">Input width of 4 characters</label> |
No description provided.