Dropdown

[Fanny27]

Epic Form Field #11 Design sur Figma

Cas d'usage

Les menus déroulants affichent une liste d'options, déclenchées par une icône, un bouton ou une action.

Composition

• [ ] Header (facultatif)
• [ ] Liste de résultat
• [ ] Footer (facultatif)

La liste de résultat peut contenir des items différents comme :

• [ ] Default/label
• [ ] Avatar
• [ ] drapeau du pays + langue
• [ ] checkbox
• [ ] checkbox avatar
• [ ] radio
• [ ] radio avatar
• [ ] icon + label
• [ ] login

Critères d'acceptance

Types de dropdown

• [ ] sélection multiple
• [ ] sélection simple (langue, indicatif...)
• [ ] résultat de recherche

Orientation

• [ ] bottom right (par défaut)
• [ ] bottom left (par défaut)
• [ ] top right (fall back)
• [ ] top left (fall back)

Ordre de tri

• [ ] Alphabétique
• [ ] Pertinence

Taille

• [ ] La largeur du dropdown est définie par l’organisme auquel il est rattaché
• [ ] La hauteur maximale du composant dropdown correspond au stack de 5 items maximum (header et footer non compris) avant le scroll

Autre

• [ ] crop des items trop long avec tooltip en hover
• [ ] Dans le cas d’un comportement de sélection (input select par ex), l’item sélectionné n’est pas affiché dans la liste déroulante.
• [ ] Lors d’une recherche, la valeur est mis en évidence par du semi-bold.