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