Général

Nouveauté(s)

🎉 Ajout de l'API Analytics dans le cadre de la gestion de mesure d'audience au niveau interministériel pour les sites et applications de l'État

Librairie Sketch, v1.9.0

🎨 Fondamentaux

Pictogramme

🎉 Ajout des pictogrammes “Food”, “Grocery” et “House” dans la librairie "Système de Design de l'État · Pictogrammes"

Icône

🎉 Ajout des icônes “fr--equal-circle-fill”, “fr--arrow-right-down-circle-fill” et “fr--arrow-right-up-circle-fill” dans la partie “System” de la bibliothèque d’icônes

Style de texte

• ✨ Évolution des styles de texte des composants : 1) Accordéon, 4) Bouton radio - Case à cocher, 6) Champ de saisie, 7) Interrupteur et 15) Tuile [Bêta]
• 🎉 Ajout du style de texte du composant 5) Carte
• 🚫 Suppression des styles de texte 2. Titres de niveaux (H1,H2,H3,H4,H5,H6) de couleur Bleu France

🧩 Composants

Accordéon

• 🛠️ Changement de l’icône d’ouverture “add-line” par “arrow-down-s-ligne”
• 🛠️ Changement de l’icône de fermeture “substract-line” par “arrow-up-s-ligne”
• 🛠️ Ajustement de l’intitulé (label) en graisse medium
• 🛠️ Changement de couleur de l’intitulé (label) et de l’icône en $text-action-high-blue-france

Bouton radio

• 🛠️ Correction sur la couleur du contour de l'item (base) Défaut MD et SM en $border-action-high-blue-france
• 🛠️ Changement de la couleur du fond de l’item (base) en $background-default-grey
• 🎉 Ajout de l'item (base) en état Erreur MD et SM, avec couleur de contour du radio en $border-plain-error
• 🎉 Ajout de l'item (base) en état Valide MD et SM, avec couleur de contour du radio en $border-plain-error
• 🎉 Ajout des items de légende (base) en état Désactivé, Erreur et Valide
• 🛠️ Correction de l’espacement entre le bouton radio et son label à 8px

Bouton radio riche

• 🛠️ Correction sur la couleur du pictogramme en disabled-grey sur le bouton en état désactivé
• 🛠️ Ajustement de la taille de la zone du pictogramme à 56px
• 🎉 Ajout de l'état “Focus” du composant
• 🛠️ Correction sur la couleur du contour du radio en $border-action-high-blue-france
• 🛠️ Changement de la couleur du fond du radio riche en $background-default-grey
• 🛠️ Changement de la couleur de contour du bouton radio en $border-plain-error lorsqu’il y a une erreur
• 🛠️ Changement de la couleur de contour du bouton radio en $border-plain-success lorsqu’il y a une succès
• 🛠️ Correction de l’espacement entre le bouton radio SM et le label à 8px

Carte

✨ Changement de couleur des titres en $text-title-blue-france

Case à cocher

• 🛠️ Correction sur la couleur du contour de l'item (base) Défaut MD et SM en $border-action-high-blue-france
• 🛠️ Changement de la couleur du fond de l’item (base) Décoché - Défaut MD et SM en $background-default-grey
• 🎉 Ajout de l'item (base) en état Erreur MD et SM, avec couleur de contour en $border-plain-error
• 🎉 Ajout de l'item (base) en état Valide MD et SM, avec couleur de contour en $border-plain-error
• 🎉 Ajout des items de légende (base) en état Désactivé, Erreur et Valide
• 🛠️ Correction de l’espacement entre la case à cocher et son label à 8px

Contenu média

• 🛠️ Bloc de transcription : Changement de l’icône d’ouverture “add-line” par “arrow-down-s-ligne”
• 🛠️ Bloc de transcription : Changement de l’icône de fermeture “substract-line” par “arrow-up-s-ligne”
• 🛠️ Bloc de transcription : Ajustement de l’intitulé (label) en graisse médium

Interrupteur

• ✨ Modification de la nomenclature du composant
• 🎉 Ajout des états Erreur, Valide
• 🎉 Ajout des groupes d’interrupteurs
• 🛠️ Changement de la couleur de fond de l’interrupteur décoché (base) en $background-default-grey
• 🎉 Ajout des items de légende (base) en état Défaut, Désactivé, Erreur et Valide

Menu latéral

• 🛠️ Changement de l’icône d’ouverture par “arrow-down-s-ligne”
• 🛠️ Changement de l’icône de fermeture par “arrow-up-s-ligne”
• 🛠️ Changement de graisse (bold) sur le titre

Mot de passe

✨ Déplacement depuis le dossier “Champs de saisie” vers un dossier dédié “Mot de passe” à la racine de la liste des composants

Navigation principale

• 🛠️ Changement de l’icône d’ouverture par “arrow-down-s-ligne”
• 🛠️ Changement de l’icône de fermeture par “arrow-up-s-ligne”

Pagination

🛠️ Ajustement des espacements entre les boutons à 16px

Sélecteur de langue

• 🛠️ Changement de l’icône d’ouverture par “arrow-down-s-ligne”
• 🛠️ Changement de l’icône de fermeture par “arrow-up-s-ligne”

Transcription

• 🛠️ Changement de l’icône d’ouverture “add-line” par “arrow-down-s-ligne”
• 🛠️ Changement de l’icône de fermeture “substract-line” par “arrow-up-s-ligne”
• 🛠️ Ajustement de l’intitulé (label) en graisse médium

[Bêta] Tuile

• ✨ Changement de couleur des titres en $text-title-blue-france
• ✨ Possibilité d’afficher un tag au lieu d’un badge

📁 Blocs fonctionnels

🛠️ Ajustement des blocs utilisant les composants mis à jour (voir ci-dessus)

📝 Modèles

🛠️ Ajustement des modèles utilisant les composants et bloc fonctionnels mis à jour (voir ci-dessus)

Librairie Figma, v1.9.0

🎨 Fondamentaux

Pictogramme

🎉 Ajout des pictogrammes “Food”, “Grocery” et “House” dans la librairie

Icône

🎉 Ajout des icônes “fr--equal-circle-fill”, “fr--arrow-right-down-circle-fill” et “fr--arrow-right-up-circle-fill” dans la partie “System” de la bibliothèque d’icônes

Style de texte

🚫 Suppression des styles de texte Titres de niveaux (H1,H2,H3,H4,H5,H6) en couleur Bleu France

🧩 Composants

Accordéon

• ✨ Changement de l’icône d’ouverture “add-line” par “arrow-down-s-ligne”
• ✨ Changement de l’icône de fermeture “substract-line” par “arrow-up-s-ligne”
• ✨ Ajustement de l’intitulé (label) en graisse médium
• ✨ Changement de couleur de l’intitulé (label) et de l’icône en $text-action-high-blue-france

Formulaire

• ✨ Séparation des messages de formulaire pour limiter l’usage, les liens devraient être préservés.

Bouton

• 🎉 Ajout du bouton tertiaire sans contour sur la page du composant

• ✨ Remaniement de la classification éléments :
  • Séparation des thèmes clairs et sombres
  • Séparation par type (Primaire, Secondaire, Tertiaire)
  • Séparation par taille (SM, MD, LG)
• ✨ Les labels sont maintenant des styles de texte
• ✨ Les changements de taille peuvent maintenant s’effectuer depuis le composant directement
• ✨ Les propriétés sont initialisés :
  • Icône : [Sans, Droite, Gauche, Seule]
  • État : [Défaut, Survol, Cliqué]
  • Désactivé : Booléen => Défaut = False
  • Focus: Booléen => Non visible par défaut
  • Icône : Instance swap (Si l’icône à des propriétés, celles-ci sont accessible directement)
  • Label : Texte personnalisable
  • Bordure (Bouton tertiaire uniquement) : Booléen => Visible par défaut

Case à cocher

• 🛠️ Correction sur la couleur du contour de l'item (base) Défaut MD et SM en $border-action-high-blue-france
• 🛠️ Changement de la couleur du fond de l’item (base) Décoché - Défaut MD et SM en $background-default-grey
• 🎉 Ajout de l'état Erreur MD et SM, avec couleur de contour en $border-plain-error
• 🎉 Ajout de l'état Valide MD et SM, avec couleur de contour en $border-plain-error
• 🛠️ Correction de l’espacement entre la case à cocher et son label à 8px sur la version SM (maintenant alignée à gauche)

Carte

• ✨ Changement de couleur des titres en $text-title-blue-france
• ✨ Remaniement de la classification éléments :
  • Séparation des thèmes clairs et sombres
  • Séparation par type (Horizontale, Verticale)
• ✨ Si “Action” est actif dans les propriétés, alors le titre passe automatiquement en $title-grey, ce qui donne la possibilité de choisir entre des boutons ou des liens (3 max)
• ✨ Si “Hauteur Max” est actif dans les propriétés, alors le contenu de la description ne pourra excéder 5 lignes. Si il est inactif, c’est la hauteur et la largeur de la carte qui limite la description
• ✨ Si “Action” est actif dans les propriétés, alors le titre passe automatiquement en $title-grey, ce qui donne la possibilité de choisir entre des boutons ou des liens (3 max)

Menu latéral

• 🛠️ Changement de l’icône d’ouverture par “arrow-down-s-ligne”
• 🛠️ Changement de l’icône de fermeture par “arrow-up-s-ligne”
• 🛠️ Changement de graisse (bold) sur le titre

Interrupteur

• 🎉 Ajout des états Erreur, Valide
• 🛠️ Changement de la couleur de fond de l’interrupteur décoché (base) en $background-default-grey
• 🎉 Ajout des items de légende (base) en état Défaut, Désactivé, Erreur et Valide

Retour en haut de page

🎉 Création d’une page dédiée dans la liste des composants

Transcription

• 🛠️ Changement de l’icône d’ouverture “add-line” par “arrow-down-s-ligne”
• 🛠️ Changement de l’icône de fermeture “substract-line” par “arrow-up-s-ligne”
• 🛠️ Ajustement de l’intitulé (label) en graisse médium

Bouton radio

• 🛠️ Correction sur la couleur du contour de l'item (base) Défaut MD et SM en $border-action-high-blue-france
• 🛠️ Changement de la couleur du fond de l’item (base) en $background-default-grey
• 🎉 Ajout de l'item (base) en état Erreur MD et SM, avec couleur de contour du radio en $border-plain-error
• 🎉 Ajout de l'item (base) en état Valide MD et SM, avec couleur de contour du radio en $border-plain-error
• 🛠️ Correction de l’espacement entre le bouton radio et son label à 8px

Bouton radio riche

• 🛠️ Correction sur la couleur du pictogramme en disabled-grey sur le bouton en état désactivé
• 🛠️ Intégration des pictogrammes sun et moon par défaut
• 🛠️ Ajustement de la taille de la zone du pictogramme à 56px
• ✨ Possibilité de choisir le pictogramme directement depuis les propriétés
• 🛠️ Correction sur la couleur du contour du radio en $border-action-high-blue-france
• 🛠️ Changement de la couleur du fond du radio riche en $background-default-grey
• 🛠️ Changement de la couleur de contour du bouton radio en $border-plain-error lorsqu’il y a une erreur
• 🛠️ Changement de la couleur de contour du bouton radio en $border-plain-success lorsqu’il y a une succès
• 🛠️ Correction de l’espacement entre le bouton radio SM et le label à 8px
• 🛠️ L'échange entre thème sombre et clair conservent les overides

Mot de passe

✨ Création d’une page dédiée dans la liste des composants

[Bêta] Tuile

• ✨ Changement de couleur des titres en $text-title-blue-france
• ✨ Possibilité d’afficher un tag au lieu d’un badge

📁 Blocs fonctionnels

🛠️ Ajustement des blocs utilisant les composants mis à jour (voir ci-dessus)

📝 Modèles

🛠️ Ajustement des modèles utilisant les composants et bloc fonctionnels mis à jour (voir ci-dessus)

Code, v1.9.3

🎨 Fondamentaux

• ✨feat(*): nouvelle version interne du changelog #590
  • Outil en ligne de commande pour générer un journal des modifications CHANGELOG.md à partir des balises git et de l'historique des commits. Commande : yarn changelog
• 🛠️fix(button, theme): retrait de la propriété css “:where” #596
  • Le support de cette propriété CSS est encore trop récent.

Core

• 🛠️fix(core): La valeur no-wrap n’existe pas dans la spécification CSS #594
  • Correction d’une coquille dans le CSS de core

🧩 Composants

Fil d'Ariane - breadcrumb

• fix(breadcrumb): ajoute une page exemple alternative #600
  • étiquette d'élément span rendue possible sur l'élément courant du fil d'ariane
  • ajout d'une page d'exemple avec boutons

Modale - Modal

• 🛠️fix(modal): correction ombre footer modal avec zone d’action #572
  • l’ombre au scroll est remplacée par une bordure plus discrète.

Mot de passe - Password

• 🐛 fix(password, account): correction capslock et trousseau safari #503
  • Correction erreur js sur le champ password au clic sur le trousseau (safari)
  • Retrait icône native capslock safari
  • Ajout attribut autocapitalize='off' sur les champs password et email pour désactiver la majuscule au début (mobile)
  • Ajout attribut autocorrect sur les champs password et email pour désactiver la correction orthographique

🔌 Analytics

• 🛠️fix(analytics): Corrections diverses du package Analytics #596
  • Ajout de la récupération automatique de la pagination (voir page.md)
  • Correction action dynamique vide
  • Correction envoi data
  • Correction erreur querySelector dans la hiérarchie
  • Revue de la profondeur de la hiérarchie
  • Correction de la version standalone
  • Collection désynchronisée pour attendre l’initialisation
  • Correction du cycle de vie des instances et garbage collection
  • Ajout d’une fonctionnalité d’Opt-in/out (voir opt.md)
  • Ajout d’une page d’exemple en SPA sans framework
  • Ajout de la valeur dans le label au submit (button, input)
  • Ajustements component_value sur chaque composant
• 📝 doc(analytics): doc analytics en markdown #599
  • Réécriture de la documentation Analytics en markdown : analytics.md

Documentation

• ✨feat(doc): Réécriture de la documentation Analytics en markdown : analytics.md 

Code, v1.9.2

🎨 Fondamentaux

• ✨ feat(changelog): ajoute un changelog auto-généré #561

🧩 Composants

🔌 Analytics

• ✨ feat(analytics): Ajout du support legacy (IE11)
  • Corrections des analytics en version nomodule (polyfill IE11) #588
• Ajout de la documentation Analytics-1.9.2.pdf
• 🐛 fix(analytics): correctifs analytics & page test spa #587
  • Amélioration de la qualité des labels envoyés à Eulérian
    • Maximum 50 caractères, couper avec […] au dela
    • Récupère uniquement le premier texte
    • Retrait des espaces en trop
  • Ajout de la propriété isDebugging dans dsfr.analytics permettant d'activer/désactiver le debug Eulerian
  • Mise en conformité avec les SPA (Single-page application - Angular, React, Vue)
  • Ajout d’exemples de SPA (Vue & React)

Documentation

• Ajout de la documentation Analytics-1.9.2.pdf

Code, v1.9.1

🎨 Fondamentaux

• 🐛 fix(build): changement des path pour compiler sur windows #580
• ✨ feat(readme): Mise à jour du readme Github (ajout d’un warning sur la licence et les droits d’utilisations) #559
• ⬆️ feat(deps): mise à jour des dépendances #553

Core

• 🐛 fix(core): correction icone lien externe IE #548
• ✨ feat(core): ajout de paramètres d’url permettant de configurer l’API :
  • ?verbose=true
    permet d’obtenir les logs détaillés
  • ?production=false
    permet d’obtenir les logs de développement même avec une configuration de production

Pictogramme

• 🎉 feat(artwork): ajout du pictogramme “document-add “ dans la catégorie “document” #571

🧩 Composants

• 🐛 fix(consent): Centrage du texte dans le consent placeholder video #573

Footer - Pied de page

• ✨ feat(footer): évolution des mentions légales #568
  • Nouveau texte : ”Sauf mention explicite de propriété intellectuelle détenue par des tiers, les contenus de ce site sont proposés sous”

Header - En-tête / Navigation - Navigation

• ✨ feat(header,navigation): fermeture de la navigation au clic sur lien ou bouton #583
  • Tout clic sur un élément <button> ou <a> entraîne la fermeture de la navigation (modale et/ou menu).
  • L'ajout de l'attribut data-fr-prevent-conceal permet de préserver un lien ou un bouton particulier de ce nouveau comportement.

Input - Champ de saisie

• 🐛 fix(input): correctif input date-picker sur firefox 109+ #585

Modal - Modale

• 🐛 fix(modal): correctif prise de focus au focus-trap #566

Notice - Bandeau d’information

• 🐛 fix(notice): Le nom du composant “bandeau d'information“ devient “bandeau d'information importante” #563

Password - Mot de passe

• 🐛 fix(password): correctif erreur getModifierState #574

Transcription - transcription

• 🐛 fix(transcription): corrige largeur du bouton a l'ouverture de la modale #565

🔌 Analytics

• 🐛 fix(build): changement des path pour compiler sur windows #580
• ✨ feat(readme): Mise à jour du readme Github (ajout d’un warning sur la licence et les droits d’utilisations) #559
• ⬆️ feat(deps): mise à jour des dépendances #553

• Ajout d’un atttribut id sur tous les éléments marqués. Les éléments où l'id manque sont recensés en warning dans la console.
• Ajout de la documentation Analytics-1.9.1.pdf
• ⚠ Modification de la configuration analytics :
  • dsfr.analytics.mode devient dsfr.analytics.collection et peut maintenant prendre les valeurs MANUAL, LOAD, FULL, HASH (voir doc).
  • ajout du support des SPA activé automatiquement si en mode ANGULAR, REACT ou VUE
  • Ajout de la variable enableRating dans dsfr.analytics.enableRating, permettant d’activer le taux de clic (désactivé par défaut).
• Tous les composants sont maintenant marqués par défaut, ajout de :
  • Ajout de fichier - File upload
  • Alertes - Alert
  • Badge
  • Bandeau d'information importante
  • Bouton FranceConnect
  • Champ de saisie - Input
  • Citation - Quote
  • Contenu médias - Responsive médias
  • Gestionnaire de consentement - Consent banner
  • Indicateur d'étape
  • Lettre d'information et réseaux sociaux - Newsletter & Follow us
  • Liens d'évitement - Skiplinks
  • Liste déroulante - Select
  • Pagination
  • Sélecteur de langue
  • Tableau - Table
  • Tag
  • Téléchargement de fichier
  • Tuile - Tile
  • Transcription

Code, v1.9.0

🎨 Fondamentaux

Core

• 🎉 Ajout des valeurs des breakpoints en custom var css
• 🎉 Ajout de nouveaux tokens de couleur
• 🛠️ Correction de la taille minimum du soulignement des liens

Pictogramme

• 🎉 Ajout de 3 nouveaux pictogrammes "Food", "Grocery" et "House"
• 🛠️ Dépréciation des xlink:href au profit de href

Icône

• 🎉 Ajout des icônes “fr--equal-circle-fill”, “fr--arrow-right-down-circle-fill” et “fr--arrow-right-up-circle-fill” dans la partie “System”
• 🛠️ Correction lien externe IE11

Scheme

• 🛠️ Mode sombre sur la scrollbar
• 🛠️ Correction html sur le script boot pour omission par IE11
  ajout de l’attribut type="module" sur l'étiquette d'élément script

🧩 Composants

Bouton radio

🛠️ Correction rendu accessibilité

Case à cocher

🛠️ Correction rendu accessibilité

Champs de saisie

• 🛠️ Correction du curseur sur le textarea
• 🛠️ Correction icône calendrier

En-tête

• 🛠️ Correction alignement des liens sans icônes
• 🛠️ Correction copie du sélecteur de langue sans accès rapide

Interrupteur

🛠️ Correction compatibilité avec vite + svelte

Tuile

🛠️ Correction taille svg

📝 Modèles

Page d'erreurs

🛠️ Retrait du fil d’Ariane

🔌 API

Analytics

🎉 Ajout de l’API de marquage : les fonctionnalités sont détaillées dans le document inclus dans la livraison. Les composants suivants sont automatiquement marqués :

• "Accordéon" (accordion),
• "Fil d’Ariane" (breadcrumb),
• "Bouton" (button),
• "Mise en avant" (callout),
• "Carte" (card),
• "Case à cocher" (checkbox),
• "Pied de page" (footer),
• "En-tête" (header),
• "Mise en exergue" (highlight),
• "Lien" (link),
• "Modale" (modal),
• "Navigation principale" (navigation),
• "Bouton radio" (radio),
• "Bouton radio riches" (radio-rich),
• "Barre de recherche" (search),
• "Partage" (share),
• "Menu latéral" (sidemenu),
• "Sommaire" (summary),
• "Onglet" (tab),
• "Interrupteur" (toggle)