Note de version 1.9

Général

Information

Les librairies Figma et Sketch sont en avance de phase vis-à-vis du code sur un certains nombre d'évolutions et de correctifs. Ce retard sera rattrapé en code à la sortie de la prochaine version du Système de Design de l’État.

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

  • 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

Information

Si vous aviez inséré le composant Tuile dans vos conceptions avant la mise à jour 1.8.0, celui-ci sera toujours disponible et porte le statut [Déprécié] jusqu'à la fin de la phase de transition. Il est conseillé de mettre à jour vos composants Tuile en utilisant la version du dossier [Bêta].

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

Attention

Changements destructifs

  • Liens à refaire pour les instances en Focus et les boutons tertiaires avec contour
  • Tous les labels seront remplacés par “Label” (pour l’initialisation de la propriété “Label”)
  • Tous les Icônes seront remplacés l’icône settings-3-line par défaut (pour permettre l’initialisation de la propriété"Icône")
  • 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

Information

  • Les propriétés citées se conserveront lors d’un swap de thème, de type ou de taille
  • Toutes les instances sont simplifiées (Masquez les calques sans propriétés, ainsi que les détails tels que les remplissages, les effets, l’auto-layout, etc…)

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)

Information

Changement de thème

Tout changement de thème peut entraîner des conflits avec les éléments enfant overidés, ceux-ci resteront en thème clair. Exemple : Vous construisez une carte en thème clair, vous changez la description, lorsque la carte est interchangée avec une carte de thème sombre, le texte restera en thème clair.

Préférez donc une construction de la carte en débutant par choisir le bon thème. Si vous décidez néanmoins d’interchanger le thème, il faudra “swap” les composants overidés pour leur version du thème correspondant.

  • 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 “”  #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

Information

API Analytics 1.9.3

Correctif d’un bug concernant l’absence de valeur pour les component_value des actions de recherches et filtre. Dans certains cas, les valeurs recherchées ou filtrées n’étaient pas collectées dans Eulerian.

  • fix(analytics): Corrections diverses du package Analytics  #596
    • Ajout de la récupération automatique de la pagination (voir  documentation )
    • 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é #56

Analytics

Information

API Analytics 1.9.2

  • Mise en conformité avec les Single Page App (Angular, React, Vue)
  • Ajout d’une propriété is Debugging pour faciliter la recette
  • 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=truepermet d’obtenir les logs détaillés
    • ?production=falsepermet 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
  • 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

Information

API Analytics 1.9.1

  • Correctif d’un bug générant un double appel du collector Eulerian au chargement de page. Cet incident générait un doublement de certaines pages vues et augmentait la consommation de données Eulerian.
  • Modification de la configuration analytics : dsfr.analytics.collection=MANUAL||LOAD|FULL|HASH :
  • Load : Mode par défaut, envoie automatiquement les données de page vue au chargement de la page.
  • Manual : attend l’exécution de la fonction collect() pour envoyer les données de pages. Cela permet de ne pas écraser un marquage de pages vues préexistant en dehors du DSFR.
  • Full : Supporte les « Single-Page Application » en envoyant les données à chaque changement de path dans l’URL
  • Hash : Supporte les « Single-Page Application » en envoyant des données à chaque changement de path dans l’URL, incluant les ancres.
  • Mise en place du mode EnableRating, désactivé par défaut. Si ce mode est activé, il permet d’envoyer les impressions de composant (actionin) et ainsi calculer un taux de clic. Attention, l’activation de ce mode implique l’envoi de beaucoup de données à Eulerian, ce qui peut complexifier les analyses.
  • Marquage de tous les composants du DSFR.
  • 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 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 IE11ajout 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)