Version courante - v1.10.1
Général
Nouveauté(s)
🎉 Infobulle (ou “bulle d’aide”, “aide contextuelle”) est un composant qui permet d’afficher du contenu après une interaction avec un élément précis de l’interface. Il est caché par défaut et s’affiche au survol ou au clic de l’élément associé par-dessus le reste de la page. Il est disponible en deux variations :
- Déclenchement au survol
- Déclenchement au clic
🎉 [Bêta] Image d’en-tête, disponible en deux variations :
- Desktop LG - 16:9 / Mobile LG - 2:3.
- Desktop MD - 8:3 / Mobile MD - 4:5
Évolutions
✨ Tuile : plusieurs variations sur deux tailles, SM et MD avec le rajout d’une icône optionnelle, par défaut une flèche.
✨ Téléchargement de fichier :
- 🎉 Nouvelle variation disponible : Tuile de téléchargement
- ✨ Évolution de la variation Carte anciennement appelé “Bloc de téléchargement” avec la possibilité d’y inclure un média au ratio 3:4 ou 4:3 et de pouvoir afficher des tags ou badges.
✨ Modale : ajout d’un titre de niveau sur les modales ayant une zone libre
Librairie Sketch, v1.10.0
🎨 Fondamentaux
Pictogramme
🎉 Ajout du pictogramme “Document-add” dans la librairie Système de Design de l’État · Pictogrammes
Ratio médias
🎉 Ajout de deux nouveaux ratios : 8:3 et 4:5
Icônes
🎉 Ajout des icônes “refresh-fill” et “refresh-line” dans la partie “System” de la bibliothèque d’icônes
Styles de texte
✨ Évolution du style de texte du composant Tuile en taille MD, desktop et mobile
🧩 Composants
Accordéon
- 🎉 Ajout d’un fond $background-open-blue-france sur la zone interactive à l’état “Ouvert”
- 🛠️ Modification de l’espacement gauche du label et droite de l’icône
Carte
- 🛠️ Uniformisation de la taille des badges et des tags dans le composant (zone de contenu et zone média) :
- Taille SM (tag et badge) pour la carte SM
- Taille MD (tag et badge) pour les cartes MD et LG
- 🎉 Ajout d’un item Média “Avec tag” dans la zone média en plus de la version “Avec badge” existante
- ✨ Possibilité de choisir l’icône “external-link-line” à la place de “arrow-right-line”
- 🎉 Ajout et mise à jour des états sur desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout et mise à jour des états sur mobile : Défaut, Désactivé, Cliqué
Lettre d'information et réseaux sociaux
- 🛠️ Ajustement de l’espacement du groupe de boutons de réseaux sociaux sur desktop pour être aligné sur le titre
- 🛠️ Ajustement de l’espacement entre les boutons de réseaux sociaux à 16px sur mobile
Menu latéral
- ✨ Ajout d’un fond $background-open-blue-france sur les items N1 et N2 Dépliant à l’état ouvert.
- 🛠️ Correction de l’espacement à 16px en-dessous des derniers items N2 et N3 dans une liste.
- ✨ Sur mobile, changement de la couleur de l’intitulé du menu et des deux icônes en $text-action-high-blue-france et ajout d’un fond $background-open-blue-france sur l’item en état “Ouvert".
Modale
- 🚫 Suppression de l’ombre sur la zone d’action
- 🎉 Ajout d’un titre sur les versions de contenu libre (zone de contenu).
Navigation principale
- 🎉 Sur mobile, ajout d’un fond $background-open-blue-france sur l’état ouvert du N1 - Dépliant.
Pied de page
- ✨ Mise à jour du texte de la licence dans l’item “Mention”.
Partage
- 🛠️ Changement en taille MD des boutons de réseaux sociaux
Sélecteur de langue
- 🎉 Ajout d’un fond $background-open-blue-france sur l’état ouvert du menu dépliant.
Tag
- ✨ Évolution de la nomenclature des différents types de tag.
- 🎉 Ajout et mise à jour des états : Défaut, Désactivé, Survol, Focus, Cliqué, Groupe.
Téléchargement de fichier
Carte de téléchargement
- ✨ Changement du nom du composant “Bloc” par “Carte”
- 🎉 Ajout des tailles SM et MD sur desktop, avec et sans média et mise à jour des états : Défaut, Désactivé, Survol, Focus, Cliqué.
- 🎉 Ajout des tailles SM et MD sur mobile, avec et sans média et mise à jour des états : Défaut, Désactivé, Cliqué.
Lien de téléchargement
- 🎉 Ajout des items du lien sur deux lignes.
- 🛠️ Mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué.
- 🎉 Ajout des items des états en version mobile : Défaut, Désactivé, Cliqué.
Tuile de téléchargement
- 🎉 Ajout de la variation Tuile en tailles SM et MD, avec et sans pictogramme
- 🎉 Ajout des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué.
- 🎉 Ajout des états en mobile : Défaut, Désactivé, Cliqué.
Transcription
- 🎉 Ajout d’un fond $background-open-blue-france sur la zone interactive à l’état “Ouvert”
Tuile
- 🛠️ Changement du style de texte des tuiles en taille MD par le style H6
- 🎉 Ajout d’une icône “arrow-right-line” en bas à droite dans le composant (optionnel)
- ✨ Possibilité de choisir l’icône “external-link-line” à la place de “arrow-right-line”
- 🎉 Ajout et mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout et mise à jour des états en mobile : Défaut, Désactivé, Cliqué
📁 Blocs fonctionnels
Demande d'une adresse postale, Société
- 🛠️ Ajustement de la largeur du champ “numéro” à 80px
- 🛠️ Ajustement de la largeur du champ “code postal” à 240px
- 🛠️ Ajustement de la disposition des champs “code postal” et “ville” l’un à côté de l’autre
- 🛠️ Correction des textes et intitulés
📝 Modèles
Création de compte, Connexion
- 🛠️ Ajustements des formulaires suite aux modifications des blocs fonctionnels
- 🛠️ Correction des textes et intitulés
Page d'erreur, Service indisponible
- 🚫 Suppression de la version en thème sombre
Librairie Figma, v1.10.0
🎨 Fondamentaux
Pictogrammes
🎉 Ajout du pictogramme “Document-add” dans la librairie Système de Design de l’État · Pictogrammes
Ratio médias
🎉 Ajout de deux nouveaux ratios : 8:3 et 4:5
Icônes
🎉 Ajout des icônes “refresh-fill” et “refresh-line” dans la partie “System” de la bibliothèque d’icônes
🧩 Composants
Accordéon
- 🎉 Ajout d’un fond $background-open-blue-france sur la zone interactive à l’état “Ouvert”
- 🛠️ Modification de l’espacement gauche du label et droite de l’icône sur mobile
Badge
Changements destructifs
• Liens à refaire pour les instances des badges
• Tous les labels seront remplacés par “Label” (pour l’initialisation de la propriété “Label”)
• Tous les icônes seront remplacés l’icône settings-3-line par défaut (pour permettre l’initialisation de la propriété “ Icône”)
🛠️ Remaniement de la classification éléments :
- Séparation des thèmes clairs et sombres
- Séparation par type (Succès, Erreur, Information, Avertissement, Nouveauté, Personnalisé)
- Séparation par taille (SM, MD)
🎉 Les labels sont maintenant des styles de texte
Carte
Changements destructifs
Liens à refaire pour les instances des cartes
🛠️ Remaniement de la classification éléments :
- Séparation par type (verticale ou horizontale, avec média ou sans média)
- Séparation par taille (SM, MD, LG)
🛠️ Uniformisation de la taille des badges et des tags dans le composant (zone de contenu et zone média) :
- Taille SM (tag et badge) pour la carte SM
- Taille MD (tag et badge) pour les cartes MD et LG
🎉 Ajout d’un item Média “Avec tag” dans la zone média en plus de la version “Avec badge” existante
✨ Possibilité de choisir l’icône “external-link-line” à la place de “arrow-right-line”
🎉 Ajout et mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué
🎉 Ajout et mise à jour des états : Défaut, Désactivé, Cliqué
Interrupteur
- ✨ Correction de l’alignement à droite du statut
Lettre d'information et réseaux sociaux
- 🛠️ Ajustement de l’espacement entre le groupe de boutons des réseaux sociaux pour être aligné sur le titre
- 🛠️ Ajustement de l’espacement entre les boutons de réseaux sociaux à 16px
Menu latéral
- ✨ Ajout d’un fond $background-open-blue-france sur les items N1 et N2 Dépliant à l’état ouvert
- 🛠️ Correction de l’espacement à 16px en-dessous des derniers items N2 et N3 dans une liste
- ✨ En mobile, changement de la couleur de l’intitulé du menu et des deux icônes en $text-action-high-blue-france et ajout d’un fond $background-open-blue-france sur l’item en état “Ouvert”
Modale
- 🚫 Suppression de l’ombre sur la zone d’action
- 🎉 Ajout d’un titre sur les versions de contenu libre (zone de contenu)
Partage
- 🛠️ Changement en taille MD des boutons de réseaux sociaux
Navigation principale
- 🎉 Ajout d’un fond $background-open-blue-france sur l’état ouvert du N1 - Dépliant en mobile
- 🎉 Ajout d’un séparateur sur le dernier item en mobile
Pied de page
- ✨ Mise à jour du texte de la licence dans l’item “Mention”
Sélecteur de langue
- 🎉 Ajout d’un fond $background-open-blue-france sur l’état ouvert du menu dépliant en mobile
Tag
Changements destructifs
• Liens à refaire pour les instances des tags
• Tous les labels seront remplacés par “Label” (pour l’initialisation de la propriété “Label”)
• Tous les icônes seront remplacés l’icône settings-3-line par défaut (pour permettre l’initialisation de la propriété “ Icône”)
🛠️ Remaniement de la classification éléments :
- Séparation des thèmes clairs et sombres
- Séparation par taille (SM, MD)
- Séparation par type (Succès, Erreur, Information, Avertissement, Nouveauté, Personnalisé)
🎉 Les labels sont maintenant des styles de texte
🎉 Ajout des tags Sélectionné, Supprimable, Personnalisable
🎉 Ajout des groupes de tags Sélectionné, Supprimable, Personnalisable
Téléchargement de fichier
Changements destructifs
Liens à refaire pour les instances Bloc de téléchargement vers Carte de téléchargement ou Tuile de téléchargement
🛠️ Remaniement de la classification éléments :
- Séparation des thèmes clairs et sombres
- Séparation par taille (SM, MD)
- Séparation par support (Desktop, mobile)
- Séparation par type (Avec média, Sans média)
Carte de téléchargement :
- Changement du nom du composant “Bloc” par “Carte”
- 🎉 Ajout des tailles SM et MD sur desktop, avec et sans média et mise à jour des états : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout des tailles SM et MD sur mobile, avec et sans média et mise à jour des états : Défaut, Désactivé, Cliqué
Lien de téléchargement :
- 🎉 Ajout des items du lien sur deux lignes
- 🛠️ Mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout des états en version mobile : Défaut, Désactivé, Cliqué
Tuile de téléchargement :
- 🎉 Ajout de la variation Tuile en tailles SM et MD, avec et sans pictogramme
- 🎉 Ajout des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout des états en mobile : Défaut, Désactivé, Cliqué
Transcription
- 🎉 Ajout d’un fond $background-open-blue-france sur la zone interactive à l’état “Ouvert”
Tuile
Changements destructifs
Liens à refaire pour les instances des tuiles
- 🛠️ Remaniement de la classification éléments : séparation des thèmes clairs et sombres
- 🛠️ Changement du style de texte des tuiles en taille MD par le style H6
- 🎉 Ajout d’une icône “arrow-right-line” en bas à droite dans le composant (optionnel)
- ✨ Possibilité de choisir l’icône “external-link-line” à la place de “arrow-right-line”
- 🎉 Ajout et mise à jour des états en desktop : Défaut, Désactivé, Survol, Focus, Cliqué
- 🎉 Ajout et mise à jour des états en mobile : Défaut, Désactivé, Cliqué
📁 Blocs fonctionnels
Demande d’une adresse postale, Société
- 🛠️ Ajustement de la largeur du champ “numéro” à 80px
- 🛠️ Ajustement de la largeur du champ “code postal” à 240px
- 🛠️ Ajustement de la disposition des champs “code postal” et “ville” l’un à côté de l’autre
- 🛠️ Correction des textes et intitulés
📝 Modèles
Création de compte, Connexion
- 🛠️ Ajustements des formulaires suite aux modifications des blocs fonctionnels
- 🛠️ Correction des textes et intitulés
- 🎉 Ajout de la page “Activation de compte” et “Validation de création de compte”
Pages d’erreur, “Service indisponible”
- 🚫 Suppression de la version en thème sombre
Code, v1.10.1
🎨 Fondamentaux
Utility
- 🎉 Ajout des icônes :
- twitter-x-line / twitter-x-fill
- threads-x-line / threads-x-fill
🧩 Composants
Bouton radio - radio
- 🛠️ Correction d’une couleur manquante engendrant un problème de compilation du CSS (#color2) #725
Lettre d’information & réseaux sociaux - follow
Lien - link
Tuile - tile
- 🛠️ Correction de l'icône des tuiles avec liens externes (target=”_blank”) #753
Code, V1.10.0
🎨 Fondamentaux
Global
Core
Utility
- 🎉 Ajout des classes utilitaires de couleurs background-flat pour les tokens :
- blue-france
- toutes les couleurs d’accentuation
🧩 Composants
Accordéon - accordion
- 🛠️ Ajustements sur les états défaut et actif de l’accordéon #564
- Les icônes “+” et “-” sont retirées au profit de l’icône “>” orientée vers le bas par défaut et vers le haut dans l’état actif.
- La graisse du texte passe en médium dans les 2 états
- Passage de l’icône et de l’intitulé en couleur : action-high-blue-france
- Ajout d’un fond background-open-blue-france sur le bouton lorsque l’élément est ouvert
- Ajout de marges intérieures (4v) sur les cotés #678
Barre de recherche - search
- 🛠️ Spécificité renforcée sur le sélecteur input[type=search] afin de conserver l’apparence malgré l’utilisation de librairies tierces telle que normalize.css
- 🛠️ Correction de la hauteur du champ sur IOS (1px de trop) #632
Bouton radio - radio
- ✨ Le contour devient bleu
- ✨ retrait du fond blanc du radio bouton (transparence)
Bouton radio riche - radio
- ✨ L’outline au focus englobe maintenant tout le radio riche #502
- ✨ Ajout du radio riche sans illustration #540
- ✨ Le radio-riche utilise maintenant des pictogrammes à la place d’images #540
- La classe fr-radio-rich__img est dépréciée au profit de fr-radio-rich__pictogram et son contenu devient un fr-artwork
- La classe fr-radio-rich__img est dépréciée au profit de fr-radio-rich__pictogram et son contenu devient un fr-artwork
Carte - card
- 🎉 Ajout d’une version sans lien (titre en noir)
- 🛠️ Ajout de l’icône “lien externe” à la fin du titre dans le cas de lien non étendu
Case à cocher - checkbox
- ✨ Le contour de la checkbox devient bleu
- 🛠️ Correction du changement d’état coché/décoché, maintenant au relâchement du clic (mouse-up)
- 🛠️ Correction des cartes sur IE11 #705
Champ de saisie - input
- ✨ Ajuste la largeur des champs de code postal, d’année et de numéro de rue pour des multiples de 8v #679
- ✨ Ajout de la bordure à gauche des champs en erreur/succès/info #635
- 🛠️ Correction de modèle de champs d’adresse électronique
- Correction attribut “autocomplete” en trop sur les input-group
- Texte additionnel sur plusieurs lignes dans le modèle de champs d’adresse électronique
- Correction des textes additionnels
En-tête - header
- 🛠️ L’ensemble des id présents dans les accès rapides du header sont maintenant suffixés par “-mobile” à la duplication #637
Formulaire - form
- ✨ Le texte de description additionnel des champs désactivés passe en couleur de texte désactivé
- Lorsque le fieldset possède l’attribut “disabled”, la classe “hint-text” passe en couleur --text-disabled-grey
- 🛠️ Correction de l’alignement icône des messages d’erreur/succès #670
- ✨ Remplacement de l’attribut aria-live="assertive" par aria-live="polite" sur les messages d’erreur/succès #654
- 🛠️ Correction de la bordure des formulaire en erreur/succès sur iOS #712
- 🛠️ Correction du focus des radios riches dépréciés #715
Gestionnaire de consentement - consent
- ✨ Évolution du lien “voir plus de détail” #662
- Retrait du soulignement
- Passage du texte en bleu-france
Info-bulle - tooltip
- 🎉 Ajout du composant tooltip
- Permet l’ouverture d’une info-bulle, au clic, ou d’une information contextuelle, au survol
- Permet l’ouverture d’une info-bulle, au clic, ou d’une information contextuelle, au survol
Interrupteur - toggle
- 🎉 Ajout des variants d’interrupteur en erreur et valide
- 🛠️ Retrait du css appearance:none sur input
- ✨ Le toggle est maintenant placé dans un fieldset
Lettre d’information & réseaux sociaux - follow
- 🎉 Ajout d’un exemple de succès à l’abonnement à la lettre d’information
Liste déroulante - select
- ✨ Ajout de la bordure à gauche des select en erreur/succès/info #635
Mot de passe - password
Modale - modal
- 🛠️ Correction du décalage du contenu en arrière plan à l’ouverture/fermeture de la modale #519
- 🛠️ Correction du scroll progressif du contenu en arrière plan à l’ouverture/fermeture de la modale dans le cas de pages utilisant la propriété CSS “scroll-behavior: smooth” #519
- 🛠️ Correction du z-index des composants link, button, tag, badge qui passaient au-dessus du footer de la modale #630
- 🛠️ Correction du placement de l’icône credential permettant d’accéder au trousseau sur Safari #711
Menu latéral - sidemenu
- ✨ Uniformisation du menu latéral, navigation et accordéon homogénéisation des espacements et indentation #678
- ajout d’un fond background-open-blue-france et du texte en text-blue-france sur les boutons d’ouverture en état ouvert
- ajout de marges pour indenter les sous menus
- ajustement des espacements
- 🚫 Suppression de la variante avec bordure #660
Navigation
- 🛠️ Correction du focus des nav-items en mobile & ajustements #609
- Ajustement de l’alignement du bouton fermé en desktop
- Retrait du mega-menu__leader vide dans les exemples
- ✨ Uniformisation du menu latéral, navigation et accordéon homogénéisation des espacements et indentation #678
- Ajout d’un fond open-blue-france et du texte en blue-france sur les boutons d’ouverture en état ouvert
- Ajout de marges pour indenter les sous menus
- Ajustement des espacements
Onglets - tab
- 🛠️ Correction de l’écoute des événements de clavier dans les tab-panel #531
- L’utilisation des flèches du clavier en dehors de la liste d’onglet ne déclenche plus le changement d’onglet. Cela permet notamment l’utilisation des flèches sur les radios boutons dans un onglet.
- 🛠️ Ajustements pour Internet Explorer 11 #613
Pagination
- ✨ Ajustement de l’écart entre les boutons et de la taille des boutons de pagination #549
Sélecteur de langue - translate
- ✨ L’icône “arrow-down-s-fill” est remplacée par l’icône “arrow-down-s-line”
Transcription
- 🛠️ Ajustement sur l’état défaut et actif de la transcription #564
- Les icônes “+” et “-” sont retirées au profit de l’icône “>” orientée vers le bas par défaut et vers le haut dans l’état actif.
- La graisse du texte passe en médium dans les 2 états
- Passage icône et intitulé en couleur : action-high-blue-france
- Ajout d’un fond background-open-blue-france sur le bouton lorsque l’élément est ouvert
Téléchargement de fichier - download
- ✨ Séparation du download en carte, lien, et tuile de téléchargement #487
- Le composant fr-download est retiré (déprécié)
- Nouveau variant de la carte fr-card--download
- Nouveau variant du lien fr-link--download
- Diminution de la graisse du titre du lien de téléchargement #658
- Ajout de la tuile de téléchargement fr-tile--download
Tuile - tile
- ✨ Évolution majeure du composant tuile #493
- La structure html de la tuile est maintenant comparable à celle du composant carte
- Ajout de wrapper "fr-tile__content" et "fr-tile__header" pour englober le contenu et l’image
- L’image des tuiles est remplacée par un pictogramme "fr-artwork"
- Le wrapper "fr-tile__img" devient "fr-tile__pictogram"
- Ajout de la possibilité de placer un badge, un tag, un texte de détail, dans le contenu de la tuile
- Ajout d’une taille de tuile SM
- La structure html de la tuile est maintenant comparable à celle du composant carte
- ✨ Uniformisation de la tuile avec carte #602 #657
- Ajout d’une icône “arrow-right” par défaut, et “external-link” si lien en target=”_blank”
- Ajout d’un variant tuile sans icône fr-tile--no-icon
- Ajout d”un variant tuile de téléchargement fr-tile--download (mode horizontal, icône “download”, détails et assess-file)
- Ajout de variants fr-tile--vertical@md et fr-tile--vertical@lg pour passer une tuile horizontale, ou download, en vertical à partir des breakpoints md et lg
- Ajout des variants fr-tile--no-border, fr-tile--shadow, fr-tile--grey, et fr-tile--no-background
- Correction de la version désactivé (lien sans href)
- Ajout d’une version sans lien (titre en noir)
🛠️ Correction des tuiles sur IE11 #705
📝 Modèles
Nom - name
- 🎉 Ajout d’un exemple de bouton de suppression de champs #493
- 🎉 Ajout d’un exemple de gestion de déplacement du focus en js #664
- au clic sur la checkbox de désactivation pour activer, le premier champ ou bouton prend le focus
- au clic sur l’ajout d’un prénom, le champs ajouté prend le focus
- au clic sur la suppression, le champ ou bouton suivant prend le focus
Civilité - civility
- 🛠️ Corrige la taille des boutons radio du titre d’appel en sm au lieu de md #676
Connexion / Enregistrement - login / register
- ✨ La mention “champs obligatoires” doit être placée dans une balise <p> #652
🔌 Analytics
- 🛠️ Corrige les liens cassés de la documentation
- 🛠️ Retrait du patch js des pages d’exemples
- 🛠️ Correctif du collect manuel au changement d’url
- 🛠️ Correction du taux de clic désactivé sur certains composants
- 🛠️ Correction de l’analyse de hiérarchie qui ignorait les headings présents dans un composant
- 🛠️ Ajustements pages d’exemple
- ✨ Retrait des limitation de valeurs sur la propriété user.profile
- 🎉 Ajouts de propriétés dans la configuration de page
- page_id
- page_author
- page_tags
- page_date