Form

[Pauline999]

Form

• Update new spacings + colors Figma file

Checkbox

• Figma file
• Documentation & spec

[theo-mesnil]

Demo: https://feat-forms-new-spacing-colors--welcome-ui.netlify.app/

[theo-mesnil]

Attention à ne pas aller par la recherche, directement via le menu ;)

[Pauline999]

Hola ! petite QA design, n'hésitez pas à me pinguer si des éléments ne sont pas clairs ou si besoin de papoter sur certains points :)

Hint

• Change color of “default” hint to #[737373](https://convertingcolors.com/hex-color-737373.html)
• Réduire le line-height à 14px

Label

• Réduire le spacing entre l’icône et le label =4px

Field

• Réduire spacing entre le label et le field = 8px
• Réduire spacing entre field et hint = 4px

InputText

• Idem field

Checkboxs

• Réduire le spacings entre la "Checkbox + label" et le hint = 4px
• Réduire le spacings entre les items dans une liste = 12px
• Augmenter la graisse des labels = Medium

Radio button

• Réduire le spacing entre le radio button et le label associé = 8px
• Réduire le spacing entre les items radio buttons en liste = 12px + réduire le spacing entre la liste et le label global de la liste = 12px
• With hint on radio : Réduire le line-height du hint à 14px
• Variants : Il semble y avoir un doublon ici avec la fonction "Disabled" répétée alors que ça ressemble plus à un variant concernant le status. Les radio button en état error ne semblent pas fonctionner au clic.
• 

Hook Form

• Appliquer spacing de 16px entre les components dans un form.

[Pauline999]

doublon

[theo-mesnil]

Ok je regarde cela asap merci @Pauline999 :)

[Pauline999]

QA sur le com précédent

Hint

• Réduire le line-height à 14px -> pas encore réalisé, je le remet ici pour pas zapper sur radio/checkbox etc aussi :)

Label

• Réduire le spacing entre l’icône et le label =4px -> KO

Checkboxs

• Réduire le spacings entre la "Checkbox + label" et le hint = 4px -> KO Image
• Réduire le spacings entre les items dans une liste = 12px -> KO C'est bien 12px dans le code mais le rendu fais plutôt 24px, si on passe la marge en front à 4px(0.25rem) on tombe pile poile sur 12px coté rendu.
• Augmenter la graisse des labels = Medium -> KO

Radio button

• Réduire le spacing entre le radio button et le label associé = 8px -> C'est bien 8px, mais j'ai l'impression qu'il y a un micro margin-right sur le radio de 0.125 rem, si pas necessaire on peut virer pour approcher un peu le label du radio :)
• Réduire le spacing entre les items radio buttons en liste = 12px + réduire le spacing entre la liste et le label global de la liste = 12px -> Idem checkbox on peut passer le margin-bottom à 4px(0.25rem) pour un rendu 12px en front
• Variants : Il semble y avoir un doublon ici avec la fonction "Disabled" répétée alors que ça ressemble plus à un variant concernant le status. Les radio button en état error ne semblent pas fonctionner au clic. -> KO doublon de description toujours visible de mon coté : "Add disabled to the Field component"

Hook Form

• Appliquer spacing de 16px entre les components dans un form. -> KO Le margin de 16px n'est pas appliqué entre le field email et lacheckbox et la checkbox et le bouton

[Pauline999]

Date picker

• Petite icone agenda sauvage qui se balade à droite du screen :D

Clearable (select, field, etc)

• Utiliser le bouton ghost circle en X-Small (24px x 24px) pour avoir le state rollover moins collé à l'icone -> pour ces sizes : small, medium et marge. J'ai revu le traitement de l'icone sur les maquettes Figma ça portait à confusion ( la taille de l'icone croix reste à 16px pas de modification sur le rendu de l'état par défaut, être vigilant par rapport à la marge avec l'arrow du select quand elle est présente :)

[WIP sur le reste :) ]

[theo-mesnil]

Testing https://fix-forms--welcome-ui.netlify.app/installation @Pauline999

[Pauline999]

Coucou ✌🏼, quelques composants qu'il reste à ajuster sur les précédents feedbacks + Toogle (new) :)

File drop

• Il manque le dashed sur le contour.

Checkbox

• Sur la version en prod uniquement il y a un bug sur la couleur de l’icône checkbox qui est passée en blanche
• Le spacings entre la "Checkbox + label" et le hint est OK par contre j’ai l’impression que ça à mécaniquement réduit le spacing entre le Checkbox et la Label (ou icone + label) qui est passé à 4px alors que c’est 8px.
• Réduire le spacing entre les items dans une liste = 12px -> KO C'est bien 12px dans le code mais le rendu fais plutôt 24px, si on passe la marge en front à 4px(0.25rem) on tombe pile poile sur 12px coté rendu.

Radio button

• Margin horizontal alignment entre les radio en ligne = 16px (Column style)
• Spacing entre le radio button et le Hint = 4px

Clearable (select, field, etc)

• Impec pour l’update du rollover par contre sur l’input text /select/date picker etc en xs (height à 24px) il faut qu’on adapte la taille du hover gris uniquement pour le passer à 16px pour éviter qu’il touche le contours du field.

Hook Form

• Appliquer spacing de 16px entre les components dans un form. > KO Le margin de 16px n'est pas appliqué entre le field email et lacheckbox et la checkbox et le bouton

Toogle

• Focus state: change the color to #FFE166 et passer la taille du contour de 3px à 2px
• Faire le changement du passage du contour de 3px à 2px pour tous les composants field/select/radio etc