DSFR v1.13.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

• 🎉 Ajout de l’icône de Bluesky : bluesky-fill bluesky-line #1096
• 🎉 Ajout d’icônes d’editor et de partage #1110
  system:
  share (line/fill)
  share-forward (line/fill)
  Design:
  eraser (line/fill)
  Editor:
  strikethrough
  code-block
  align-center
  align-justify
  align-left
  align-right
  format-clear
  font-color
  indent-decrease
  indent-increase
  list-check
  text-direction-r
  underline

Core

• 🐛 Correctif de la fonctionnalité de remplissage des informations de fichier de téléchargement assess-file #1095
  • Ajouts de messages d'erreurs dans la console en fonction du type d'erreurs retourné par le fetch du fichier à télécharger
  • Si le fichier est inaccessible (erreur 500), la fonction assess-file retourne au moins l'extension du fichier.

Build

• 💫 Retrait de storybook dans la release #1088

🧩 Composants

Follow – Lettre d’information & réseaux sociaux

• 🎉 Ajout du réseau social Bluesky fr-btn--bluesky #1096

Form – Formulaire

• 🐛 Correction CSS des fieldset-inline@md et des tailles year, number, postal #1089

Input - Champ de saisie

• 🐛 Correction du focus du date-picker sur le champ de type date #1076

Modal - Modale

• 🐛 Correction du focus piégé et du blocage du scroll sur certains navigateurs lors du clic sur les liens d’évitement “menu” et “recherche” #1103
• 💫 Évolution de la modale permettant de décorréler la modale d’un bouton d’ouverture. Une modale peut maintenant être ouverte programmatiquement sans bouton d’ouverture. À la fermeture de la modale, le focus est redirigé vers sa position initiale avant ouverture, ou sur le lien du logo du header à défaut. #1103

Navigation – Navigation

• 💫 Fermeture des menus au clavier #1091
  • La touche Échap ferme le menu ouvert
  • Lorsque le focus sort du menu au TAB, ferme le menu ouvert

Select - Liste déroulante

• 💥 Retrait de l'attribut hidden sur la première option du select rendant la navigation au clavier impossible sur Firefox #1090

Share – Partage

• 🎉 Ajout du bouton de partage Bluesky fr-btn--bluesky #1096

Table – Tableau

• 🎉 Les cellules fixées sur la première colonne peuvent maintenant être fixées à partir d'un breakpoint. Ajout des classes fr-cell--fixed@[bp] (sm, md, lg) #1097

Tag – Tag

• 🐛 Correction du hover des tags sélectionnables désactivés #1058

Toggle – Interrupteur

• 🐛 Corrige la taille du focus pour que la hauteur du focus corresponde à la hauteur du bouton #1078

🔌 API JS

• 🐛 Plus d’envoi de l’événement dsfr.conceal au chargement du composant #1092
  • Pour les composants de type closure, l'événement de fermeture n'est plus lancé au chargement du composant (accordion, modal, etc), uniquement à la fermeture.

📖 Storybook

• 🐛 Correction de duplication d’id #1089
• 💫 Remplacement de stories de base par la story "default" #1089
• 🎉 Ajout de stories #1089
  • messages de formulaire
  • variantes esthetiques de la carte
  • variantes de taille des champs de saisie et formulaire
  • radio boutons
  • tags sm et md séparés
  • tuiles avec tag et badge
  • translate avec bouton sans contour
  • ajout de fichiers
  • modale de consentement
  • tooltip

DSFR v1.13.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

• 🎉 Ajout de storybook #945
  • ajout d'un package storybook dans /dsfr-sb
  • ajout de stories dans le dossier template de chaque composant
  • accès au storybook en local dans le dossier /storybook généré via la commande yarn build-storybook depuis le dossier /dsfr-sb
• ✨ Changement de structure #945
  • tous les dossiers de /src sont déplacés dans un sous-dossier dsfr
  • les dossiers module et i18n passent dans src
• 🐛 Correction des valeurs en dur dans les templates #945
• 🐛 Correction du nom du fichier utility.min.css dans le readme #1002
• ✨ Ajout du type button aux boutons par défaut #1005
  • Mise à jour des exemples des modèles de pages analytics et page de connexion
  • Mise à jour des snippets d'exemple des composants : accordéon, alerte, fil d'ariane, bouton, bouton France Connect, carte, gestionnaire de consentement, paramètres d'affichage, champ de saisie, lettre d'information, navigation principale, menu latéral, onglets, tag, tuile et transcription
  • Remplacement de l'attribut type par variant dans le template du Bouton France Connect et ajoute le type button par défaut

Core

• 🐛 Correction du retour du getter instance.node qui engendrait une boucle infinie #993
• 🐛 Ajout d'un overflow auto sur le collapse pour éviter le passage des menus sous des éléments survolés ou le texte surligné #1023

Build

• ✨ Mise à jour des dépendances
• ✨ Évolution de la version de BrowserSync dans le package.json, permettant l'utilisation d'une version plus récente. Et retrait de browserSync des peerDependencies #997
• Toute référence à polyfill-io a été retirée pour éviter une redirection vers ses noms de domaine qui ont été détournés #1038

Utility

• 🎉 Ajout des classes utilitaires de bordure (couleur et épaisseur) #1013
• 🎉 Ajout de pages d'exemples d'utilisation des classes utilitaires de background, de texte et de bordure #1013

🧩 Composants

Accordion - Accordéon

• 🐛 Correction lorsque tous les disclosures d'un groupe avec l'attribut group="false" sont ouverts au chargement #1032

Radio rich - Bouton radio riche

• ✨ Modification du bouton radio pour une version compacte du radio riche sans pictogramme #1047

Form – Formulaire

• ✨ Ajout de la classe fr-message--warning et ajout d'exemples de messages dans la page d'exemple formulaire #1015

Header – En-tête

• 🐛 Correction du focus croppé sur le header en mobile #1008
• 🐛 Permet la duplication des attributs aria dans le menu mobile des accès rapides #976
• 🐛 Retrait des sélecteurs d'enfants directs “>” pour éviter les problèmes lors de l'ajout de balises intermédiaires (cas de création de sous-composants) #1049

Link – Lien

• 🐛 Correction de l'alignement vertical de l'icône du lien de fermeture déprécié (maintenant btn-close) #1007

Modal – Modale

• 🐛 Correction d'une erreur js liée au focus trap lorsqu'un champ de saisie n'a pas d'attribut "type" dans une modale #992
• 🐛 Passage du footer de la modale au niveau de z-index "overlap-above" permettant d'être au dessus du tooltip #1000
• 🐛 En desktop, lorsque les modales de menu et recherche sont désactivées, les attributs aria-label et aria-labelledby sont retirés #1018

Notice – Bandeau d’information importante

• 🐛 Correction du style du titre du bandeau lors de l'utilisation d'un niveau d'entête hx à la place de la balise p #1003
• ✨ Changement de l'icône par défaut du bandeau d'alerte météo rouge #1004
• 🐛 Retrait du padding à droite du bandeau lorsqu'il n'y a pas de bouton de fermeture #1019

Onglet - Tab

• 🐛 Correction de l'ombre au scroll en direction RTL #1051

Pagination – Pagination

• 🐛 Retrait du lien sur les points de suspension de la pagination #1001

Range - Curseur

• 🐛 Amélioration du design du curseur en mode couleurs forcées #1011
• 🐛 Le composant est mis à jour graphiquement au changement de value des inputs en js, et ajout d'un accesseur "value" dans l'api du range #1025

Select – Liste déroulante

• 🐛 Correction de l'opacité du texte des listes déroulantes (select) désactivées #996

Sidemenu – Menu latéral

• 🐛 Correction du focus croppé sur la navigation latérale en mobile et sur la variante sticky

Table - Tableau

• 🐛 💥 Remplacement de l'attribut aria-sorting par aria-sort sur les boutons de tri avec comme valeurs descending et ascending et mise à jour de la page d'exemple des tableaux #1030
• 🐛 Correction de la bordure lorsqu'un rowspan est en dernière position #1041
• ✨ La sélection de ligne du tableau est implémentée via l'attribut data-fr-row-select="true" sur la case à cocher, le fonctionnement via l'attribut name="row-select" est déprécié #1053

Toggle – Interrupteur

• 🐛 Correction des espacements des groupes d'interrupteurs dépréciés #1006

Tooltip - Infobulle

• 🐛 Correction du positionnement du tooltip dans un élément possédant une propriété css “filter” (modal, header). Gestion du placement en position “absolute” plutôt que “fixed” #1010

🔌 API JS

• ✨ Ajout des événements suivant dans l’API : #1012

  Sur l’élément root (documentElement) :

  • dsfr.ready : lorsque le js est chargé
  • dsfr.start : au démarrage du moteur js du dsfr
  • dsfr.stop : à l'arrêt du moteur js du dsfr
  • dsfr.render : lors du rendu d'une instance
  • dsfr.resize : lors du changement de taille du viewport
  • dsfr.scroll-lock : au blocage du scroll
  • dsfr.scroll-unlock : au déblocage du scroll
  • dsfr.scheme : au chargement et changement du scheme (dark, light, auto)
  • dsfr.theme : au chargement et changement du theme (light, dark)

  Au niveau des instances, et remontés aux parents jusqu'au documentElement :

  • dsfr.click : au click sur un bouton
  • dsfr.disclose : à l'ouverture d'un disclosure
  • dsfr.conceal : à la fermeture d'un disclosure
  • dsfr.current : retourne l'élément ouvert d'un groupe de disclosure (accordions, tabs, etc.)
  • dsfr.dismiss : à la fermeture d'un tag supprimable
  • dsfr.toggle : au cochage d'un tag sélectionnable
  • dsfr.show : à l'affichage d'un tooltip
  • dsfr.hide : lorsque le tooltip est masqué

🔌 Analytics

• 🐛 Correction des collectes d'actions des pages d'exemples react et vue, le dsfr en manuel n'était pas lancé #995
• 🐛 Correction de la valeur, si non renseignée, du paramètre page.path dans la documentation analytics #998
• 🐛 Correction d'éléments manquants ou mal écrits dans la documentation analytics #1043
• ✨ La propriété isActionEnabled peut maintenant prendre la valeur reduce pour limiter la création d'instance de tracking aux éléments comportant l'attribut data-fr-analytics-action #1055

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