(PC-33528)[PRO] feat : add new Multiselect component #15628

ahello-pass · 2024-12-20T17:00:58Z

But de la pull request

Ticket Jira (ou description si BSR) : https://passculture.atlassian.net/browse/PC-33528

Vérifications

J'ai écrit les tests nécessaires
J'ai mis à jour le fichier des plans de tests du portail pro si nécessaire
J'ai mis à jour la liste des routes et des titres de pages du portail pro si j'en ai rajouté/modifié ou supprimé une.
J'ai relu attentivement les migrations, en particulier pour éviter les locks, et je préviens les équipes Shérif et Data
J'ai ajouté des screenshots pour d'éventuels changements graphiques
J'ai fait la revue fonctionnelle de mon ticket

gmeigniez-pass

Ca rend super bien 🎉
J'ai quelques petits retours d'utilisation et d'a11y, mais l'affichage visuel / fonctionnement souris m'ont l'air nickel :

Quand on est focus sur le bouton, je m'attends à ce que le panneau s'ouvre automatiquement quand je presse "Enter" ou "Space"
Il faut que le panneau se ferme quand le focus sort du panneau (sinon il risque de cacher du contenu inutilement)
Quand on est focus sur l'input de la checkbox c'est la touche "Space" qui doit toggle la sélection et pas la touche "Enter" (la doc du pattern est ici), ça fonctionne bien pour le "Tout sélectionner", mais pas pour les checkbox individuelles
Il faudrait un attribut aria-controls sur le bouton d'ouverture avec pour valeur l'id de la div du panneau (idéalement il faudrait que l'attribut controls apparaisse quand la div du paneau apparait pour ne pas avoir une référence à un id inexistant)
Au moment de faire une recherche dans l'input de recherche, il faudrait un moyen d'annoncer (et d'afficher p-être ?) le nombre de résultats (souvent via un role="status" sur un texte genre "n résultats")

Ce serait cool d'avoir l'avis de Julie au global sur le composant (en particulier au lecteur d'écran)!

pro/src/ui-kit/MultiSelect/MultiSelect.module.scss

pro/src/ui-kit/MultiSelect/MultiSelectTrigger.tsx

pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx

github-actions · 2025-01-13T10:35:09Z

Visit the preview URL for this PR (updated for commit 93851a0):

https://pc-pro-testing--pr15628-pc-33528-new-multi-s-bb1lh006.web.app

_{(expires Wed, 22 Jan 2025 10:18:56 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 032d233ee67e1c50d6af12e29c936c7076770eb1}

asaez-pass

Je pousse ces commentaires dans un premier temps pour résolution éventuelle, et je fais un tour en test user réel pour l'a11y en attendant.

pro/src/ui-kit/MultiSelect/MultiSelect.tsx

asaez-pass · 2025-01-15T10:22:55Z

pro/src/ui-kit/MultiSelect/MultiSelect.tsx

+  hasSelectAllOptions?: boolean
+  disabled?: boolean
+} & ( // If `hasSearch` is `true`, `searchExample` and `searchLabel` are required. // This part applies the condition
+  | { hasSearch: true; searchExample: string; searchLabel: string }


Si MultiSelect est construit à partir de MultiSelectPanel, peut-être définir un typage MultiSelectProps qui est une extension de MultiSelectPanelProps.

Hmm pour la doc sur le composant MultiSelect je préfère rester explicite sur le typage de ses props

pro/src/ui-kit/MultiSelect/__specs__/MultiSelectPanel.spec.tsx

pro/src/ui-kit/MultiSelect/__specs__/MultiSelect.spec.tsx

pro/src/ui-kit/MultiSelect/__specs__/MultiSelectTrigger.spec.tsx

pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx

pro/src/ui-kit/MultiSelect/MultiSelect.tsx

gmeigniez-pass · 2025-01-15T10:42:12Z

pro/src/ui-kit/MultiSelect/MultiSelect.tsx

+  label: string
+}
+
+type MultiSelectProps = {


Aussi en testant dans le formulaire, je vois qu'il y a pas d'état en erreur. Je sais pas si ça a été designé par Agathe, mais dans l'exemple de l'implémentation des formats, le champ est obligatoire donc si on valide sans en avoir sélectionné il faudrait qu'il ait une bordure rouge je suppose (le message d'erreur serait géré par un FieldLayout) ? 🤔

Aussi dans l'exemple, si le Format est le premier champ en erreur au moment de la validation du formulaire, il doit être re-focus. C'est fait par le composant ScrollToFirstErrorAfterSubmit qui se base sur le premier attribut aria-invalid de la page. Dans notre cas, c'est un bouton qu'on doit refocus, et je pense que ça a pas de sens de lui mettre un attribut aria-invalid donc je sais pas trop ce qui est le mieux (ne pas se baser sur aria-invalid mais sur un data-attribute maison ?)

J'ai ajouté un data-error sur le bouton et mis à jour ScrollToFirstErrorAfterSubmit pour le prendre en compte, à priori le scroll et le focus fonctionnent comme souhaité. Est-ce que j'ajoute un commentaire pour expliquer pourquoi on a besoin de ça dans la fonction ?

…th FieldLayout component

mleroy-pass · 2025-01-21T16:26:37Z

pro/src/ui-kit/SelectedValuesTags/SelectedValuesTags.tsx

@@ -36,6 +36,10 @@ export const SelectedValuesTags = ({
  const visibleTags = selectedOptions.slice(0, 5)
  const extraTagsCount = selectedOptions.length - visibleTags.length

+  if (selectedOptions.length === 0) {
+    return <></>


Tu ne peux pas retourner

return null

ahello-pass temporarily deployed to pullrequest December 20, 2024 17:12 — with GitHub Actions Inactive

ahello-pass force-pushed the pc-33528-new-multi-selector-component branch from e4f34d2 to a6935c0 Compare December 20, 2024 17:53

mleroy-pass temporarily deployed to pullrequest December 31, 2024 09:50 — with GitHub Actions Inactive

mleroy-pass had a problem deploying to pullrequest December 31, 2024 13:56 — with GitHub Actions Failure

mleroy-pass force-pushed the pc-33528-new-multi-selector-component branch 3 times, most recently from 96161cf to d83f8ac Compare January 8, 2025 10:09

mleroy-pass had a problem deploying to pullrequest January 8, 2025 11:04 — with GitHub Actions Failure

mleroy-pass force-pushed the pc-33528-new-multi-selector-component branch 4 times, most recently from a38d613 to 51e3823 Compare January 10, 2025 13:24

mleroy-pass marked this pull request as ready for review January 10, 2025 13:27

mleroy-pass force-pushed the pc-33528-new-multi-selector-component branch 3 times, most recently from bf5e2e9 to 4c43813 Compare January 10, 2025 16:44

gmeigniez-pass reviewed Jan 13, 2025

View reviewed changes

pro/src/ui-kit/MultiSelect/MultiSelectPanel.tsx Outdated Show resolved Hide resolved

mleroy-pass force-pushed the pc-33528-new-multi-selector-component branch from 4c43813 to e84a161 Compare January 13, 2025 10:24

mleroy-pass force-pushed the pc-33528-new-multi-selector-component branch 9 times, most recently from e1b3605 to c412b65 Compare January 13, 2025 18:11

mleroy-pass force-pushed the pc-33528-new-multi-selector-component branch 2 times, most recently from c80fc3d to e998578 Compare January 14, 2025 10:25

asaez-pass reviewed Jan 15, 2025

View reviewed changes

gmeigniez-pass reviewed Jan 15, 2025

View reviewed changes

mleroy-pass force-pushed the pc-33528-new-multi-selector-component branch from f664abc to 6a39e36 Compare January 15, 2025 16:18

ahello-pass and others added 4 commits January 21, 2025 15:56

(PC-33528)[PRO] feat: init multiselect

cab2bd1

(PC-33528)[PRO] feat: add test to the new component

1652a28

(PC-33528)[PRO] feat: apply pr review

1b43cc6

(PC-33528)[PRO] feat: fix design after review

cd55cb9

ahello-pass force-pushed the pc-33528-new-multi-selector-component branch from 93851a0 to 607b48b Compare January 21, 2025 14:56

ahello-pass added 2 commits January 21, 2025 16:13

(PC-33528)[PRO] feat: handle error message & design in Multiselect wi…

c7285b2

…th FieldLayout component

(PC-33528)[PRO] feat: add jsdoc for multiselect component

cb66ec8

ahello-pass force-pushed the pc-33528-new-multi-selector-component branch from 607b48b to cdd28d6 Compare January 21, 2025 15:13

--wip-- COMMIT A SUPPRIMER AVANT LE MERGE

ebec9fe

ahello-pass force-pushed the pc-33528-new-multi-selector-component branch from cdd28d6 to fac3c07 Compare January 21, 2025 16:17

(PC-33528)[PRO] feat: handle scroll and focus when multiselect has error

af365e6

ahello-pass force-pushed the pc-33528-new-multi-selector-component branch from fac3c07 to af365e6 Compare January 21, 2025 16:30

mleroy-pass reviewed Jan 21, 2025

View reviewed changes

mleroy-pass approved these changes Jan 21, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(PC-33528)[PRO] feat : add new Multiselect component #15628

(PC-33528)[PRO] feat : add new Multiselect component #15628

ahello-pass commented Dec 20, 2024

gmeigniez-pass left a comment

github-actions bot commented Jan 13, 2025 •

edited

Loading

asaez-pass left a comment

asaez-pass Jan 15, 2025

ahello-pass Jan 21, 2025

gmeigniez-pass Jan 15, 2025

mleroy-pass Jan 15, 2025

ahello-pass Jan 21, 2025

mleroy-pass Jan 21, 2025

(PC-33528)[PRO] feat : add new Multiselect component #15628

Are you sure you want to change the base?

(PC-33528)[PRO] feat : add new Multiselect component #15628

Conversation

ahello-pass commented Dec 20, 2024

But de la pull request

Vérifications

gmeigniez-pass left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 13, 2025 • edited Loading

asaez-pass left a comment

Choose a reason for hiding this comment

asaez-pass Jan 15, 2025

Choose a reason for hiding this comment

ahello-pass Jan 21, 2025

Choose a reason for hiding this comment

gmeigniez-pass Jan 15, 2025

Choose a reason for hiding this comment

mleroy-pass Jan 15, 2025

Choose a reason for hiding this comment

ahello-pass Jan 21, 2025

Choose a reason for hiding this comment

mleroy-pass Jan 21, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 13, 2025 •

edited

Loading