feat(tabs)!: add delete tabs

[savutsang]

DS-764

Changes

• Added a feature to allow to add and remove tabs.
• New modern design for the Tabs.
• Rework on the design tokens to reflect the new design.

Others

• Improved the test utility findByTestId/getByTestId to be able to target more precisely the wanted node (ex: mount() wrapper might create 2-3 nodes with the same data-testid).

BREAKING CHANGE:

• Removed "contained" prop. The new design don't allow this customization anymore.

[github-actions]

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

[LarryMatte]

Quelques commentaires ici et là.

Sinon quelques modifications que j'apporterais au comportement clavier:

• J'enlèverais la possibilité de focus (touche Tab du clavier) sur les "x" des tabs qui ne sont pas actives.
• Dans la story "normal" quand j'utilise la touche Tab du clavier, le focus passe du Tab au TabPanel et après il devrait tomber sur le bouton de sorting dans le tableau mais il ne s'y rend pas. Comme si la navigation avec la touche Tab skippait ce qui se trouve dans le TabPanel.

Prochain point est mon erreur... my bad
lorsqu'un utilisateur ajoute plusieurs Tabs, les Tabs s'enlignent les unes à la suites des autres et elles deviennent toutes compressées. Dans Figma, il y a 2 boutons placés au début et à la fin du Tablist lorsque les Tabs dépassent l'espace prévu par le Tablist.
Il faudrait ajouter la features dans la PR. Toutes mes excuses. Il y a un exemple similaire dans le Design system de Carbon

[maboilard]

Mes commentaires sont pas mal similares à ceux de Larry.

Il manquerait les boutons en cas d'overlflow (voir ici)

Aussi, le bouton ADD TABS semble pas mal différent du bouton tertiaire que l'on utilise habituellement. Serait-ce possible de réutiliser le bouton tertiaire afin que l'on ait l'effet hover, la forme ronde et tout les autres particularités que nos boutons ont?

C'est peut-être hors scope mais je vais faire le commentaire quand même. Dans le tablist, on a un padding-left de 32px mais celui-ci devrait être de 16px afin que le contenu de la section soit aligné avec le label du premier Tab. Voir sur l'exemple suivant le décalage:

Finalement, lorsqu'un Tab est sélectionné, il est toujours encerclé de son état focus. Est-ce que c'est vraiment nécessaire?

Je pense que ça fait pas mal le tour de mon côté

[savutsang]

Finalement, lorsqu'un Tab est sélectionné, il est toujours encerclé de son état focus. Est-ce que c'est vraiment nécessaire?

Fixed

[meriouma]

Petit review, je vais refaire une passe après les validations de Marc et/ou Larry.

[savutsang]

C'est peut-être hors scope mais je vais faire le commentaire quand même. Dans le tablist, on a un padding-left de 32px mais celui-ci devrait être de 16px afin que le contenu de la section soit aligné avec le label du premier Tab.

Fixed

[maboilard]

C'est comme si j'étais dans Figma! Excellent boulot Savut!! :)

[LarryMatte]

Quelques points:

1. Quand le focus est sur le bouton “delete” et qu’on supprime la Tab ou qu’on supprime la Tab active avec la souris, le focus disparait et il n’y a plus de Tab active laissant ainsi un vide sous les tabs (il n'y a pas de tabpanel d'affiché i.e., aucun contenu sous les tabs) ET il n’est plus possible de focus sur les Tabs qui sont inactive. Il faudrait que le focus bouge vers la Tab suivante, la rendant active au même moment.
2. Quand le focus est sur le bouton “delete” de la tab active, il faudrait pouvoir bouger à la prochaine Tab en utilisant la flèche du clavier (comme quand le focus est sur la tab elle même).
3. Le aria-label du bouton pour supprimer une Tab n’a pas le label de la tab dedans, il y a seulement dismissTab. Il faudrait que ce soit Dismiss [nom du tab] Tab. Donc dismiss first button tab.

[github-actions]

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

[savutsang]

• Quand le focus est sur le bouton “delete” et qu’on supprime la Tab ou qu’on supprime la Tab active avec la souris, le focus disparait et il n’y a plus de Tab active laissant ainsi un vide sous les tabs (il n'y a pas de tabpanel d'affiché i.e., aucun contenu sous les tabs) ET il n’est plus possible de focus sur les Tabs qui sont inactive. Il faudrait que le focus bouge vers la Tab suivante, la rendant active au même moment.

Fixed

• Quand le focus est sur le bouton “delete” de la tab active, il faudrait pouvoir bouger à la prochaine Tab en utilisant la flèche du clavier (comme quand le focus est sur la tab elle même).

Fixed

• Le aria-label du bouton pour supprimer une Tab n’a pas le label de la tab dedans, il y a seulement dismissTab. Il faudrait que ce soit Dismiss [nom du tab] Tab. Donc dismiss first button tab.

Fixed

[savutsang]

Tout a ete fixe, pret pour un autre autre review.

[LarryMatte]

• Il faudrait que le focus bouge vers la Tab suivante, la rendant active au même moment.

@savutsang
Il reste à ajouter l'état focus i.e., le contour qui est highlighted, sur le Tab active après la suppression d'une Tab.

[savutsang]

@savutsang Il reste à ajouter l'état focus i.e., le contour qui est highlighted, sur le Tab active après la suppression d'une Tab.

Fixed

[savutsang]

Tout a ete fixe, pret pour un autre autre autre review.

[LarryMatte]

LGTM
Good job!