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

https://www.figma.com/@gouvfr