ui
ui copied to clipboard
cap-collectif
Formulaire
Il manque encore le ticket des dropdowns pour le select et on est good pour ce batch.
Deadline :
Développement prévu en Octobre 2021
Besoin
Permettre aux utilisateurs d'ajouter des données :
- Donner un nom à un projet
- Sélectionner un projet
- Spécifier les dates de début et de fin d'un projet
- etc...
Spécifications fonctionnelles
Les form field comprennent le composant label.
Table des matières
I. Composition II. États III. Types ___Search basic pour l'instant ___Select #28 ___Calendar #40 ___Date #34 ___Double Calendar #41 ___Date Range #36
___Input #30 ___Text Area #29 ___Input Number #31 ___input time et time picker #35 ___Date & Time #10 ___Time Range and Double time picker #37 (pas encore utilisé V2) ___Phone Number #27 ___Currency #26 ___Input Group #38 ___Radio and Checkbox #19 ___Comportement général des formulaires #46 ___Combo box ___le reste du compo Search
Composition
États
Types
Input
Ticket #30
Utilisé pour les champs textes courts. Ne permet pas les sauts de ligne. La largeur du composant se stretch en fonction de l’espace dédié dans son conteneur (note : largeur définie possible au besoin).
Text Area
Ticket #29
Utilisé pour les champs texte long sur plusieurs lignes ne nécessitant pas de formattage particulier. La largeur du composant se stretch en fonction de l’espace dédié dans son conteneur (note : largeur définie possible au besoin).
Number
#31
Utilisé pour les input de nombre qui ne sont pas des dates, des heures, un numéro de téléphone ou un montant. Les flèches sont intéractives. Input de chiffres uniquement. Entrée de valeur numérique uniquement (on a pas de cas de nombre non-entiers actuellement). Il a une largeur de base définie mais peut être adapté selon le nombre attendu (ne se stretch pas automatiquement quand on entre un nombre).
Select
Tickets #28 #25
Permet à l’utilisateur de sélectionner une donnée parmi une liste pré-définie. La liste doit être triée par ordre alphabétique et taper sur le clavier une lettre ou un chiffre quand le composant est sélectionné doit permettre de chercher dans la liste. La largeur du composant se stretch en fonction de l’espace dédié dans son conteneur (note : largeur définie possible au besoin).
Date
Voir ticket cap-collectif/ui#10 pour le détail. Utilisé pour la sélection d’une date unique. L’utilisateur peut saisir la date directement dans le champ (le slash s’ajoute automatiquement, l’utilisateur peut saisir tous les chiffres à la suite) ou il peut sélectionner une date via le calendrier. Il a une largeur de base définie.
Time
Voir ticket cap-collectif/ui#10. Utilisé pour la sélection d’une horaire. Les deux points s’ajoutent automatiquement (on peut taper tous les chiffres à la suite). Il a une largeur de base définie. Dans l'état selected/focus, le Time Select est disponible voir ticket Time Picker sur Figma.
Date & Time
Voir ticket cap-collectif/ui#10. Utilisé pour la sélection d’une date et d’une heure. Il a une largeur de base définie.
Cliquer sur l’un des "champs internes" ouvre le time picker ou le calendrier.
Date Range
Voir ticket cap-collectif/ui#10. Utilisé pour la sélection d’une date de début et d'une date de fin, accompagné du calendrier. Il a une largeur de base définie.
Time Range
Utilisé pour la sélection d’une tranche horaire. Il a une largeur de base définie.
Phone Number
Ticket #27
Utilisé pour les input de numéro de téléphone. L’utilisateur peut sélectionner un pays ce qui met à jour le format du numéro de téléphone (indicatif + nombre de chiffre, pour un numéro français, 5 chiffres). La longueur du champ s’adapte en fonction du format du numéro de téléphone attendu (après sélection, pas automatique). Pour l'instant, on gère uniquement les numéros français, les specs relatives au format des autres pays seront dans un ticket spécifique.
Currency
Ticket #26
Utilisé pour les input de montant. La devise n’est pas éditable. Input de chiffres uniquement. Il a une largeur de base définie mais peut être adapté selon le nombre attendu (ne se stretch pas automatiquement quand on entre un nombre).
Input Group
Certains inputs peuvent être groupés dû à une utilisation commune, auquel cas le texte de l’erreur sera sur le groupe. Remarque : si l’erreur n’est applicable qu’à un seul des 2 champs (champs obligatoire par exemple), seul le champs concerné sera en état d’erreur.
