🎉 Version 1.0.0
24 juin 2021
Les mises à jour du Design System de l'État sont intégrées à des releases dont les numéros de versions suivent la nomenclature SemVer en respectant le schéma suivant : MAJEUR.MINEUR.PATCH (X.Y.Z). Ce système de gestion de versions concernera le fichier Sketch, le code et la documentation.
🎉 : AJOUT, ✨ : EVOLUTION, 🛠️ : CORRECTION, 🚫 : SUPPRESSION
Général
🎉 🎉 🎉 La version FIGMA est disponible !
Toutes les informations de prises en main se trouvent sur la page ‘Designer’
🎉 Ajout du composant Alertes : voir la documentation.
🎉 Ajout du composant Gestion du consentement (avec code DSFR) : voir la documentation.
🎉 Ajout des licences et notes de contributions dans le code.
Librairie Sketch
🎨 Fondamentaux
Style de calque
✨ Évolution de la nomenclature des style de calque “Marque” par “Marque et Primaire”
Style de texte
✨ Évolution de la nomenclature des style de textes “Texte alternatif” : changement de 1, 2, 3, 4 et 5 par XL, LG, MD, SM et XS
🛠️ Correction du titre H2 - $blue-France en mobile : 32 px → 28 px
Ratio des médias
🛠️ Correction du ratio 2:3 : Correction de la hauteur 160 px → 120 px
🛠️ Correction du ratio 3:2 : Correction de la hauteur 120 px → 106 px
🧩 Composants
Cartes
🛠️ Correction du comportement de la zone de texte de la carte horizontale thème clair lors du redimensionnement en largeur de la carte
Cases à cocher
🛠️ Correction de la nomenclature des groupes : 7) Groupes → 9) Groupes
Interrupteurs
🛠️ Correction de la nomenclatures des éléments de base en thème sombre
Listes
🛠️ Correction du comportement de redimensionnement automatique du symbole liste à puce thème clair
Pagination
🛠️ Correction de la couleur des items page en thème sombre : $g200 → $white
✨ Évolution : fusion des items de navigation page 1*, 2* et 3*
Sommaire
🛠️ Correction du style de texte des items pour redimensionnement automatique
Menu latéral
🎉 Ajout des symboles : N2-Dépliant-Fermé-Dernier et N2-Dépliant-Fermé-Dernier-Actif en mobile
Tuile
🎉 Ajout des symboles “Image et Titre” dans les tuiles horizontales
Pied de page
🛠️ Correction : Ferrage à gauche des listes de liens dans le pré pied de page de la version desktop
🚫 Suppression du calque de fond dans le pré pied de page - thème clair, en mobile
Bouton
🛠️ Correction des espacements entre le label et l’icône dans les boutons de base fluide
🛠️ Correction de la couleur de bordure dans les boutons secondaires LG en thème sombre
🛠️ Désactivation de l’override ‘Ombre’ sur les boutons primaires et secondaires
🛠️ Correction de la largeur des symboles des boutons LG pour prendre en compte la largeur du bouton
Barre de recherche
🛠️ Correction du redimensionnement du bouton en changeant le label
Bouton radio riche
🛠️ Correction de la nomenclature des états
Modale
🛠️ Correction : ajout de l’overlay sur les modales, en mobile
Code
Fondamentaux
✨ Icons : correction des utilitaires de taille d’icônes ‘fr-fi--size’ et ajout taille fr-fi--md
🎉 Icons : ajout des icônes checkbox-circle-fill, checkbox-circle-line, error-warning-fill, error-warning-line, et close-circle-fill
🚫 Icons : remplacement de l’icône checkbox-fill par checkbox-circle-fill
🛠️ Reset : input, select et textarea utilise maintenant la fonte Marianne
🛠️ Correction des listes à puces
Composants
Boutons
🛠️ Correction du nom de la partial scss qui générait un css à part.
Boutons radios / Cases à cocher
🛠️ Correction de l’inversion du label
Cartes
✨ Déplacement du bloc détail en bas de carte
Le paragraphe fr-card__detail a été déplacé afin que le titre soit en première position et répondre ainsi aux critères d’accessibilité.
La mise à jour de la feuille de style n’entraine pas de régression visuelle si vous conservez l’ancien positionnement, mais nous conseillons fortement mettre à jour vos cartes pour améliorer l’A11Y !
En-tête
🛠️ Id sur le bouton d’ouverture du menu en mobile (se retrouvant dans l’attribut aria-labelledby de la navigation)
Modale
🛠️ correction A11y, couleur du titre, et espacements
🛠️ Focus trap: observer remonté d’un niveau.
Navigation
🛠️ Correction bug du changement de sens du chevron au click.
Tabs
🛠️ Correctif bug de transition
Utilities
🎉 Ajout de la page d’exemple des utilitaires d’espacements
✨ Espacement jusqu’à 32v
Pagination
🛠️ Correction du snippet
Skiplinks
🛠️ Correction du snippet, balise </nav>
Documentation
Couleurs
🛠️ Correction des aperçus de couleurs : G - blue-dark, H - pink-soft, I - pink-dark, J - pink-light.
Designer
🛠️ Ajout de la partie Figma.
En-tête - Header
🛠️ Snippets : Id sur le bouton d’ouverture du menu en mobile (se retrouvant dans l’attribut aria-labelledby de la navigation).
Icônes
🛠️ Icône paramètre d’affichage mise à jour. Remplacement des images par des aperçus html.
🛠️ Nomenclature des tailles mise à jour (SM, MD et LG).
Modale
🛠️ Suppression de l’attribut target=”_self” sur le bouton close dans les snippets.
Paramètre d’affichage
🛠️ Correction des snippets de code bouton: classe d’icône du theme est fr-fi-theme-fill (et non plus fr-fi-sun-line).
Typographie
🎉 Ajout des aperçu HTML.
Téléchargements
Code
Librairie Sketch
Sous-librairie Sketch d’icônes