Général

La version 1.9.4 est disponible depuis le 23 octobre 2023
Code en version 1.9.4

La version 1.9.3 est disponible depuis le 17 mai 2023
Code en version 1.9.3

La version 1.9.2 est disponible depuis le 18 avril 2023
Code en version 1.9.2

La version 1.9.1 est disponible depuis le 11 avril 2023
Code en version 1.9.1

La version 1.9.0 est disponible depuis le 1er mars 2023
Code en version 1.9.0

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)