Note de version 1.11

Général

La version 1.11.2 est disponible depuis le 4 mars 2024

Code en version 1.11.2

La version 1.11.1 est disponible depuis le 31 janvier 2024

Code en version 1.11.1

La version 1.11.0 est disponible depuis le 11 décembre 2023

Code en version 1.11.0

Nouveautés

Ajout du composant Curseur - Range

Ajout du composant Contrôle segmenté - Segmented control

Évolutions

Mise à disposition de l’icône twitter-x. Note : l’ancienne icône twitter reste disponible dans la librairie des icônes du DSFR.

Librairie Sketch, v1.11.0

Information

Dépréciation progressive de Sketch

Cette version amorce la dépréciation de la librairie DSFR sur Sketch. Celle-ci sera maintenue pour les prochaines versions, mais seuls les correctifs y seront apportés. Les prochains composants seront disponibles sur Figma uniquement.

Fondamentaux

Couleurs

  • Ajout des tokens de décision (layer-style) de fond ($background) :
    • $background-action-high-blue-france-hover
    • $background-action-high-blue-france-active
    • $background-action-low-blue-france-hover
    • $background-action-low-blue-france-active
    • $background-open-blue-france-hover
    • $background-open-blue-france-active
    • $background-default-grey-hover
    • $background-default-grey-active
    • $background-alt-grey-hover
    • $background-alt-grey-active
    • $background-transparent
    • $background-transparent-active
    • $background-transparent-hover

Styles de texte

  • Correction des tokens de couleurs sur les styles de texte - 4. Composants - Bouton radio - Case à cocher, Champ de saisi et Interrupteur :
    • Icône (si cliquable) : $text-action-high-grey
    • Icône (non cliquable) : $text-label-grey
    • Placeholder : $text-mention-grey
    • Label (titre) : $text-label-grey
    • Texte (saisi) : $text-default-grey

Information

Ces styles sont automatiquement mis à jour pour les éléments de formulaire inclus aux composants : Bouton radio riche, Liste déroulante, Barre de recherche, Lettre d’information et réseaux sociaux (formulaire).

Icônes

Ajout des icônes twitter-x-fill et twitter-x-line dans la bibliothèque Logos

Composants

Bouton radio

  • Correction des tokens de couleurs sur le bouton radio :
    • Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
    • Décoché : contour en $border-action-high-blue-france.

Bouton radio riche

  • Correction des tokens de couleurs sur le bouton radio :
    • Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
    • Décoché : contour en $border-action-high-blue-france.

Case à cocher

  • Correction des tokens de couleurs sur la case à cocher :
    • Coché : fond en $background-active-blue-france.
    • Décoché : contour en $border-action-high-blue-france.

Champ de saisie

  • Correction des tokens de couleurs sur les textes :
    • Icône (si cliquable) : $text-action-high-grey
    • Icône (non cliquable) : $text-label-grey
    • Placeholder : $text-mention-grey
    • Label (titre) : $text-label-grey
    • Texte (saisi) : $text-default-grey

Contrôle segmenté

  • Ajout du composant contrôle segmenté en tailles SM et MD :
    • Texte seul, avec icône
    • Défaut, sélectionné
    • Horizontal, Vertical (mobile)
  • Ajout des états Défaut, Désactivé, Survol, Focus et Cliqué.
  • Ajout des variantes avec légende verticale et horizontale.
  • Ajout des variantes avec texte de description optionnel.

Curseur

  • Ajout du composant curseur en tailles SM et MD :
    • Cranté : 4 crans et 10 crans (à personnaliser selon l’utilisation)
    • Simple : 4 étapes et 10 étapes (à personnaliser selon l’utilisation)
    • Double : Avec deux poignées.
  • Ajout des états Défaut, Désactivé, Focus, Erreur et Valide.
  • Ajout des variantes avec valeurs et sans valeurs.
  • Ajout des variantes avec texte de description optionnel.

En-tête

  • DESKTOP Ajustement de l’espacement interne du bloc marque à 16px.
  • DESKTOP Ajustement de l’espacement du haut et du bas à 24px.
  • DESKTOP MOBILE Ajustement du format sur le logo opérateur au ratio 16/9 et de son espacement du bloc marque.
  • MOBILE Ajout de la bordure du bouton tertiaire du menu (burger).
  • MOBILE Modification du token de couleur du bouton de recherche et du bouton de menu (burger) en $text-action-high-blue-france.
  • MOBILE Ajustement de l’espacement à 16px entre le bouton de recherche et le bouton de menu (burger).

Fil d’Ariane

DESKTOP MOBILE Modification de la taille de la police du label des items à 12px.

Gestionnaire de consentement

Modale de gestion : modification du token de couleur du lien “Voir plus / moins de détails” en $text-action-high-blue-france et suppression du soulignement.

Image d’en-tête [Bêta]

Suppression du composant.

Interrupteur

  • Ajustement de l’espacement entre le séparateur du bas et le contenu du haut à 16px au lieu de 8px. Cela concerne les items avec statut (désactivé - activé).
  • Correction des tokens de couleurs sur le bouton interrupteur :
    • Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
    • Décoché : contour en $border-action-high-blue-france.

Indicateur d'étapes

Ajustement de l’espacement à 8px entre les crans d'étapes.

Lettre d’information et réseaux sociaux

  • Ajout d'une variation Erreur du formulaire.
  • Ajout d'une variation Valide du formulaire pour la confirmation d'inscription.
  • MOBILE Correction de la taille du texte “Dans cette rubrique” à 16px au lieu de 14px.
  • MOBILE Modification de la graisse du texte “Dans cette rubrique” en médium.

Mise en exergue

MOBILE Ajustement de la taille du composant (SM, MD et LG) à 288px au lieu de 320px.

DESKTOP Mégamenu : ajustement de l’espacement interne des items de lien et catégorie à 16px gauche et droite et à 12px haut et bas.

Paramètre d’affichage

  • DESKTOP Ajout du bouton item “Paramètres d’affichage” à ajouter dans les liens d’accès rapide depuis le composant en-tête.
  • MOBILE Ajout du bouton item “Paramètres d’affichage” à ajouter dans les liens d’accès rapide depuis le composant navigation principale mobile.

Partage

Mise à jour de l’icône Twitter par l’icône X.

Pied de page

  • DESKTOP MOBILE Modification du token de couleur des liens de navigation (sur fond gris) en $text-defaut-grey
  • DESKTOP MOBILE Ajustement de l’espacement du bloc marque.
  • DESKTOP Ajustement de l’espacement du haut (séparateur inclus) à 32px et celui du bas à 24px sur le composant de base.
  • DESKTOP MOBILE Ajustement du format sur le logo opérateur au ratio 16/9 et de son espacement du bloc marque.
  • DESKTOP MOBILE Correction du texte de description optionnel qui doit faire trois lignes maximum au format desktop.
  • MOBILE Correction de l’espacement à 16px sous les liens obligatoires (références écosystème).
  • MOBILE Correction de l’espacement à 24px entre chaque dernier “Lien de navigation” et “Nom de catégorie”.
  • MOBILE Ajustement de l’espacement à 32px entre le premier logo partenaire et les suivants, espacement à 16px entre chaque autre logo partenaire, espacement à 24px à la fin du dernier logo partenaire.
  • DESKTOP Ajustement de l’espacement à 16px en-dessous des logos partenaires.
  • DESKTOP MOBILE Ajout du bouton Paramètres d’affichage (optionnel) à la suite des liens de mentions obligatoires.

Sommaire

  • DESKTOP MOBILE Modification du token de couleur des liens (ancres) en $text-action-high-grey.
  • DESKTOP MOBILE Ajouter d’un item de sous-liste “Ancre imbriquée”.
  • DESKTOP MOBILE Modification de l’aspect survol avec l’ajout d’un item Survol pour l’ancre par défaut et l’ancre imbriquée. Le fond est remplacé par un soulignement sous le label.
  • DESKTOP MOBILE Modification de la graisse des numéros de liste en bold au lieu de regular.

Modèles

Page article [Bêta]

Suppression du modèle.

Création de compte

MOBILE Modification de l’ordre des boutons d’action, Valider et Précédent.

Librairie Figma, v1.11.0

Fondamentaux

Couleurs

  • Ajout des tokens d’options (color-style) Illustration dans les dossiers :
    • LIGHT $color-main, $color-975 : Hover et Active.
    • DARK $color-main, $color-75 : Hover et Active.
  • Correction des tokens de décisions (color-style) Artwork ($artwork) :
    • LIGHT $artwork-decorative-blue-france : $blue-france-950.
    • DARK $artwork-decorative-blue-france : $blue-france-100.
  • Ajout / Correction des tokens de décisions (color-style) Border ($border) :
    • LIGHT $border-action-low-blue-france : $blue-france-850.
    • DARK $border-action-low-blue-france : $blue-france-200.
  • Ajout des tokens de décisions (color-style) de fond ($background) :
    • $background-action-high-blue-france-hover
    • $background-action-high-blue-france-active
    • $background-action-low-blue-france-hover
    • $background-action-low-blue-france-active
    • $background-open-blue-france-hover
    • $background-open-blue-france-active
    • $background-default-grey-hover
    • $background-default-grey-active
    • $background-alt-grey-hover
    • $background-alt-grey-active
    • $background-transparent
    • $background-transparent-active
    • $background-transparent-hover

Styles de texte

  • Correction des tokens de couleurs sur les styles de texte - 4. Composants - Bouton radio - Case à cocher, Champ de saisi et Interrupteur :
    • Icône (si cliquable) : $text-action-high-grey
    • Icône (non cliquable) : $text-label-grey
    • Placeholder : $text-mention-grey
    • Label (titre) : $text-label-grey
    • Texte (saisi) : $text-default-grey

Information

Ces styles sont automatiquement mis à jour pour les éléments de formulaire inclus aux composants : Bouton radio riche, Liste déroulante, Barre de recherche, Lettre d’information et réseaux sociaux (formulaire).

Séparateur

  • Déplacement du composant Séparateur (horizontal et vertical) depuis le fichier DSFR - Composants vers le fichier DSFR - Fondamentaux.

Icônes

  • Déplacement du composant Icônes (taille XS, SM, MD et LG) depuis le fichier DSFR - Composants vers le fichier DSFR - Fondamentaux.

Composants

Bouton radio

  • Correction des tokens de couleurs sur le bouton radio :
    • Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
    • Décoché : contour en $border-action-high-blue-france.

Bouton radio riche

  • Correction des tokens de couleurs sur le bouton radio :
    • Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
    • Décoché : contour en $border-action-high-blue-france.

Case à cocher

  • Correction des tokens de couleurs sur la case à cocher :
    • Coché : fond en $background-active-blue-france.
    • Décoché : contour en $border-action-high-blue-france.

Champ de saisie

  • Correction des tokens de couleurs sur les textes :
    • Icône (si cliquable) : $text-action-high-grey
    • Icône (non cliquable) : $text-label-grey
    • Placeholder : $text-mention-grey
    • Label (titre) : $text-label-grey
    • Texte (saisi) : $text-default-grey

Information

Les icônes à l’intérieur des champs de saisie se sont possiblement cachées

Contrôle segmenté

  • Ajout du composant contrôle segmenté en tailles SM et MD :
    • Texte seul, avec icône
    • Défaut, sélectionné
    • Horizontal, Vertical (mobile)
  • Ajout des états Défaut, Désactivé, Survol, Focus et Cliqué.
  • Ajout des variantes avec légende verticale et horizontale.
  • Ajout des variantes avec texte de description optionnel.

Curseur

  • Ajout du composant curseur en tailles SM et MD :
    • Cranté : 4 crans et 10 crans (à personnaliser selon l’utilisation)
    • Simple : 4 étapes et 10 étapes (à personnaliser selon l’utilisation)
    • Double : Avec deux poignées.
  • Ajout des états Défaut, Désactivé, Focus, Erreur et Valide.
  • Ajout des variantes Avec valeurs et Sans valeurs.
  • Ajout des variantes avec texte de description optionnel.

En-tête

Changements destructifs

Liens à refaire pour les instances des composants En-tête.

  • DESKTOP Ajustement de l’espacement interne du bloc marque à 16px.
  • DESKTOP Ajustement de l’espacement du haut et du bas à 24px.
  • DESKTOP MOBILE Ajustement du format sur le logo opérateur au ratio 16/9 et de son espacement du bloc marque.
  • MOBILE Ajout de la bordure du bouton tertiaire du menu (burger).
  • MOBILE Modification du token de couleur du bouton de recherche et du bouton de menu (burger) en $text-action-high-blue-france.
  • MOBILE Ajustement de l’espacement à 16px entre le bouton de recherche et le bouton de menu (burger).

Formulaires

  • Suppression de la page Formulaires et migration des éléments de formulaire (titre de section, légende, label et message) vers la page du composant Champ de saisie.

Gestionnaire de consentement

  • Modale de gestion : modification du token de couleur du lien “Voir plus / moins de détails” en $text-action-high-blue-france et suppression du soulignement.

Image d’en-tête [Bêta]

  • Suppression du composant.

Indicateur d'étapes

  • Ajustement de l’espacement à 8px entre les formes (crans) d'étapes.

Interrupteur

  • Ajustement de l’espacement entre le séparateur du bas et le contenu du haut à 16px au lieu de 8px. Cela concerne les items avec statut (désactivé - activé).
  • Correction des tokens de couleurs sur le bouton interrupteur :
    • Coché : fond en $background-active-blue-france et contour en $border-active-blue-france.
    • Décoché : contour en $border-action-high-blue-france.

Lettre d’information et réseaux sociaux

Information

Changements destructifs

Liens à refaire sur le variant sans description du composant.

  • Ajout d'une variation Erreur du formulaire.
  • Ajout d'une variation Valide du formulaire pour la confirmation d'inscription.
  • MOBILE Correction de la taille du texte “Dans cette rubrique” à 16px au lieu de 14px.
  • MOBILE Modification de la graisse du texte “Dans cette rubrique” en médium.

Mise en exergue

  • MOBILE Ajustement de la taille du composant (SM, MD et LG) à 288px au lieu de 320px.
  • DESKTOP Mégamenu : ajustement de l’espacement interne des items de lien et catégorie à 16px gauche et droite et à 12px haut et bas.

Paramètres d’affichage

  • DESKTOP Ajout du bouton item “Paramètres d’affichage” à ajouter dans les liens d’accès rapide depuis le composant en-tête.
  • MOBILE Ajout du bouton item “Paramètres d’affichage” à ajouter dans les liens d’accès rapide depuis le composant navigation principale mobile.

Partage

  • Mise à jour de l’icône Twitter par l’icône X.

Pied de page

Information

Changements destructifs

Liens à refaire pour les instances du pied de page.

  • DESKTOP MOBILE Modification du token de couleur des liens de navigation (sur fond gris) en $text-defaut-grey
  • DESKTOP MOBILE Ajustement de l’espacement du bloc marque.
  • DESKTOP Ajustement de l’espacement du haut (séparateur inclus) à 32px et celui du bas à 24px sur le composant de base.
  • DESKTOP MOBILE Ajustement du format sur le logo opérateur au ratio 16/9 et de son espacement du bloc marque.
  • DESKTOP MOBILE Correction du texte de description optionnel qui doit faire trois lignes maximum au format desktop.
  • MOBILE Correction de l’espacement à 16px sous les liens obligatoires (références écosystème).
  • MOBILE Correction de l’espacement à 24px entre chaque dernier “Lien de navigation” et “Nom de catégorie”.
  • MOBILE Ajustement de l’espacement à 32px entre le premier logo partenaire et les suivants, espacement à 16px entre chaque autre logo partenaire, espacement à 24px à la fin du dernier logo partenaire.
  • DESKTOP Ajustement de l’espacement à 16px en-dessous des logos partenaires.
  • DESKTOP MOBILE Ajout du bouton Paramètres d’affichage (optionnel) à la suite des liens de mentions obligatoires.

Sommaire

  • DESKTOP MOBILE Modification du token de couleur des liens (ancres) en $text-action-high-grey.
  • DESKTOP MOBILE Correction du token de couleur de fond du composant en $background-contrast-grey.
  • DESKTOP MOBILE Ajouter d’un item de sous-liste “Imbriqué”.
  • DESKTOP MOBILE Modification de l’aspect survol avec l’ajout d’un item Survol pour l’ancre par défaut et l’ancre imbriquée. Le fond est remplacé par un soulignement sous le label.
  • DESKTOP MOBILE Modification de la graisse des numéros de liste en bold au lieu de regular.

Modèles

Page article [Bêta]

  • Suppression du modèle.

Création de compte

  • MOBILE Modification de l’ordre des boutons d’action, Valider et Précédent.

Code, v1.11.2

Fondamentaux

  • Ajout de la propriété overflow-wrap: world-break pour forcer le passage à la ligne des mots plus grands que leur conteneur #886

Composants

En-tête - header

  • Correction du focus caché sur le lien du bloc marque  #881
  • Correction d’une erreur js sur les liens d’accès rapide sans id # 893

Tag - tag

  • Correction du style au survol et au clic des tags cliquables # 887

Pied de page - footer

  • Retrait de l’icône “lien externe” sur les liens des logos en target="_blank" # 872

Analytics

  • Correction d’une erreur js liée à l'héritage de la fonction listenClick # 885
  • Correctifs dans la version standalone # 895
    • configuration appliquée au logging (verbose, production)
    • retrait de dépendances non requises
    • extraction de Modes du fichier de la class Options pour réduire les dépendances

Documentation

  • Ajout de la description des paramètres de configuration production et level dans la documentation de l’API JS
  • Ajout d’informations sur la configuration dans la doc analytics # 888
  • Ajout de documentation sur la version standalone des analytics concernant son installation et les fonctionnalités disponibles # 895

Code, v1.11.1

Fondamentaux

  • Retrait du tap highlight des éléments input, button, a, label, select, textarea sur IOS dans le reset du core # 846

Composants

Accordéon - accordion

  • Ajout d’un attribut data-fr-group="false" pour dissocier le comportement d'ouverture/fermeture des accordéons à l'intérieur d'un groupe d'accordéons # 860
  • Corrige le focus coupé lorsque l’on on remonte sur un accordéon précédent dans un groupe d'accordéon # 867

Alerte - alert

  • Ajout d’exemples d’alerte MD sans titre, et d’alerte SM avec titre # 853

Contenu média - content

  • Mise à jour des exemples # 866  :
    • ajoute une transcription à l'exemple de “Média image en svg, porteur d’information”
    • met à jour l'exemple de “Média image avec une transcription” avec une image porteuse de sens et renseigne la transcription correspondante

En-tête - header

  • Correction de la tailles des boutons d’accès rapide en mobile # 859
  • Retrait de l’attribut aria-haspopup="menu" sur le bouton burger du menu mobile # 856
  • Correction du focus coupé de la barre de recherche dans le header # 864
  • Correction de la duplication des collapses en accès rapide dans le menu mobile # 873

Infobulle - tooltiip

  • Ajout d'un fallback en linear-gradiant pour les navigateurs qui ne supportent pas le conic-gradiant (ex: firefox < 83) # 863

Liste déroulante - select

  • Correction de l'affichage du optgroup en italique sur firefox windows # 870
  • Correction d'un bug de fermeture au clic à l'extérieur du composant sur safari # 840
  • Correction d'un bug de fermeture d'un volet au clic sur un lien ou un bouton à l'intérieur du composant # 840

Pied de page - footer

  • Retrait de l’icône “lien externe” sur les liens des logos en target="_blank" # 872

Modèles

Connexion - login

  • Ajout de la description du bouton franceConnect # 855

Recover - récupération de mot de passe

  • Déplacement des exemples de récupération de mot de passe dans les modèles de page de connexion # 854

Analytics

  • Ajout de la propriété de site_version dans les données de mesure d'audience # 868

Documentation

  • Ajout d’une page sur ces utilitaires de masquage/affichage d'éléments.
  • Ajout d’informations sur les attributs data-fr-valid et data-fr-error des messages d’erreur/succès du composant Mot de passe

Code, v1.11.0

Fondamentaux

Global

  • Ajout des l’attributs rel="noopener external" et title="intitulé - nouvelle fenêtre" à tous les liens en target="_blank" (voir les liens externes sur : tile, card, link, notice, footer, quote) #737
  • Ajout de la balise meta format detection pour désactiver le style automatique des url, date, email, et tél sur IOS #833
    • ajouter dans le head : <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
  • Correctif lorsque la valeur de l'attribut [aria-current] est "false" (composants concernés : breadcrumb, navigation, pagination, sidemenu, translate) #747
  • Correction js sur les vielles versions de navigateurs : remplacement des selecteurs (.selecteurA, .selecteurB) par (.selecteurA)(.selecteurB) dans le js des composants : accordion, navigation, sidemenu, translate, transcription #786
  • Correction d'une erreur de javascript liée au dark mode sur scheme.js, pour la version 14 de Safari macOS et inférieur #796
  • Retrait du saut de ligne entre la balise <a> et son libellé dans les templates de link, tile, card, pour corriger l’ajout d’un espace entre le libellé du lien et l'icône #818
  • Ajout d'une feuille de style dist/dsfr.print.css à charger pour appliquer les règles d'impression du DSFR et ajout d’une classe utilitaire .fr-no-print pour retirer un élément de l'impression. #802
  • Mise à jour des dépendances npm #815

Core

  • Ajout du style par défaut des listes de description : dl dt dd #748
  • Mise à jour du lien vers la page Typographie du site de documentation #775
  • Retrait de la marge ‘top’ des paragraphes sur IE #825
  • Correction de l’ajout forcé de soulignement sur tous les liens et de l’alignement de l’icône des liens externes sur IE #825

Utility

  • Correction du contenu du svg de l'icone user-setting-line qui ne correspondait pas à la bonne icône → Penser à remplacer le svg user-setting-line.svg si le dossier "icons" a été dupliqué #797

Composants

Accordéon - accordion

Alerte - alert

  • Refactorisation de la bordure des alertes en background-image à la place de box-shadow #742

Bouton FranceConnect

  • Le bouton FranceConnect doit répondre aux critères d’accessibilité qui redéfinissent le letter-spacing et la taille de fonte #813
    • Passage des valeurs de tailles et d'espacements en 'em' pour les rendre relatives à la taille de fonte du bouton
    • Retrait du '+' de 'FranceConnect+' dans l'intitulé de fr-connect__brand. Celui-ci est désormais placé en contenu du pseudo-élément after du bouton

Bouton - button

  • Retire la marge négative sur le modifier .fr-btn--close et corrige l'impact sur les composants 'alert', 'navigation', et 'notice' #784

Carte - card

  • Corrige l'alignement du détail de la carte dans une grille de carte sur les anciennes version de safari macOS (inférieure à 14.0) #796
  • Correction du ratio d’image des cartes de téléchargement sur IE #825
  • Passage des tag/badge en taille md sur les cartes md #833

Case à cocher - checkbox

  • Il n’est plus obligatoire d’avoir une liste dans le figcaption de la citation #721
  • Changement de la couleur de la coche en $text-inverted-blue-france #762
  • Mise à jour du token de couleur des bordures #760
  • Correction de l'alignement de la case des cases à cocher sur IE #825

Champ de saisie - input

  • Corrige le token de couleur de l'intitulé et des icones dans les champs de saisie #740
  • Customisation de l'icône de suppression du champs de recherche sur chrome : close-circle-fill #740
  • Sur les champs de saisie avec icône le placement de l’icône passe à 16px du bord droit et ajustement du padding-right à 44px #766

Citation - quote

  • Augmentation de la marge droite de l'image en desktop #833

Contrôle segmenté - segmented

  • Ajout du composant contrôle segmenté #805

Curseur - range

  • Ajout du composant curseur #817

En-tête - header

  • Ajout d'exemples d’accès rapides #727
    • ajout des modifier de boutons fr-btn--tooltip, fr-btn--briefcase, fr-btn--team
    • ajout d'exemples avec un seul raccourcis (sans liste)
    • ajout exemple utilisateur connecté
  • Le token de couleur du titre de service passe en text-title-grey #745
  • Augmentation du z-index du header pour passer au dessus des cartes avec ombres, ajout du niveau d'élévation raised-over #830
  • Ajustements graphiques #791 :
    • change la couleur du menu burger en $action-high-bleu-france en mobile
    • passe l'écart entre bloc marque et logo opérateur à 32px et l'écart entre logo opérateur et nom du site à 32px
    • réduit la taille de la barre de recherche à 96v (24rem) au lieu de 25rem
    • bloque la taille du logo opérateur à 8rem max (144px)
    • passe la taille du texte de la tagline en sm (14px) au lieu de md
    • passe le bouton burger en tertiaire avec border

Fil d’Ariane - breadcrumb

  • Correction de la hauteur du composant fil d’arianne sur IE #825
  • Alignement vertical des chevrons du fil d'arianne #833

Formulaire - form

  • Correction de la largeur des classes fr-fieldset__content pour la version dépréciée #766
  • Le token de couleur de la légende du fieldset passe en en $text-label-grey à la place de $text-title-grey #783
  • Augmentation de la marge au dessus du message d'erreur sur checkbox, input, select (16px) #833
  • Le titre de la bannière devient un <h4> à la place d'un <p> dans la structure HTML du composant #719
  • Coche les cookies obligatoires par défaut #754
  • Extension de la zone de clic du lien “voir plus de detail” #754
  • Le token de couleur des titres de finalité passe en $text-title-grey #767
  • Ajustement de la marge droite des boutons radios "accepter" #768

Indicateur d'étape - stepper

  • Inversion de l'étape et du titre dans la structure html #724
  • Augmentation de l'épaisseur du stepper à 8px #833

Interrupteur - toggle

  • Utilisation du token de couleur $text-label-grey sur le label de l'interrupteur #771
  • Ajout de 4px de marge entre la coche et le texte “activer/désactiver” #771
  • Mise à jour du token de couleur des bordures #760
  • Augmentation de la largeur max du label, la marge de 10v passe à 8v #819
  • Correction de la taille de l'icône sur les tuiles md sans lien étendu #818
  • Retrait de l'icône arrow-right sur les tuiles sans lien étendu, pour être iso avec les cartes #818

Lettre d’information & réseaux sociaux - follow

  • Correction de la couleur de soulignement lorsque le champ newsletter de la lettre d'information est en erreur, en rouge et non en bleu #772
  • Sur les exemples "Lettre d'info seule" et "Réseaux sociaux et Lettre d'info mise en avant", place le bouton d'action dans un groupe de bouton fr-btns-group--inline-md pour que le bouton prenne l’ensemble de la largeur sur mobile #781
  • Inversion de l'ordre des boutons "Instagram" et "LinkedIn" #781
  • Mise en place de l'icône twitter-x par défaut #824
  • Suppression des marges négatives du groupe de boutons des réseaux sociaux #781
  • Masquage des liens d'évitement lors du rebond du scroll sur ios #749
  • L'écart entre les liens d'évitement passe à 16px (4v) #789
  • En desktop la marge en haut et en bas du composant passe à 12px (3v) #789

Liste déroulante - select

  • Ajout d'un example de select avec groupe d'options (optgroup) #734
  • Réduction de la taille de l’icône #736
  • correction de l’intitulé “Sélectionner une option” #736
  • Correction du token de couleur de l'intitulé du select #740
  • Passage de la couleur du logo en noir absolu en thème clair #738
    • ajout du token $text-black-white-grey correspondant au noir absolu #000 en thème clair et blanc absolu #fff en thème sombre
  • Retrait d'1v (4px) de padding à gauche et à droite sur fr-sidemenu__inner en desktop #793
  • Correction du token de couleur des liens du menu latéral en $text-action-high-grey #833

Mot de passe - password

  • Modification du token de couleur sur le label de la checkbox “afficher” en text-label-grey #750
  • Changement de l'icône de message d'information pour info-fill #832
  • Corrige le placement de la checkbox #832

Mise en avant - highlight

  • Refactorisation de la bordure en background-image à la place de box-shadow #746
  • Ajustement du padding à 5v en mobile et 9v en desktop #777

Mise en exergue - callout

  • Refactorisation de la bordure en background-image à la place de box-shadow #746

Modale - modal

  • Retrait de la liste <ul><li> dans la structure HTML de la zone d'action (modale avec footer) #720
  • Suppression de la classe fr-mb-4v de la colonne entourant le fr-mega-menu__leader #785
  • Ajout d'un margin-top: -1.25rem (-20px) sur le fr-mega-menu__leader #785
  • Passage du texte de description et le lien du fr-mega-menu__leader en taille sm #785
  • Passage du bouton de navigation en $text-action-high-blue-france à l'ouverture #785

Pagination - pagination

  • Correction des icônes prev/next de la pagination sur IE #825

Partage - share

  • Le token de couleur du texte lorsque les cookies sont désactivés passe en $text-mention-grey #778
  • Mise en place de l'icône twitter-x par défaut #824

Pied de page - footer

  • Ajustements tailles et espacement #792
    • corrige le niveau de titre des partenaires (h2 à la place de h4 par défaut)
    • le texte de description fr-footer__content-desc doit faire maximum 3 lignes en desktop
    • passe les liens fr-footer__content-link en $text-default-grey
    • passe le padding top de fr-footer__bottom-list à 4v
    • correction des espacements autour de fr-footer-body : en mobile et en desktop (32px en haut et 24px en bas)
    • titre “nos partenaire“ → fr-footer__partners-title passe en graisse régular, couleur text-default-grey
    • écart de 12px sous “Nos partenaire” en mobile/desktop
    • enlève le padding sur fr-footer__partners fr-footer__logo, ajoute une border 1px en $border-default-grey + un background en background-default-grey
    • en desktop l’écart entre logo opérateur et bloc marque passe à 32px
    • passe le logo opérateur en ratio 16x9 dans les exemples
    • ajoute un margin bottom négatif de 8px sur le groupe de lien pour garder 24px en dessous
    • retire le padding sur les images des logos partenaires
    • passe à 16px entre les logos partenaires secondaires
    • corrige l’alignement du logo partenaire principal, lorsque qu’il n’y a pas de logo partenaires secondaires
    • corrige alignement des liens en bas du footer

Radio bouton - radio

  • Mise à jour du token de couleur des bordures #760

Sélecteur de langue - translate

  • Passage en bleu du bouton d'ouverture du sélecteur de langue en mobile #833

Sommaire - summary

  • Ajout d'un padding-left de 8px pour aligner le titre avec le premier élément de la liste #779

Tag - tag

  • Utilisation du token $text-inverted-blue-france sur la couleur du texte des tags sélectionnables et supprimables à la place de $text-inverted-grey #780
  • Remplacement du token de couleur de fond des tags sélectionnables par $background-active-blue-france au lieu de $background-action-high-blue-france #780
  • Correction des couleurs du tag désactivé sur IE #825
  • Correction du token des tags désactivés #833

Téléchargement de fichier - download (déprécié)

  • Correction de la taille de l'icône du download--card #788

Modèles

Nom - name

  • Les boutons d'ajout et de suppression de prénom passent en secondaire à la place de tertiaire #773
    • Utiliser la classe fr-btn--secondary à la place de fr-btn--tertiary

Connexion - login

  • Correction d’espacements #759
    • corrige l'espace en trop entre le lien "Mot de passe oublié ?" et la checkbox "Se souvenir de moi"
    • ajoute une marge supplémentaire sous l’alerte d’erreur

Enregistrement - register

  • Correction de l'alignement des boutons #726 :
    • en mobile, les boutons sont alignés l’un au dessus de l’autre, bouton primaire en premier → Ajouter la classe : fr-btns-group--inline-reverse
    • en desktop, les boutons sont alignés à droite, bouton primaire à droite → Modier la classe : fr-btns-group--inline en fr-btns-group--inline-sm

Erreur 404 - unexpected

  • Inverse le texte principal et le texte de description du model de page #723

Erreur 500 - unavailable

  • Changement de la couleur de fond de page pour du $background-alt-blue-france #787
  • Remplacement de l'image décorative par un SVG #787

Analytics

  • Correction de la fonction dispose sur Instance pour enlever les écouteurs sur la modification du hash de l'url #816
  • Ajout de la propriété isActionEnabled dans la configuration et sur l'objet window.dsfr.analytics permettant d'activer l'envoi des données d'actions si nécessaire. #812
  • Ajout de l'attribut data-fr-analytics-action permettant d'activer l'envoi d'action sur un élément particulier et de spécifier la partie title de l'actionName envoyé #812
  • Correctif sur les sélecteurs des card, title pour traquer des boutons #812

Documentation

  • Mise à jour des liens vers la documentation dans les pages d’exemple des composants #822

Readme

  • Correction d'espacements et de fautes de frappe #774
  • Précision de l'interdiction d'utilisation "pour des sites web ou des applications", sans interdire d'utiliser le DSFR pour créer, par exemple, un système de design entièrement différent (d'où l'intérêt de la licence libre). #774
  • Correction du lien vers la documentation des icônes #804

CGU

  • Ajout de "www" dans l'url du site de documentation #799

Contributing

  • Ajout du formatage shell pour les snippets de code et correction de fautes d'ortographe