🎉 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 commandeyarn build-storybook
depuis le dossier/dsfr-sb
- ajout d'un package storybook dans
- ✨ Changement de structure #945
- tous les dossiers de
/src
sont déplacés dans un sous-dossierdsfr
- les dossiers
module
eti18n
passent danssrc
- tous les dossiers de
- 🐛 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
parvariant
dans le template du Bouton France Connect et ajoute le typebutton
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
pararia-sort
sur les boutons de tri avec comme valeursdescending
etascending
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'attributdata-fr-analytics-action
#1055