data.gouv.fr
data.gouv.fr copied to clipboard
[Meta] UI Kit consolidation
Copied from https://github.com/etalab/udata-front/pull/33 by @gmougeolle.
I [...] did a review of all existing styles in order for us to decide what to do with some of them :
- [x] #686
- [ ] #687
- [x] #688
- [x] #689
- [x] #690
- [x] #691
- [x] #692
- [x] #693
- [x] #694
- [ ] #695
- [x] #696
- [x] #697
- [x] #698
- [x] #699
Après discussion, voici les prochaines actions qui ont été identifiées pour la consolidation de l'UI Kit:
- [ ] Supprimer les boutons primaires. Remplacer les quelques boutons primaires restants par des boutons secondaires. Possibilité de changer la couleur pour le différencier d'un bouton secondaire à proximité.
- [ ] Renommer les boutons secondaires en boutons primaires
- [x] Enlever les btn-action inutiles sur jinja
- [x] Supprimer les btn-actions quand ils auront été remplacés
- [x] Changer le dropdown dans le footer par celui du DSFR et supprimer le dropdown
- [x] Supprimer les icon size
- [x] Supprimer tab-panel avec le js correspondant si pertinent
- [x] Remplacer les tags par ceux du DSFR (cliquables et non cliquables)
- [ ] Supprimer le Callout et au besoin utiliser celui du DSFR
En ce qui concerne les couleurs spécifiquement, l'idée est d'itérer sur les couleurs au fur et à mesure. On peut déjà supprimer les quelques couleurs non utilisées et remplacer les valeurs des variables par les valeurs du DSFR pour résoudre les soucis d’accessibilité, mais attention aux effets de bords.
Thanks 🙏 , deux petites remarques :
- [ ] Supprimer tab-panel avec le js correspondant si pertinent
Le JS sert aussi à d'autres endroits (notamment les tabs de la home qui ne sont pas des tabs-panel), pour l'instant il vaut mieux le garder !
- [ ] Supprimer le Callout et au besoin utiliser celui du DSFR
Il s'agit de deux points différents : les callouts peuvent être supprimés (c'était les encarts colorés des premières maquettes), et les well
peuvent être remplacés par les "mises en avant (callout)" du DSFR
Suivi des mises à jours :
- les dropdown sont maintenant des
- les
.tabs
sont remplacés par un attributdata-tabs
- les
. tab-panel
sont remplacés par la présence d'un attributaria-controls
sur les tabs - les
icon size
sont remplacés par l'utilisation des icones du DSFR et par un portage des classes pour fonctionner avec les SVG