Skip to content

DSFR v1.13.0

Latest
Compare
Choose a tag to compare
@keryanS keryanS released this 04 Dec 14:01
0509e56

🎉 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