DSFR v1.12.1

🎉 AJOUT, ✨ ÉVOLUTION, 🐛 CORRECTIF, 🚫 SUPPRESSION
💥 BREAKING CHANGE : les changements de la structure HTML sont indiqués par cette icône, en gras, et souligné

🎨 Fondamentaux

Global

• ✨💥 Evolution de la structure des pictogrammes pour corriger la régression amenée par la version M156 de Chrome #971
  • Prévoir de récupérer les pictogrammes s’ils sont copiés/collés depuis le dist/

Build

• 🎉 Ajout d’un script pour transformer vos pictogrammes avec la nouvelle structure

  • Sur le projet github (voir doc contributing.md) une commande permet de lancer ce script

  yarn pictogram-converter -p 'chemin/relatif/vers/le/dossier/de/vos/pictos'

🧩 Composants

Tableau - table

• Correctif sur le tableau #969
  • déplacement des bordures des tableaux déprécies sur les thead et tbody
  • retrait des selecteurs css :has, support trop récent

DSFR v1.12.0

🎉 AJOUT, ✨ ÉVOLUTION, 🐛 CORRECTIF, 🚫 SUPPRESSION
💥 BREAKING CHANGE : les changements de la structure HTML sont indiqués par cette icône, en gras, et souligné

🎨 Fondamentaux

Global

• 🎉 Gestion des préférences utilisateurs de contrastes et d’animations #929
  • Mode haut contraste (couleurs forcées) : l’ensemble des composants ont été revu pour une utilisation avec un thème contrasté (Windows High Contrast mode)
  • Animations désactivées : les animations sur les composants sont désactivées lorsque l’option “reduce motion” est active
• 🐛 Correction du centrage des container-sm/md/lg/xl #916
• 🎉 Ajout d’icônes #956 #946 #929 #911
• 🎉 Ajout des tokens de couleur $background-action-high-grey et $border-contrast-grey #911 #917

Pictogramme

• 🎉  Ajout du pictogramme digital/in-progress #918

Build

• ✨ Lors de l'exécution de la commande yarn build, les fichiers de configuration sont créés s'ils n'existaient pas #908
• ✨ Ajout de browser-sync en tant que peerDependencies dans le package.json #908

🧩 Composants

Bandeau d’information importante - notice

• 🎉 Ajout de variations de bandeaux d'information importante #917
  • 2 niveaux génériques supplémentaires (avertissement et alerte)
  • 3 bandeaux d'alertes (attentat, appel à témoins, cyber-attaque)
  • 3 bandeaux vigilance météo (orange, rouge, violette)
• 💥 Changement de la structure html permettant l’ajout d’un titre, une description, et un lien #917

Carte - card

• ✨ Ajout d'une classe utilitaire enlarge-button utilisée sur les cartes et les tuiles de téléchargement pour élargir la zone de clique à tout le composant quand l'élément cliquable est un bouton #943 #951
• ✨ Mise à jour de la taille des images d’exemples de carte "Image et ratio" #938

Contenu média - content

• ✨ Le composant fr-transcription n’est plus placé dans mais après la balise <figure> fr-content-media (la rétrocompatibilité de la structure précédente est conservée mais dépréciée) #932
  • ♿️ ajoute un attribut alt sur l'exemple "Média image avec une transcription" mentionnant la transcription située en dessous du composant Média
  • ♿️ ajoute un attribut title sur les exemples de "Média video" mentionnant la transcription située en dessous du composant Média

Citation - quote

• 🐛 Ajout de la propriété object-fit: cover sur l'image de citation pour conserver le ratio de l'image lorsqu'elle n'est pas carrée. Dans la mesure du possible, privilégiez un ratio d'image carré pour un meilleur support navigateur. #912

Curseur - range

• 🐛 Correction de la boucle infinie faisant crash la page #931
• 🐛 Correction du style du curseur avec étape désactivé, et ajout d’exemples de curseurs désactivés #931
• 🐛 Correction de la modification de valeur du deuxième input lorsque le min dépasse le max ou l'inverse sur le curseur double #931

En-tête - header

• 🐛 Réduction de la zone de clic du lien du service, ou du logo, élargie en mobile. La zone à droite du logo et à droite du service n’est plus cliquable évitant les clics non désirés #944

Fil d’arianne - breadcrumb

• 🐛 Correction de l'alignement vertical des icônes de chevron sur tout les navigateurs (bug sur Safari 17) #933

Interrupteur - toggle

• ✨💥 Ajout de la bordure colorée à gauche de l’interrupteur en état d’erreur/succès. Attention : Les marges avant et après le composant ont été retirées, possible ajustement des espacements à prévoir #954
• 🐛 Correction du retour à la ligne sur le label "activé/désactivé” #928

Pied de page - footer

• ✨💥 Change l'ordre des liens, et gouvernement.fr devient info.gouv.fr #905
• 🐛 Remplacement de l'intitulé par défaut "[A modifier]" de l'attribut title par l'intitulé officiel sur les liens obligatoires du footer. #905
• 🐛 Réduction de la zone de clic du logo en mobile, elle n’est plus étendue sur toute la largeur #944

Tableau - table

• ✨💥 Evolution du tableau permettant l’ajout de données complexes, d’utilitaires de placement, de bouton de tri, de coche de sélection de ligne (la rétrocompatibilité de la structure précédente est conservée mais dépréciée) #911

Tuile - tile

• ✨ Ajout d'une classe utilitaire enlarge-button utilisée sur les cartes et les tuiles de téléchargement pour élargir la zone de clique à tout le composant quand l'élément cliquable est un bouton #943 #951

🔌 Analytics

• 🎉 Ajout de la possibilité de bloquer une action particulière avec l'attribut et la valeur data-fr-analytics-action="false" quand l'envoi des actions est activé au global #937
• 🎉 Ajout de marquage sur le lien des bandeaux d’information importante #917

DSFR v1.11.2

🎉 AJOUT, ✨ ÉVOLUTION, 🐛 CORRECTIF, 🚫 SUPPRESSION
💥 BREAKING CHANGE : les changements de la structure HTML sont indiqués par cette icône et un soulignement

🎨 Fondamentaux

Core

🎉 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

Tag - tag

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

🔌 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

🐛 Correction d’une erreur js sur IE liée au selecteur de translate #899

DSFR v1.11.1

🎉 AJOUT, ✨ ÉVOLUTION, 🐛 CORRECTIF, 🚫 SUPPRESSION
💥 BREAKING CHANGE : les changements de la structure HTML sont indiqués par cette icône et un soulignement

🎨 Fondamentaux

Core

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

Navigation - navigation

🐛 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

DSFR v1.11.0

🎉 AJOUT, ✨ ÉVOLUTION, 🐛 CORRECTIF, 🚫 SUPPRESSION
💥 BREAKING CHANGE : les changements de la structure HTML sont indiqués par cette icône et un soulignement

🎨 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 :not(.selecteurA, .selecteurB) par :not(.selecteurA):not(.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 france connect

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

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

• ✨ Il n’est plus obligatoire d’avoir une liste dans le figcaption de la citation #721
• ✨ 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’arianne - 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

Gestionnaire de consentement - consent

• 🐛💥 Le titre de la baniè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

Liens d'évitement - skiplink

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

Logo - logo

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

Menu latéral - sidemenu

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

Navigation - navigation

• 🐛💥 Suppression de la classe fr-mb-4v de la colonne entourant le fr-mega-menu__leader #785
• 🐛 Ajout d'un margin-top: ...

DSFR v1.9.4

🔌 Analytics

Important
La propriété de configuration enableRating, présente depuis la 1.9.2, entraîne des envois de données très 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

DSFR v1.10.2

🔌 Analytics

Important
La propriété de configuration enableRating, présente depuis la 1.9.2, entraîne des envois de données très 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

DSFR v1.10.1

🎨 Fondamentaux

Utility

• 🎉 Ajout des icones :
  • 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 validation du CSS (variable #color2 non remplacée) #725

Lettre d’information & réseaux sociaux - follow

• 🎉 Ajout de la possibilité d’utiliser une classe utilitaire pour utiliser une icone 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

Lien - link

• 🛠️ 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'icone des tuiles avec liens externes (target=”_blank”) #753

DSFR v1.10.0

NB : Les changements de la structure HTML sont indiqués par un soulignement

🎨 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

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

Carte - card

• 🎉 Ajout d’une version sans lien (en noir)

• 🛠️ Ajout de l’icône “lien externe” à la fin du titre dans le cas de lien non étendu

• 🛠️ Correction des cartes sur IE11 #705

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)

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

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

• 🛠️ Correction du placement de l’icône credential permettant d’accéder au trousseau sur Safari #711

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

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

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

• ✨ 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 (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’ana...

DSFR v1.9.3

🎨 Fondamentaux

• ✨feat(*): nouvelle version interne du changelog #590

  • Outil en ligne de commande pour générer un journal des modifications CHANGELOG.md à partir des balises git et de l'historique des commits. Commande : yarn changelog

• 🛠️fix(button, theme): retrait de la propriété css “:where” #596

  • Le support de cette propriété CSS est encore trop récent.

Core

• 🛠️fix(core): La valeur no-wrap n’existe pas dans la spécification CSS #594
  • Correction d’une coquille dans le CSS de core

🧩 Composants

Fil d'Ariane - breadcrumb

• fix(breadcrumb): ajoute une page exemple alternative #600
  • étiquette d'élément span rendue possible sur l'élément courant du fil d'ariane
  • ajout d'une page d'exemple avec boutons

Modale - modal

• 🛠️fix(modal): correction ombre footer modal avec zone d’action #572
  • l’ombre au scroll est remplacée par une bordure plus discrète.

Mot de passe - password

• 🐛 fix(password, account): correction capslock et trousseau safari #503
  • Correction erreur js sur le champ password au clic sur le trousseau (safari)
  • Retrait icone native capslock safari
  • Ajout attribut autocapitalize='off' sur les champs password et email pour désactiver la majuscule au début (mobile)
  • Ajout attribut autocorrect sur les champs password et email pour désactiver la correction orthographique

🔌 Analytics

• 🛠️fix(analytics): Corrections diverses du package Analytics #596

  • Ajout de la récupération automatique de la pagination (voir page.md)
  • Correction action dynamique vide
  • Correction envoi data
  • Correction erreur querySelector dans la hiérarchie
  • Revue de la profondeur de la hiérarchie
  • Correction de la version standalone
  • Collection désynchronisée pour attendre l’initialisation
  • Correction du cycle de vie des instances et garbage collection
  • Ajout d’une fonctionnalité d’Opt-in/out (voir opt.md)
  • Ajout d’une page d’exemple en SPA sans framework
  • Ajout de la valeur dans le label au submit (button, input)
  • Ajustements component_value sur chaque composant

• 📝 doc(analytics): doc analytics en markdown #599

  • Réécriture de la documentation Analytics en markdown : analytics.md