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’analyse de hiérarchie qui ignorait les headings présents dans un composant

• 🛠️ Ajustements pages d’exemple

• ✨ Retrait des limitation de valeurs sur la propriété user.profile

• 🎉 Ajouts de propriétés dans la configuration de page

  • page_id
  • page_author
  • page_tags
  • page_date