Orange-OpenSource
[OUDS] Component Creation - Input Text
As a user of the Ouds library I want to be able to use the component So that I can
- access to the documentation on how to use the component
- see the available options and observe the changes on the component itself
- understand how to set it up based on the designer's customization
- see the code associated to the component customization
- copy and paste the code based on the selected customization
- and add this component in my own projects
Context
The component is described in the Design tools and allows to describe the various states and variants necessary to build this component. The component should be working correctly in the Light and Dark mode. The component should be working fine in the various themes proposed by the library.
Variants
TBD
Change log
Take into account the latest version updates (current is at least 1.3.0)
- The name of the “Style” variant has been replaced to “Outlined” with true/false variant
- design token updates to 1.5.0
Hello @nilloq @vprothais Voici la review design Figma : https://www.figma.com/design/yKtkEY1DOl7YDvmt7jq0QF/-OUDS-Core-Lib--Review?node-id=69780-13361&t=D1RwOUG9XZmoihAb-1
J'ai quelques décalages sur des textes en fonction de la situation. Je les ai commenté sur la review.
hello,
Just one thing to correct:
The error messages are inside div, it's better to put them inside a semantic tag, such as p
That's all, folks!
hello, Just one thing to correct: The error messages are inside
div, it's better to put them inside a semantic tag, such aspThat's all, folks!
Taken into account, could you check and put "Ok accessiblity" if it's ok for you @Aniort
Hello @nilloq @vprothais Voici la review design Figma : https://www.figma.com/design/yKtkEY1DOl7YDvmt7jq0QF/-OUDS-Core-Lib--Review?node-id=69780-13361&t=D1RwOUG9XZmoihAb-1
J'ai quelques décalages sur des textes en fonction de la situation. Je les ai commenté sur la review.
Fixed in last release, see my comments on Figma @jerome-regnier
@nilloq , suite à tes corrections, j'ai refais une passe sur le composant et j'ai laissé de nouveaux commentaires. L'url est la même pour Figma.
Test on https://ouds-main--boosted.netlify.app/orange/docs/0.5/forms/text-input/
@nilloq I found the following issues:
- in safari mac, the initial Label when there is no text filled in is not positionned in the center of the field but on the top in the same way as when you start typing your text (this is not the case for the other mac browsers Chrome, Firefox and edge)
- In read only mode I am able to click on the field and if there is a label with no content I get the label to move up witch gives the impression I can edit. In this case the field should not be selectable
Good catch @B3nz01d , we saw that Safari can handle placeholder-shown but seems to works badly with empty strings.
For you second point, a read only text input should be focusable, as it is natively. When we did review between us I also said that something was odd with the label. We could think in this case that the label is the content. So I proposed to keep the label "up" in this case, so we clearly see that the field is empty, and we can't interprete the label as the value. @nilloq did you exchange with Maxime on this point ?
