Système de Design de l’État
Version 1.6.0
14 juin 2022
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 les fichiers Sketch et Figma, le code et la documentation.
🎉 : AJOUT, ✨ : EVOLUTION, 🛠️ : CORRECTION, 🚫 : SUPPRESSION
Général
Nouveauté(s)
🎉 Ajout du composant Bandeau d’information importante
🎉 Ajout du composant Indicateur d'étape
🎉 Bêta : ajout des modèles suivants dans les fichier Sketch et Figma:
Page d’erreur serveur
Page de connexion
Page de création de compte
Blocs fonctionnels de formulaires
Évolution(s)
🚫 Header: Suppression des séparateurs entre les accès rapides, et changement de l’alignement du bloc.
Librairie Sketch
🎨 Fondamentaux
Icônes
🎉 Ajout de l’icône “fr--capslock”
🛠️ Correction du nom de l’icône : Fondamentaux/Icônes/Librairie/System/transcription align-left
🎉 Text Styles :
- Ajout d’une catégorie, 4) Bouton radio - Case à cocher dans la famille 4. Composants et modification du numéro des autres catégories
- Suppression $text-placeholder-grey✨ Layer Styles - bordures (thème clair et thème sombre) :
- Modification du nom des tokens de bordure plain : $border-plain-blue-france-2px, $border-plain-error-2px, $border-plain-grey-2px, $border-plain-info-2px, $border-plain-success-2px, $border-plain-warning-2px .
- Ajout des tokens : $border-plain-blue-france-1px, $border-plain-error-1px, $border-plain-grey-1px, $border-plain-info-1px, $border-plain-success-1px, $border-plain-warning-1px .
🧩 Composants
Fil d’Ariane
🛠️ Activation de l'override icône flèche
🛠️ Correction du token de la page active en $text-active-grey
Alerte
🛠️ Changement de layer-style de bordure à 1px : $border-plain-error-1px, $border-plain-info-1px, $border-plain-success-1px, $border-plain-warning-1px
Cases à cocher
✨ Changement de text-style pour les titres de section (groupe) : 4) Bouton radio - Case à cocher
🛠️ Activation de l'override du symbol (MD-SM)
Boutons radio
✨ Changement de text-style pour les titres de section (groupe) : 4) Bouton radio - Case à cocher
🛠️ Activation de l'override du symbol (MD-SM)
🛠️ Correction du token label en $text-label-grey
Retour en haut de page
✨ Modification dans l'arborescence → 2. Composants/Retour en haut de page/…
Accordéon
🛠️ Correction de la superposition des items pour éviter un passage à 2px
🛠️ Correction du token état Ouvert : label en $text-active-grey
Ajout de fichier
🛠️ Correction du token label en $text-label-grey
🛠️ Correction du token texte d’information en $text-default-grey
🛠️ Correction du token description en $disabled (état désactivé)
Lettre d’information et réseaux sociaux
🛠️ Modification de l’ordre des icônes réseaux sociaux
Gestionnaire de consentement
🛠️ Correction du token titre en $text-title-grey
Barre de recherche
🛠️ Correction du token texte Rechercher en $text-mention-grey
🛠️ Correction espacement du texte Rechercher à 16px du bouton
Boutons
🛠️ Correction du fond du bouton primaire LG clair désactivé en $background-disabled-grey
🛠️ Correction de la bordure du bouton secondaire LG clair désactivé en $border-disabled-grey
Champs de saisie
🛠️ Correction du token label en $text-label-grey
✨ Harmonisation l’apparence du focus en rajoutant un radius
🎉 Ajout de la version Erreur dans les éléments “Ne pas utiliser” en thème clair et thème sombre
En-tête
Desktop
🛠️ Correction la hauteur du bloc marque (90px)
🛠️ Correction des marges de l’en-tête (top, bottom à 12px)
🛠️ Alignement sur la droite des accès rapides sur le bouton de la barre de recherche +
✨ Suppression des séparateurs entre les boutons d'accès rapides
Mobile
🛠️ Alignement des boutons à 8px du bord droit
🛠️ Modification du bouton “burger” noir en bouton tertiaire icône seul sans bordure
🛠️ Modification de l’espacement entre le bouton et la barre de recherche à 24px
Interrupteur
🛠️ Correction du label du toggle en “Activé” et “Désactivé”
Liens d'évitement
🛠️ Correction de l'espacement des liens de 16px au lieu de 32px
Tuiles
✨ Remplacement image (média) par un pictogramme par défaut
Librairie Figma
🎨 Fondamentaux
Icônes
🎉 Ajout de l’icône “fr-capslock”
✨ Évolution du token $artwork-decorative-blue-france en correspondance $blue-france-850 / $blue-france-200
🎉 Ajout du token $artwork-contrast-blue-france, de correspondance $blue-france-950 / $blue-france-100
🧩 Composants
Transverse
✨ Les messages d’information (appliqués aux champs de saisie, ajout de fichier, éléments de formulaire…) évolue pour un meilleur affichage sur deux lignes et plus
Bandeau d’information importante
🎉 Ajout du composant Bandeau d’information importante, servant à afficher une information exceptionnelle sur toutes les pages d’un site
Champ de saisie
🎉 Ajout du champ “Mot de passe”
En-tête
🚫 Suppression des séparateurs entre les accès rapides
🚫 Suppression du décalage pour alignement des accès rapides et de la barre de recherche
Indicateur d'étape
🎉 Ajout du composant Indicateur d'étape, à utiliser pour afficher (uniquement, pas de navigation) la progression dans une démarche ou un formulaire
Onglets
🛠️ L’attribut “Actif” devient “Courant” pour plus de cohérence avec les autres composants
📃 Modèles
🎉 Ajout des modèles suivants au fichier Bêta :
Page d’erreur serveur
Page de connexion
Page de création de compte
Blocs fonctionnels de formulaires
Code
Version 1.6.0
🎨 Fondamentaux
global
✨ Migration du système de build de node-sass vers sass-dart (merci @mlbiche pour la contribution !!)
icons
✨ Évolution de la gestion du placement des icônes dans les composants offrant la possibilité d’avoir une icône adjointe au label. Précédemment, le rendu d’affichage de ces composants se faisait en flex-box
, avec l'icône rendue dans un pseudo-élément before
et le placement déterminé par la propriété flex-direction
en row
ou row-reverse
. Désormais, ces composants peuvent être rendu suivant le cas en inline
ou en flex-box
, l'icône pouvant être dans un pseudo-élément before
ou after
, suivant son placement à gauche ou à droite. En inline
, le placement de l'icône se fait suivant l'alignement vertical et la taille de fonte. Cette évolution permet d'avoir l'icône inclue dans la ligne dans le cas où le label occuperait plusieurs lignes, notamment link
medias
✨ En remplacement des modificateurs spécifiques fr-responsive-img--xxx
et fr-responsive-vid--xxx
, maintenant dépréciés, ajout d’utilitaires permettant de gérer le ratio d’aspect de manière générique : fr-ratio-32x9
fr-ratio-16x9
fr-ratio-3x2
fr-ratio-4x3
fr-ratio-1x1
fr-ratio-3x4
fr-ratio-2x3
🎉 Ajout des pictogrammes illustratifs https://gouvfr.atlassian.net/wiki/spaces/DB/pages/996474881/Pictogrammes+-+Pictograms#Les-d%C3%A9veloppeurs
🧩 Composants
Badge
🛠️ Ajustement des espacements dans un groupe de badges
Breadcrumb
✨ Passage du breadcrumb en inline pour un affichage sur plusieurs lignes
Button
🛠️ Ajustement des espacements dans un groupe de boutons
Consent
✨ Correction cosmétique du bouton permettant de déployer les services.
Download
🛠️ Correction de la couleur des puces dans les listes de liens de téléchargement pour la couleur bleue.
Follow
✨ Ajout de réseaux sociaux dans les modificateurs inclus dans le composant, évitant une dépendance à utiliy/icons. Documenté dans les pages d’exemple.
Header
🛠️ Correction de la marge basse des liens rapides en version desktop
✨ Retrait du séparateur entre les liens rapides
🛠️ Ajustement des marges
Logo
🛠️ Correction marges du logo en multiple de 4px
Links
🛠️ Revue du placement des icônes.
Navigation
🛠️ Correction de la gestion du focus par le JS au clic sur les éléments de navigation
Notice
🎉 Ajout du composant notice / Bande d’information importante
Sidemenu
✨ Changement de balise du titre pour un heading au lieu d’un paragraphe
Share
✨ Ajout de réseaux sociaux dans les modificateurs inclus dans le composant, évitant une dépendance à utiliy/icons. Documenté dans les pages d’exemple.
Stepper
🎉 Ajout du composant stepper / Indicateur d'étape
Tab
✨ Changement dans la méthode d’affichage des bordures et des éléments.
Table
🛠️ Correction bug IOs sur les bordures
Tag
🛠️ Ajustement des espacements dans un groupe de tags
Icons
🛠️ Correction du support déprécié de l’utilitaire .fr-fi-checkbox-circle-line
Documentation
🎉 Création et mise à jour des pages de documentation :
Indicateur d'étape
Bandeau d’information importante
Médias (ratios)
Configuration minimale requise
Pictogrammes (partie développeurs)
Téléchargements
Code
Librairie Sketch
Planches composants
Exemples de Modèles
Core (disponible sur sketchcloud)
Librairie Figma
Service d'Information du Gouvernement - 2021