🎉 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