feat(Slider): add new slider component #893
Conversation
|
Storybook for this build: https://ds.equisoft.io/pr-893/ |
|
Webapp for this build: https://ds.equisoft.io/pr-893/webapp/ |
| 'slider-rail-background-color': 'color-bg-empty', | ||
| 'slider-rail-disabled-background-color': 'color-bg-neutral-subtle', | ||
| 'slider-rail-mark-background-color': 'color-bg-neutral-bold', | ||
| 'slider-rail-mark-disabled-background-color': 'color-neutral-30', // color-background-indicator-disabled |
There was a problem hiding this comment.
Beaucoup d'alias sont creer ou renomme dans ce PR. A re-ajuster une fois qu'il est merge.
There was a problem hiding this comment.
-
Il manquerait le tooltip lorsque l'utilisateur interagit avec le composant en utilisant les touches (flèches) du clavier. Présentement le tooltip est seulement affiché lorsqu'un user utilise la souris. MUI semble avoir la feature.
-
Présentement, il n'y a pas de label associé à l'input et ça vient créer une failure au niveau de l'a11y. La valeur de l'attribut
fordulabelpointe vers l'iddu<span>qui englobe le slider au complet. Je ne sais pas à qu'elle point nous avons le contrôle là dessus, mais il faudrait qu'il soit associé à l'idde l'input type="range". Sinon, en regardant ce que MUI ont, ils semblent avoir unaria-labelsur les thumbs. Ça pourrait également venir fixer le problème.
Sinon un petit commentaire en lien avec une couleur.
|
|
||
| &::before { | ||
| background-color: ${({ theme }) => theme.component['slider-thumb-background-color']}; | ||
| border: 2px solid ${({ theme }) => theme.component['slider-thumb-border-color']}; |
There was a problem hiding this comment.
J'ai l'impression que la couleur n'est pas la bonne ici.
rgb(0, 58, 90) vs. rgba(0, 98, 150, 1) / #006296 dans figma
| font-size: 0.75rem; | ||
| padding: var(--spacing-half) var(--spacing-1x); | ||
| position: absolute; | ||
| top: 41px; |
There was a problem hiding this comment.
C'est pas lié à la PR nécessairement, mais je me demande, ce serait pas mieux si on avait tout en rem pour le zoom?
There was a problem hiding this comment.
J'ai zoomé la page au complet, changé la taille du texte, et ca ne semble pas changer grand chose.
Par contre, je suis un peu du même avis de changer le 41px pour 2.5rem.
There was a problem hiding this comment.
Quelques petits commentaires:
- Le font-size et le line-height du label et des numéros sont trop grands
- La couleur des numéros n'est pas la bonne. Le token devrait référer sur le alias token "color-content-subtle"
- La couleur de border du Slider-thumb n'est pas la même que sur les maquettes Figma
savutsang
changed the title
DS-281
Description