feat(Slider): add new slider component #893

savutsang · 2024-06-03T18:43:17Z

DS-281

Description

We use MUI/base as the base of the Slider.
The input(s) are not part of the component.
We had to use "::before" to create the thumb because of the hover affect (bigger size), if we resized or scale the element directly, it would also impact the Tooltip.
It use a custom Tooltip in CSS because when we used our Tooltip component it was lagging, and not efficient.

github-actions · 2024-06-03T18:47:40Z

Storybook for this build: https://ds.equisoft.io/pr-893/

github-actions · 2024-06-03T18:48:55Z

Webapp for this build: https://ds.equisoft.io/pr-893/webapp/

packages/react/src/themes/tokens/component/slider-tokens.ts

LarryMatte

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 for du label pointe vers l'id du <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'id de l'input type="range". Sinon, en regardant ce que MUI ont, ils semblent avoir un aria-label sur les thumbs. Ça pourrait également venir fixer le problème.

Sinon un petit commentaire en lien avec une couleur.

packages/react/src/components/slider/slider.tsx

meriouma

Cool POC avec mui. LGTM pour le code. Je laisse Larry et Marc regarder le reste.

packages/react/src/components/slider/slider.tsx

maboilard

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

…-elements into dev/DS-281

savutsang · 2024-07-18T11:50:30Z

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.

Done

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 for du label pointe vers l'id du <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'id de l'input type="range". Sinon, en regardant ce que MUI ont, ils semblent avoir un aria-label sur les thumbs. Ça pourrait également venir fixer le problème.

Done, le input a maintenant le meme id que le label for.

savutsang · 2024-07-18T11:54:11Z

Le font-size et le line-height du label et des numéros sont trop grands

Fixed

La couleur des numéros n'est pas la bonne. Le token devrait référer sur le alias token "color-content-subtle"

Done, j'ai ajoute un nouveau component token pour ca slider-rail-label-text-color

La couleur de border du Slider-thumb n'est pas la même que sur les maquettes Figma

Done

maboilard

LGTM!

LarryMatte

Dans la variant Range, les deux input ont le même id, il faudrait qu'il soit différent.

savutsang · 2024-07-18T15:27:32Z

Dans la variant Range, les deux input ont le même id, il faudrait qu'il soit différent.

Ah bien vu. Mais ca serait quoi la resolution pour l'accessibilite dans ce cas? Je pourrais pt utiliser aria-label comme cette exemple pour ce cas ci, sauf qu'il faudrait que le user nous passe les 2 labels.

LarryMatte · 2024-07-18T15:45:17Z

Dans la variant Range, les deux input ont le même id, il faudrait qu'il soit différent.

Ah bien vu. Mais ca serait quoi la resolution pour l'accessibilite dans ce cas? Si je fais comme cette exemple, je pourrais utiliser aria-label dans ce cas, mais faudrait le user me passe les 2 different labels https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/examples/slider-multithumb/

Tu pourrais p-e avoir un aria-label sur chacun des inputs, utiliser le label associé au composant et lui ajouter le mot "range".

<label>Patate</label>
...
<input aria-label="Patate range" />
<input aria-label="Patate range" />

C'est ce que semble faire MUI

Si nous voulons y aller avec un truc similaire à ce que tu as partagé. Nous pourrions ajouter un min et max au aria-label et ensuite ajouter le label.

<label>Patate</label>
...
<input aria-label="Minimum Patate" />
<input aria-label="Maximum Patate" />

Mais je crois que c'est p-e trop spécifique et p-e que dans certain cas, ça ne fonctionnerait p-e pas aussi bien tout dépendant du label associé.

packages/react/src/components/slider/slider.tsx

meriouma · 2024-08-15T16:11:29Z

packages/react/src/themes/tokens/alias-tokens.ts

    | 'color-background-indicator-selected'
    | 'color-background-indicator-active'
    | 'color-border-brand'
+    | 'color-border-brand-bold'


J'ai l'impression que ça va être à ajuster dans dans theme-directory? @hebernardEquisoft @pylafleur

Mmhhhm tant que c'est pas un renaming de tokens, tout devrait être beau!

Faudra pas l'ajouter aux themes pour pas que ce soit weird? Quoiqu'en même temps, elle sert juste pour le slider en ce moment.

Je pense c'est un renaming pour vous. J'explique ce qui se passe ici.

Le global-header utilisait avant 'color-border-brand', en regardant ca avec MA pourquoi le slider n'avait pas la bonne couleur malgre le bon token Figma, on s'est rendu compte que ce token n'avait pas bonne couleur.

On a renomme 'color-border-brand' a 'color-border-brand-bold' (utilise par global-header seulement)
On a ajoute le nouveau 'color-border-brand' avec la bonne couleur (utilise par Slider seulement)

packages/react/src/themes/tokens/component/slider-tokens.ts

…-elements into dev/DS-281

packages/react/src/components/slider/slider.tsx

meriouma · 2024-09-28T18:58:55Z

packages/react/src/components/slider/slider.tsx

+    background-color: ${({ theme }) => theme.component['tooltip-popper-container-default-background-color']};
+    border: 1px solid ${({ theme }) => theme.component['tooltip-popper-container-border-color']};


Ça existe pas, mais je pense que c'est un exemple d'endroits où on devrait utiliser des alias tokens plutôt. On devrait jamais référencer des component tokens en dehors du component qui les "déclare" je crois.

Je comprend le point mais c'est plutot une replique du component Tooltip. Idealement on utiliserait directement le component Tooltip ici si on n'avait pas de probleme visuel durant le dragging.

Hmm, je comprends pourquoi tu l'as fait. Mais j'ai peur que ça ouvre la porte à des mauvaises pratiques. On pourra en rediscuter, il y a une réflexion à avoir aussi sur ce qu'on expose par rapport aux component tokens.

On pourrait pt creer une version CSS du Tooltip dans le folder Tooltip a place, comme ca on pourrait le reutiliser ailleur si on rencontre le meme besoin. Le truc qui me gosse avec ca c'est que le component Tooltip ne s'en sert pas.

meriouma · 2024-09-28T19:00:10Z

packages/react/src/components/slider/slider.tsx

+    padding: 0 12px;
+`;
+
+const StyledSlider = styled(BaseSlider)`


Est-ce que certaines des dimensions devraient être exprimées en rem ou en variable css plutôt?

Ca sera fixe dans un autre billet.

savutsang · 2024-10-24T17:14:06Z

Ready for review

meriouma

Dernier petit détail, sinon LGTM.

packages/react/src/components/slider/slider.tsx

meriouma · 2024-10-28T16:39:36Z

packages/react/src/components/slider/slider.tsx

+    background-color: ${({ theme }) => theme.component['tooltip-popper-container-default-background-color']};
+    border: 1px solid ${({ theme }) => theme.component['tooltip-popper-container-border-color']};


Hmm, je comprends pourquoi tu l'as fait. Mais j'ai peur que ça ouvre la porte à des mauvaises pratiques. On pourra en rediscuter, il y a une réflexion à avoir aussi sur ce qu'on expose par rapport aux component tokens.

* feat(slider): add new slider component * fix: undo changing alias-tokens * fix: update tokens * fix: comments * fix: comments * fix: extract code * fix: aria-label * fix: lock and snapshot

feat(slider): add new slider component

f8673e5

savutsang requested a review from a team as a code owner June 3, 2024 18:43

savutsang temporarily deployed to github-pages June 3, 2024 18:47 — with GitHub Actions Inactive

fix: undo changing alias-tokens

32b575a

savutsang commented Jun 4, 2024

View reviewed changes

packages/react/src/themes/tokens/component/slider-tokens.ts Outdated Show resolved Hide resolved

savutsang temporarily deployed to github-pages June 4, 2024 13:01 — with GitHub Actions Inactive

LarryMatte requested changes Jun 5, 2024

View reviewed changes

packages/react/src/components/slider/slider.tsx Outdated Show resolved Hide resolved

meriouma reviewed Jun 7, 2024

View reviewed changes

packages/react/src/components/slider/slider.tsx Outdated Show resolved Hide resolved

maboilard requested changes Jun 20, 2024

View reviewed changes

savutsang changed the title ~~feat(slider): add new slider component~~ feat(Slider): add new slider component Jun 20, 2024

savutsang added 2 commits July 4, 2024 11:45

Merge branch 'master' of https://github.com/kronostechnologies/design…

bba9db0

…-elements into dev/DS-281

fix: update tokens

4f949e9

savutsang force-pushed the dev/DS-281 branch from 6816bf5 to 901b78a Compare July 18, 2024 11:13

savutsang added 2 commits July 18, 2024 07:14

fix: comments

901b78a

Merge branch 'master' of https://github.com/kronostechnologies/design…

afa9276

…-elements into dev/DS-281

savutsang temporarily deployed to github-pages July 18, 2024 11:50 — with GitHub Actions Inactive

maboilard previously approved these changes Jul 18, 2024

View reviewed changes

LarryMatte requested changes Jul 18, 2024

View reviewed changes

meriouma reviewed Aug 15, 2024

View reviewed changes

Merge branch 'master' of https://github.com/kronostechnologies/design…

80899d0

…-elements into dev/DS-281

savutsang dismissed maboilard’s stale review via 2b6c826 August 22, 2024 19:28

WilliamsTardif previously approved these changes Sep 20, 2024

View reviewed changes

packages/react/src/components/slider/slider.tsx Outdated Show resolved Hide resolved

meriouma previously approved these changes Sep 28, 2024

View reviewed changes

savutsang dismissed stale reviews from meriouma, WilliamsTardif, maboilard, and LarryMatte via 91414c0 October 21, 2024 20:04

savutsang enabled auto-merge (squash) October 21, 2024 20:06

Merge remote-tracking branch 'origin' into dev/DS-281

91414c0

savutsang temporarily deployed to github-pages October 21, 2024 20:08 — with GitHub Actions Inactive

savutsang disabled auto-merge October 21, 2024 20:36

savutsang added 2 commits October 24, 2024 12:53

fix: extract code

ccf624b

Merge remote-tracking branch 'origin' into dev/DS-281

67cbc0c

savutsang temporarily deployed to github-pages October 24, 2024 16:56 — with GitHub Actions Inactive

savutsang temporarily deployed to github-pages October 24, 2024 16:57 — with GitHub Actions Inactive

meriouma reviewed Oct 28, 2024

View reviewed changes

savutsang added 2 commits October 29, 2024 15:22

fix: aria-label

f358fd9

Merge remote-tracking branch 'origin' into dev/DS-281

cf8ec12

meriouma previously approved these changes Oct 29, 2024

View reviewed changes

savutsang dismissed meriouma’s stale review via b66d3d4 October 29, 2024 20:05

savutsang force-pushed the dev/DS-281 branch from b2dc8ad to b66d3d4 Compare October 29, 2024 20:05

fix: lock and snapshot

b66d3d4

savutsang temporarily deployed to github-pages October 29, 2024 20:09 — with GitHub Actions Inactive

savutsang enabled auto-merge (squash) October 29, 2024 20:16

meriouma approved these changes Oct 29, 2024

View reviewed changes

savutsang merged commit 4d8cdab into master Oct 29, 2024
22 checks passed

savutsang deleted the dev/DS-281 branch October 29, 2024 20:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Slider): add new slider component #893

feat(Slider): add new slider component #893

savutsang commented Jun 3, 2024 •

edited

Loading

github-actions bot commented Jun 3, 2024

github-actions bot commented Jun 3, 2024

LarryMatte left a comment

meriouma left a comment

maboilard left a comment

savutsang commented Jul 18, 2024

savutsang commented Jul 18, 2024 •

edited

Loading

maboilard left a comment

LarryMatte left a comment

savutsang commented Jul 18, 2024 •

edited

Loading

LarryMatte commented Jul 18, 2024 •

edited

Loading

meriouma Aug 15, 2024

hebernardEquisoft Aug 16, 2024

meriouma Aug 16, 2024

savutsang Aug 21, 2024 •

edited

Loading

meriouma Sep 28, 2024 •

edited

Loading

savutsang Oct 24, 2024 •

edited

Loading

meriouma Oct 28, 2024

savutsang Oct 29, 2024 •

edited

Loading

meriouma Sep 28, 2024

savutsang Oct 24, 2024

savutsang commented Oct 24, 2024

meriouma left a comment

meriouma Oct 28, 2024

		background-color: ${({ theme }) => theme.component['tooltip-popper-container-default-background-color']};
		border: 1px solid ${({ theme }) => theme.component['tooltip-popper-container-border-color']};

feat(Slider): add new slider component #893

feat(Slider): add new slider component #893

Conversation

savutsang commented Jun 3, 2024 • edited Loading

github-actions bot commented Jun 3, 2024

github-actions bot commented Jun 3, 2024

LarryMatte left a comment

Choose a reason for hiding this comment

meriouma left a comment

Choose a reason for hiding this comment

maboilard left a comment

Choose a reason for hiding this comment

savutsang commented Jul 18, 2024

savutsang commented Jul 18, 2024 • edited Loading

maboilard left a comment

Choose a reason for hiding this comment

LarryMatte left a comment

Choose a reason for hiding this comment

savutsang commented Jul 18, 2024 • edited Loading

LarryMatte commented Jul 18, 2024 • edited Loading

meriouma Aug 15, 2024

Choose a reason for hiding this comment

hebernardEquisoft Aug 16, 2024

Choose a reason for hiding this comment

meriouma Aug 16, 2024

Choose a reason for hiding this comment

savutsang Aug 21, 2024 • edited Loading

Choose a reason for hiding this comment

meriouma Sep 28, 2024 • edited Loading

Choose a reason for hiding this comment

savutsang Oct 24, 2024 • edited Loading

Choose a reason for hiding this comment

meriouma Oct 28, 2024

Choose a reason for hiding this comment

savutsang Oct 29, 2024 • edited Loading

Choose a reason for hiding this comment

meriouma Sep 28, 2024

Choose a reason for hiding this comment

savutsang Oct 24, 2024

Choose a reason for hiding this comment

savutsang commented Oct 24, 2024

meriouma left a comment

Choose a reason for hiding this comment

meriouma Oct 28, 2024

Choose a reason for hiding this comment

savutsang commented Jun 3, 2024 •

edited

Loading

savutsang commented Jul 18, 2024 •

edited

Loading

savutsang commented Jul 18, 2024 •

edited

Loading

LarryMatte commented Jul 18, 2024 •

edited

Loading

savutsang Aug 21, 2024 •

edited

Loading

meriouma Sep 28, 2024 •

edited

Loading

savutsang Oct 24, 2024 •

edited

Loading

savutsang Oct 29, 2024 •

edited

Loading