Note de version 1.10

Général

La version 1.10.0 est disponible depuis le 19 juillet 2023

Code de la version 1.10.0

La version 1.10.1 est disponible depuis le 4 septembre 2023

Code en version 1.10.1

La version 1.10.2 est disponible depuis le 19 octobre 2023

Code en version 1.10.2

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
  • 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).
  • 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

Information

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

Information

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 de la variation des proportions du média en desktop (33-66, 40-60, 50-50)

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
  • 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
  • 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

Information

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

Information

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

Information

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.2

Analytics

Information

Information importante sur l'envoi de données et la facturation

La propriété de configuration enableRating, présente depuis la 1.9.2, entraîne des envois de données trop importants. Pour rappel, le modèle de facturation dépend du volume d'appels envoyés à Eulerian. Elle est retirée dans cette version 1.10.2. En remplacement, un attribut data-fr-analytics-rating peut être ajouté sur un élément dont on veut mesurer spécifiquement le taux de click. Il est important de s'assurer de la pertinence de chaque élément où cette fonctionnalité est activée afin d'optimiser l'envoi de données.

fix(analytics): réduction d'envoi des données  #807  :

  • Suppression du taux d'interaction global
  • Ajout de l'attribut data-fr-analytics-rating qui permet de mesurer le taux d'interaction sur un élément particulier
  • Suppression de l'impression des composants sans interactions
  • Limitation de l'envoi de donnée à la première interaction
  • Bouton associé à l'accordéon, l'onglet et la transcription rendu muet
  • Recensement des composants de la page dans une nouvelle donnée de page page_components

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

  • Ajout de la possibilité d’utiliser une classe utilitaire pour utiliser une icône du dsfr sur les réseaux sociaux  #752
  • Ajout des variantes de bouton pour threads et twitter-x (twitter-x non recommandé pour l’instant)  #752
  • Correction du lien de téléchargement sur plusieurs ligne, sur Firefox  #755
  • Correction des groupes de liens de téléchargement sur Safari  #755

Tuile - tile

  • Correction de l'icône des tuiles avec liens externes (target=”_blank”)  #753

Code, V1.10.0

Fondamentaux

Global

  • Monte la version minimale de NodeJS en 18.16.1
  • Mise à jour du README.md  #643
  • Retrait de l’attribut file dans les balises des pages d’exemple
  • Ajout d’une balise “meta” dans le header des pages html pour désactiver les liens téléphonique sur iOS  #707

Core

  • Correction de la taille minimum du soulignement des liens sur Firefox  #615
  • Ouverture des disclosures (accordéon, onglet, modal) à partir des ancres dans l’URL, l’état disabled désactive l’ouverture.  #532
  • Correctif iOS de la prise de focus au clic  #691

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
  • 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

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
  • É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

Interrupteur - toggle

  • Ajout des variants d’interrupteur en erreur et valide
  • Retrait du css appearance 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

  • Retrait de l’icône native d’affichage du mot de passe sur edge  #669
  • Force l’état de la checkbox “afficher le mot de passe” en état par défaut, pour éviter qu’elle ne passe en erreur/succès  #667
  • Correction de l’accessibilité des messages d’erreur/succès  #694

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
  • 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
  • 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 (Changement destructif)  #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 (Changement destructif)  #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
  • 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

      #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