Général

La version 1.13.1 est disponible depuis le 26 mars 2025.

La version 1.13.0 est disponible depuis le 04 décembre 2024.
Code en version 1.13.0

La version 1.13 met à disposition l'intégralité de nos composants sur Storybook.

Elle apporte également une nouvelle page à nos fondamentaux pour mieux vous accompagner dans l'utilisation du DSFR ainsi que la zone d'expression visuelle comme guide pour enrichir vos maquettes.

Nous publions en même temps une extension au DSFR pour gérer le sens de lecture de droite à gauche pour les sites et langages qui le nécessitent. 

Enfin nous ajoutons une nouvelle variation au bouton radio riche qui peut désormais s'utiliser sans pictogramme et tous les correctifs listés ci-dessous.

Librairies Figma

🧩 Composants

Barre de recherche

• ✨  Ajout d’une version en état rempli.

Bouton radio riche

• ✨  Bouton radio riche sans pictogramme.

📁 Blocs fonctionnels

Nom et Prénom

• 🐛  Correction de la taille des champs de saisi et du message d’erreur.

Téléphone

• 🐛  Correction du message d’erreur.

Adresse électronique

• 🐛  Correction du message d’erreur.

Date unique

• 🐛  Correction de la taille des champs de saisie et du message d’erreur.

📝 Modèles

Page d’erreur 404

• 🐛  Correction de l’en-tête dans les versions “sans recherche”.

Page de connexion

• 🐛  Correction du texte saisi dans les champs.

Code V1.13.1

🎨 Fondamentaux

Global

• 🎉 Ajout de l’icône de Bluesky : bluesky-fill bluesky-line #1096
• 🎉 Ajout d’icônes d’editor et de partage #1110system:share (line/fill)share-forward (line/fill)Design:eraser (line/fill)Editor:strikethroughcode-blockalign-centeralign-justifyalign-leftalign-rightformat-clearfont-colorindent-decreaseindent-increaselist-checktext-direction-runderline

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

Code v1.13

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

Bouton radio riche - radio rich

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