Légende

• 🎉 : Ajout

• ✨ : Évolution

• 🛠️ : Correction

• 🚫 : Suppression

• : Modification de code
  

Versions Patch 1.2.1 / 1.2.2

Librairie Sketch

Version 1.2.1 — 18 novembre 2021

🎨 Fondamentaux

Couleurs + Typographie

• 🛠️ Modification des colors variables sur les styles de texte :

  • SM - Bold - Thème clair et SM - Bold - Thème sombre

  • XS - Bold - Thème clair et XS - Bold - Thème sombre
    

Version 1.2.2 — 29 novembre 2021

🎨 Fondamentaux

Couleurs + Typographie

• 🛠️ Corrections des “tokens” :

  • Token d’option white-1000 est renommé en grey-1000, et black-50 renommé en grey-50

  • Token de décision : le ‘suffixe’ -neutral est remplacé par ‘grey’

Exemple : background-default-neutral devient background-default-grey

🧩 Composants

Modale

• 🛠️ Désactivation de l’overide « Layer style » sur le calque « Ombre »

• 🛠️ Ajustement de la zone de contenu

Paramètres d’affichage de thème - modale

• 🛠️ Correction de l’orthographe « Paramètres »

• 🛠️ Activation de l’overide « Image » permettant de charger une image

• 🛠️ Ajustement de la hauteur des symboles, à 568 px pour être raccord avec les modales existantes :

  • « 2. Composants/Paramètres d'affichage de thème - modale/Thème clair/Mobile »

  • « 2. Composants/Paramètres d'affichage de thème - modale/Thème sombre/Mobile »

Pied de page

• 🛠️ Activation de l’overide « Séparateur » dans les symboles :

  • « 2. Composants/Pied de page/Thème clair/_Items/Desktop/Bloc marque »,

  • « 2. Composants/Pied de page/Thème clair/_Items/Desktop/Bloc marque avec logo opérateur »,

  • « 2. Composants/Pied de page/Thème sombre/_Items/Desktop/Bloc marque »,

  • « 2. Composants/Pied de page/Thème sombre/_Items/Desktop/Bloc marque  avec logo opérateur »

• 🛠️ Désactivation de l’override couleur du soulignement (lien etalab 2.0)

Onglet

• 🛠️ Rajout de l’ombre en mobile

Carte

• 🛠️ Ajout bordure manquante « 2. Composants/Cartes/Thème sombre/Desktop/Horizontal/Avec icône/Avec image - Défaut »

• ✨ Remplacement des images sur les cartes thèmes sombre « 0. Outils/Image générique/Thème sombre »

Tuile

• 🛠️ Désactivation de l’override sur la bordure, verticales et horizontales, thème clair et thème sombre

• 🛠️ Désactivation de l’override d’ombre du calque de fond

Ratio média

• 🛠️ Désactivation de l’override “Layer style” sur le calque “Image” des symboles :

  • « 1. Fondamentaux/Ratio médias/1:1 - Images et Vidéos »,

  • « 1. Fondamentaux/Ratio médias/2:3 - Images »,

  • « 1. Fondamentaux/Ratio médias/3:2 - Images »,

  • « 1. Fondamentaux/Ratio médias/3:4 - Images »,

  • « 1. Fondamentaux/Ratio médias/4:3  - Images et Vidéos »

Bouton radio riche

• 🛠️ Désactivation de l’overide du séparateur « 2. Composants/Boutons radios riches/Thème sombre/3) Survol » et « 2. Composants/Boutons radios riches/Thème sombre/2) Inactif »

Modale

• 🛠️ Mise à jour des ombre de fond la zone d’action dans les cas max

• 🛠️ Ajout de la couleur de fond de la zone d’action dans les cas max « $background-elevated-grey »

• 🛠️ Suppression de la couleur de fond de la zone d’action dans les cas « Défaut » (sans scroll)

• 🛠️ Activation de l’overide sur le calque “Zone contenu = à masquer en couleur none” :

  • « 2. Composants/Modale/Thème clair/Mobile/Zone contenu/Avec zone action/Cas maximum sticky »,

  • « 2. Composants/Modale/Thème clair/Mobile/Zone contenu/Sans zone action/Cas maximum »,

  • « 2. Composants/Modale/Thème sombre/Mobile/Zone contenu/Avec zone action/Cas maximum sticky »,

  • « 2. Composants/Modale/Thème sombre/Mobile/Zone contenu/Sans zone action/Cas maximum »

• 🛠️ Ajout de l’ombre sur calque de fond

Champs de saisie

• 🛠️ Désactivation overide “Text Style” et couleur d’icône « 2. Composants/Champs de saisie/Thème clair/5) Erreur + Message » et « 2. Composants/Champs de saisie/Thème sombre/5) Erreur + Message »

Pagination

• 🛠️ Désactivation overide “Layer Style” du calque de fond Page active thème sombre « 2. Composants/Pagination/Thème sombre/_Items/Page/Page - Active »

En-tête

• 🛠️ Ajout du bloc marque “RÉPUBLIQUE FRANÇAISE” lors de la présence du logo

• 🛠️ Désactivation de l’overide pour la couleur des icônes « Accès rapides »

• 🛠️ Désactivation de l’overide de la couleur des séparateurs « Accès rapides »

• 🛠️ Ajout de l’emoji ombre sur calque de fond

• 🛠️ Activation de l’overide de l’ombre sur calque de fond

• 🛠️ Remplacement des images générique du logo sur les composants thèmes sombre « 0. Outils/Image générique/Thème sombre »

Menu latéral

• 🛠️ Désactivation overide couleur du séparateur sur les symboles : 

  • « 2. Composants/Menu latéral/Thème clair/Desktop/Gauche/Titre de rubrique - Liens directs »

  • « 2. Composants/Menu latéral/Thème clair/Desktop/Droite/Titre de rubrique - Liens directs »

  • « 2. Composants/Menu latéral/Thème clair/Desktop/Gauche/Titre de rubrique - Dépliants »

  • « 2. Composants/Menu latéral/Thème clair/Desktop/Droite/Titre de rubrique - Dépliants »

  • « 2. Composants/Menu latéral/Thème sombre/Desktop/Gauche/Titre de rubrique - Liens directs »

  • « 2. Composants/Menu latéral/Thème sombre/Desktop/Droite/Titre de rubrique - Liens directs »

  • « 2. Composants/Menu latéral/Thème sombre/Desktop/Gauche/Titre de rubrique - Dépliants »

  • « 2. Composants/Menu latéral/Thème sombre/Desktop/Droite/Titre de rubrique - Dépliants »

• 🛠️ Désactivation de l’overide couleur et choix d’icônes sur les symboles « 2. Composants/Menu latéral/Thème clair/Mobile/Ouvert - Simple » et « 2. Composants/Menu latéral/Thème sombre/Mobile/Ouvert - Simple »

Fil d’ariane

• 🛠️ Mise à jour de la couleur de l’item « Page en cours » avec le token de décision $text-active-grey sur les symboles « 2. Composants/Fil d’Ariane/Thème clair/_Items/Page en cours » et «2. Composants/Fil d’Ariane/Thème sombre/_Items/Page en cours »

Ajout de fichier

• 🛠️ Désactivation de l’overide “Text Style” et couleur d’icône sur le message d’erreur « 2. Composants/Ajout de fichier/Thème clair/3) Erreur »

Barre de recherche

• 🛠️ Désactivation de l’overide  couleur d’icône sur le bouton rechercher sur les symboles « 2. Composants/Barre de recherche/Thème clair/Desktop - LG » et « 2. Composants/Barre de recherche/Thème sombre/Desktop - LG »

Bouton

• 🛠️ Désactivation des overides concernant la taille des icônes sur les boutons SM, MD et LG

Lien

• 🛠️ Désactivation override couleur d’icône sur le lien « 2. Composants/Liens/Thème sombre/Icône droite/LG/1) Défaut - LG »

Liste déroulante

• 🛠️ Désactivation de l’overide sur le choix d’icône sur les symboles :

  • « 2. Composants/Liste déroulante/Thème clair/1) Défaut »,

  • « 2. Composants/Liste déroulante/Thème clair/2) Inactif »,

  • « 2. Composants/Liste déroulante/Thème clair/3) Défaut + Texte de description »,

  • « 2. Composants/Liste déroulante/Thème clair/4) Erreur »,

  • « 2. Composants/Liste déroulante/Thème clair/5) Valide »,

  • « 2. Composants/Liste déroulante/Thème sombre/1) Défaut »,

  • « 2. Composants/Liste déroulante/Thème sombre/2) Inactif »,

  • « 2. Composants/Liste déroulante/Thème sombre/3) Défaut + Texte de description »,

  • « 2. Composants/Liste déroulante/Thème sombre/4) Erreur »,

  • « 2. Composants/Liste déroulante/Thème sombre/5) Valide »

Citation

• 🛠️ Activation de l’overide concernant le choix de la couleur d’accent sur le calque icône sur les symboles :

  • « 2. Composants/Citation/Thème clair/Mobile/Avec illustration/Avec illustration »,

  • « 2.Composants/Citation/Thème sombre/Mobile/Avec illustration/Avec illustration »

Tableau

• 🛠️ Ajustement du fond des cellules de titres (“2. Composants/Tableau/Thème clair/Desktop/Cellule/Titre“ et “2. Composants/Tableau/Thème sombre/Desktop/Cellule/Titre“) en $background-contrast-grey en thème clair et en thème sombre

Librairie Figma

Version 1.2.1 — 29 novembre 2021

🎨 Fondamentaux

• 🎉 Ajout du tutoriel vidéo “d’installation” de la librairie Figma

• 🛠️ Corrections des “tokens” :

  • Token d’option white-1000 est renommé en grey-1000, et black-50 renommé en grey-50

  • Token de décision : le ‘suffixe’ -neutral est remplacé par ‘grey’

Exemple : background-default-neutral devient background-default-grey

Code

Version 1.2.1 — 29 novembre 2021

• 🛠️ Menus (navigation principale, menu latéral, sommaire): correction des hovers disparus.

• 🛠️ Modale correction du focus-trap et gestion de la touche esc.
  Ajout de l’attribut aria-modal=”true”.

• 🛠️ IE 11: correction svg bloc marque, modale du header.

• 🛠️ Ajout de fichier: aria-describedby ajouté sur l’exemple d’erreur.

• 🛠️ Package: mise à jour des dépendances npm de l’environnement de développement.
  Cela implique d’utiliser Node en version 14.18 ou supérieure.

• Ajout de la balise meta theme-color dans les pages d’exemples.

• Développeur : ajout de la balise meta theme-color dans le snippet de code.

• 🎉 Ajout icône filtre

Documentation

🎉 Figma (Designer) : Ajout du tutoriel vidéo “d’installation” de la librairie Figma.

🛠️ Couleurs - palette et utilisation dans le DSFR :

• Token de décision : le ‘suffixe’ -neutral est remplacé par ‘grey’

• Token d’option white-1000 est renommé en grey-1000, et black-50 renommé en grey-50

✨ Alertes : ajout de l’alerte ‘Attention’ (warning)

🛠️ Tableau : correction des exemples (restés en v1.1.0), et correction des token (-neutral en -grey)

Téléchargement

v1.2.0

17 novembre 2021

Général

🎉 Nouveau système colorimétrique. Voir la nouvelle palette de couleur , son utilisation dans le DSFR, ainsi que l’explication de la refonte du système.
🎉 Ajout du composant “Ajout de fichier”.
🎉 Nouvelle version du Javascript.
🛠️ Évolution des espacements de titres et paragraphes.
🛠️ Modification de la mention de la licence Etalab-2.0 dans le pied de page.
🛠️ Modification de l’arborescence des fichiers compilés. (mise à jour des chemins vers les css/js/img nécéssaire)
🛠️ Paramètres d’affichage : ajout du paramètre système.
Cela nécessite de remplacer le l’attribut data-fr-theme par data-fr-scheme , et de mettre à jour le snippet de code de la modale. L’attribut data-fr-theme est désormais géré dynamiquement.

Librairie Sketch

🌎 Global :

Page “Symbole”

• ✨ Amélioration de la disposition des symboles suivant une classification par famille et typologie de symboles (Bases - Items - Composants)

Page “Composants”

• 🛠️ Nettoyage de certains textes obsolètes sur les planches de composants, francisation de certains textes présent en anglais

• 🛠️ Mise à jour des nomenclatures des composants sur les planches (02.composants/etc… > 2.composants/etc…)

🎨 Fondamentaux

Couleurs + Typographie

• ✨ Intégration du nouveau système colorimétrique à travers les nouveaux tokens

• 🎉 Ajout de l'émoji 🎨 devant les noms des calques dont la couleur est accentuable

• 🎉 Ajout des valeurs d’espacement entre les paragraphes directement dans les styles de corps de texte

• 🛠️ Correction des valeurs d’espacement après les paragraphes et les titres

• 🛠️ Couleurs : Fusion de la couleur $beige-975 avec le $grey-975

Sous-librairie d’icône version 1.2.0

• 🎉 Ajout des icônes :

  • snapchat = snapchat-line + snapchat-fill

  • github = github-fill + github-line

  • twitch = twitch-line + twitch-fill

  • telegram = telegram-line + telegram-fill

  • remixicon = remixicon-line + remixicon-fill

  • npmjs = npmjs-line + npmjs-fill

  • vimeo = vimeo-line + vimeo-fill

  • slack = slack-line + slack-fill

  • upload = upload-2-line + upload-2-fill

  • pièce jointe = attachment-line + attachment-fill

  • filtre = filter-line + filter-fill

  • filtre = equalizer-line + equalizer-fill

  • daily motion = daily-motion-line + daily-motion-fill

  • tiktok = tiktok-line + tiktok-fill

  • déconnexion = logout-box-r-fill + logout-box-r-line

Bloc-marque

• 🛠️ Désactivation de l’export du fond (Include in instances) en thème sombre sur les tailles 20 et 16

🧩 Composants

Champs de saisie

• 🛠️ État Focus, correction margin-left à 12 px du texte en saisie “A|” qui se décale lorsque l’on étire le composant, en thème clair et thème sombre

Cases à cocher

• 🛠️ Correction de la nomenclature “45) erreur” → “5) erreur”

• 🛠️ Rajout d’une numérotation à l’intérieur du “dossier” des groupes

Boutons radios

• 🛠️ Rajout d’une numérotation à l’intérieur du “dossier” des groupes

En-tête

• 🛠️ Correction de la nomenclature de l’override sur les symboles mobiles en thème clair : “Intitulé” → “Intitulé officiel”

• 🛠️ Correction de la nomenclature sur le symbole “Base” → “Thème clair - Base” et “Thème sombre - Base”

• 🛠️ Correction de l’emplacement du symbole “Thème clair - Base” → “Composants/— Éléments : ne pas utiliser —/En-tête/Desktop/Thème clair - Base”

• 🛠️ Correction de la nomenclature “3) Recherche ouverte” → “Recherche ouverte”

• 🛠️ Activation de l’override des icônes d’actions rapide dans l’en-tête en thème sombre

• 🛠️ Désactivation du fond du symbole du bloc marque, en thème sombre

Gestionnaire de consentement

• 🛠️ Importation du symbole de l’overlay de la modale dans le symbole de l’overlay du gestionnaire de consentement

Lettre d’information et réseaux sociaux

• 🛠️ Correction de la nomenclature “Bouton” → “Bouton seul”, “Abonnement” → “Lettre d’information”

• 🛠️ Importation du symbole formulaire dans les symboles en mobile pour être raccord aux versions desktop

• 🚫 Suppression des overides sur les champs de saisie de mail (Symbole “Bouton” et style de texte)

Alerte

• 🎉 Ajout du composant “Avertissement”

Citation

• 🛠️ Correction de la nomenclature “Auteur + Ouvrage + Détail” → “Auteur + Détail”

• 🛠️ Correction de l’autolayout sur le symbole de contenu “Auteur + Détail”

• 🛠️ Correction : rajout de la bordure

• 🛠️ Correction de la nomenclature, déplacement des items (thème sombre, thème clair, desktop, mobile) dans le dossier -Ne pas utiliser- : “2. Composants/Citation/…” → “2. Composants/— Éléments : ne pas utiliser —/Citation/…”

Modale

• 🛠️ Correction de la nomenclature “_Items/Overlay” → “Overlay”

Partage

• 🛠️ Correction des espacements entre les éléments

• 🛠️ Correction de l’icône par défaut dans les items

• 🛠️ Correction nomenclature des items (thème sombre) pour être iso thème clair :

  • “…/Lien - Défaut” → “…/1) Défaut”

  • “…/Lien - Inactif” → “…/2) Inactif”

  • “…/Lien - Survol” → “…/3) Survol”

Pied de page

• 🛠️ Modification de la mention de la licence Etalab-2.0, ‘contenus’ remplace ‘textes’:
  “Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0”.

Fil d’Ariane

• 🛠️ Correction au thème sombre desktop : Majuscule au deuxième lien : page N2 > Page N2

🎉 Ajout de fichier

• Ajout des symbols du composant “Ajout de fichier” en thème clair et thème sombre :

  • 1) Défaut

  • 2) Inactif

  • 3) Erreur

• Ajout des symbols “Base” en thème clair : Boutons “Parcourir…” (aspect natif) dans la section 2. Composants/— Éléments : ne pas utiliser —/Boutons/Ajout de fichier/ :

  • 1) Défaut

  • 2) Inactif

  • 3) Survol

  • 4) Focus

  • 5) Cliqué

Paramètre d’affichage

• ✨ Ajout d’une troisième option “Système” dans la modale de sélection

Librairie Figma

🌎 Global

✨ Refonte du système de couleurs :

• ✨ Refonte et ajout des couleurs de la palette

• ✨ Nouvelle nomenclature pour les “options” (dans les Fondamentaux) et les “décisions” (dans les Composants) sous forme de tokens

• ✨ Mise à jour des tous les calques de composants avec le nouveau système

Voir l’article de présentation de la refonte des couleurs

🎨 Fondamentaux

Couleurs

✨ Nouvelles planches de présentation des “options” et “décisions”

Icônes

🎉 Ajout des icônes :

• snapchat = snapchat-line + snapchat-fill

• github = github-fill + github-line

• twitch = twitch-line + twitch-fill

• telegram = telegram-line + telegram-fill

• remixicon = remixicon-line + remixicon-fill

• npmjs = npmjs-line + npmjs-fill

• vimeo = vimeo-line + vimeo-fill

• slack = slack-line + slack-fill

• upload = upload-2-line + upload-2-fill

• pièce jointe = attachment-line + attachment-fill

• filtre = filter-line + filter-fill

• filtre = equalizer-line + equalizer-fill

• dailymotion = daily-motion-line + daily-motion-fill

• tiktok = tiktok-line + tiktok-fill

• error-warning = error-warning-fill + error-warning-line

• déconnexion = logout-box-r-fill + logout-box-r-line

Grille

🛠️ Correction des styles de grille qui étaient faux

Typographie

• 🛠️ Correction des valeurs d’espacement après les paragraphes et les titres

• 🎉 Ajout des valeurs d’espacement entre les paragraphes directement dans les styles de corps de texte

🧩 Composants

Global

• 🛠️ Mise à jour des noms des composants pour qu’ils soient mieux reconnaissables une fois insérés dans une page. Par exemple : “Desktop” devient “Carte - Desktop”

• 🎉 Ajout de l'émoji 🎨 devant les noms des calques dont la couleur est accentuable

Alerte

• 🎉 Ajout du composant “Avertissement”

• 🎉 Ajout d’une description

Partage

🛠️ Correction des espacements entre les éléments

Pied de page

🛠️ Modification de la mention de la licence Etalab-2.0, ‘contenus’ remplace ‘textes’:
“Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0”.

Mise en avant

🛠️ Correction de la propriété de resizing qui était cassée

Tag

🛠️ Correction de taille du tag MD, de 40px à 32px

Onglets

🛠️ Ajout de la surcouche symbolisant le scroll dans la version complète mobile. Pour construire des onglets à partir des items, utiliser le symbole présent dans le composant “Tableau”.

🎉 Ajout de fichier

• Ajout du composant “Ajout de fichier” en thème clair et thème sombre :

  • 1) Défaut

  • 2) Inactif

  • 3) Erreur

Paramètre d’affichage

• ✨ Ajout d’une troisième option “Système” dans la modale de sélection

Code

Architecture

Modifications structurelles du code

• Passage au singulier de tous les noms de composants, dossiers, et fichiers
  ex : le composant tags devient tag
  ex : dans chaque composant les dossiers styles, scripts, templates deviennent style, script, template
  ex : les fichiers schemes.scss deviennent scheme.scss

• Allègement de la structure générale du projet

  • Le projet est maintenant divisé en 3 dossiers doc/, src/, tool/

  • Le dossier examples/ a été déplacé dans tool/

  • Les dossiers assets/ et icons/ ont été déplacé dans src/core/ (et mis au singulier)

• Changement structurel de src/

  • Le dossier src/ contient maintenant différents sous dossiers :

    • component : qui contient tous les composants

    • core : Le core est séparé des autres composants pour être autonome

    • legacy : Le package legacy pour la gestion d’IE, notamment, est séparé des autres composants (car facultatif)

    • scheme : Le package scheme contenant la gestion des couleurs (dark mode et themes) est isolé (car facultatif)

    • page : Le dossier page contiendra des modèles de pages types du dsfr

    • pattern : Le dossier pattern contiendra des modèles d’utilisations de composants

  • A la racine de src/ et dans chaque sous-dossiers, on retrouve les fichiers main.scss, scheme.scss, et legacy.scss permettant de générer 3 fichier CSS du meme nom et qui contiendrons respectivement tous les mains, scheme, et legacy présents dans leurs sous-dossiers.

  • De la même façon, les fichiers main.js et legacy.js permettent de générer les fichiers JS correspondant dans chaque dossier.

  • Les dossiers contenant des packages (component, pattern et page) possèdent un fichier .folder.yml pour générer les readme dans ces dossiers (équivalant au .package.yml pour les packages)

• Changement structurel des fichiers générés (au build)

  • Le dossier public/ est supprimé et ses dossiers : example/ et dist/ remontent à la racine

  • Les config générées sont maintenant dans un dossier .config à la racine du projet. Ces fichiers sont généré au début du build et reprend

    • config.json : est généré à partir de l’arborescence de src/ et des fichiers .folder.yml et .package.yml qui permettent de définir les dépendances, le nom, la doc, la description, etc. de chaque package.

    • config.scss : n’est plus généré dans src/core/ mais dans .config , il définit les variables SASS générales : $prefix, $namespace, $organisation

    • config.js : n’est plus généré dans src/core/ mais dans .config , il définit les variables JS générales : prefix, namespace, organisation. Ces variables sont maintenant contenues dans un object config, il faut donc utiliser config.prefix pour accéder à la variable prefix en JS.

    • icon.scss : n’est plus généré dans src/core/ mais dans .config (et passe au singulier). Il définit le nom des icones présentes dans src/core/icon/

  • Les examples html sont maintenant générés dans example/ à la racine du projet

    • Les chemins d’import des CSS, Js, et assets ont donc changé,

  • Les fichiers CSS et JS (et le readme) sont maintenant organisés par package dans /dist/

    • Les fichiers générés utilise maintenant la même arborescence que dans src/ (component, page, pattern)

    • les dossiers font et favicon (auparavant fonts et favicons) sont maintenant dupliqués dans dist/.

    • Le dossier dist/dsfr/ contient les fichiers compilés du DS entier (tous ce qui est dans dist/ hormis lui-meme)

    • Dans chaque dossier de dist/ sont générés plusieurs versions du CSS et JS du package et récurcivement de ses sous packages :

      • [nom_package].css : combinaison du main, scheme et legacy du package

      • [nom_package].main.css : contient uniquement le CSS principal

      • [nom_package].scheme.css : contient uniquement le CSS lié aux couleurs

      • [nom_package].legacy.css : contient uniquement le CSS lié au support navigateurs (IE)

      • [nom_package].module.js : contient le JS du package

      • [nom_package].nomodule.js : contient le même JS en ES5, pour les navigateurs ne supportant pas les modules ES6 (IE)

      • la version minifiée (en .min) et les cartes sources (en .map) de chacun des fichiers précédant

  • Ajout d’un répertoire artwork dans le répertoire dist (contenant les pictogrammes illustratifs de la modale de paramètres d’affichage)

?? Refactorisation du JS

Les composants sont maintenant instanciés de façon réactive grâce aux mutationObserver. Il est maintenant possible d’accéder à un composant et ses méthodes associées grâce à l’utility dsfr(element)

Par exemple, pour fermer une modale dans la page :
const element = document.getElementById('MaModale');
dsfr(element).modal.conceal();

Voir la documentation du javascript

Global

NPM / archive
Changement de chemin d’accès vers le CSS et Js global :node_modules/@gouvfr/dsfr/dist/dsfr/ (contre node_modules/@gouvfr/dsfr/dist/js et node_modules/@gouvfr/dsfr/dist/css auparavant).

robots.txt
🎉 Ajout d’un fichier robots.txt, pour empêcher l’indexation, lors du déploiement sur notre environnement de test.

.gitignore
🛠️ Correction du gitignore

package.json
🛠️ Certaines dépendances ont été modifié, il peut être nécessaire de relancer la commande yarn ou npm i afin de mettre à jour les dépendances.

🛠️ Licence.MD devient License.MD

Composants

Core
🛠️ Espacement de texte : changement des valeurs de margin-bottom des headings (h1 - h6) et des paragraphes. Voir la documentation espacement.

🛠️ Reset : passage des font en font-display: swap et le text-rendering en optimiseLegibility
✨ La classe ‘fr-text’ devient ‘fr-text--md’

🎉 Ajout des icônes :

• snapchat = snapchat-line + snapchat-fill

• github = github-fill + github-line

• twitch = twitch-line + twitch-fill

• telegram = telegram-line + telegram-fill

• remixicon = remixicon-line + remixicon-fill

• npmjs = npmjs-line + npmjs-fill

• vimeo = vimeo-line + vimeo-fill

• slack = slack-line + slack-fill

• upload = upload-2-line + upload-2-fill

• pièce jointe = attachment-line + attachment-fill

• filtre = filter-line + filter-fill

• filtre = equalizer-line + equalizer-fill

• dailymotion = daily-motion-line + daily-motion-fill

• tiktok = tiktok-line + tiktok-fill

• error-warning = error-warning-fill + error-warning-line

Et ajouts version manquante des icônes :

• eye-fill, eye-off-fill, add-circle-fill, instagram-line, youtube-line
  

Button
🛠️ Ajout du style disabled sur l’input type submit.

Buttons radio ‘riches'
Changement de la structure html :

• l’attribut style est retiré sur le label (style=”background-image:…”)

• l’image illustrative est maintenant insérée via une balise

<img> placée dans une <div class="fr-radio__img"> située après le label.

Voir la documentation des boutons radio riches

✨ Il est maintenant possible d’utiliser une icone illustrative du DS (artwork), en renseignant le chemin de l'icone svg dans le src="" de l'image, et en ajoutant l’attribut data-fr-inject-svg sur son parent.
Exemple (sur les paramètres d’affichageà

<div class="fr-radio__img" data-fr-inject-svg>
  <img src="dist/artwork/light.svg" alt="">
</div>

Champs de saisie (input)
🛠️ correction de la couleur de la bordure sur les textarea en erreur/succès
🛠️ correction du style sur input type submit désactivé

Footer

🛠️ Modification de la mention de la licence Etalab-2.0, ‘contenus’ remplace ‘textes’:
“Sauf mention contraire, tous les contenus de ce site sont sous licence etalab-2.0”.

Header
🛠️ correction semicolon manquant devant last-child

Média
🛠️ Ajout de la compatibilité avec les svg.

Navigation principale
🛠️ Les titres de catégorie sur le mega menu peuvent être une balise <hx> ou <p>, et le lien devient facultatif.

Paramètres d'affichage (switch theme)

✨ Ajout d’une troisième option ‘système' dans la modale de selection
Mise à jour de l’attribut data-fr-theme pour data-fr-scheme sur la balise <html>
Mise à jour de la structure HTML de la modale de selection (cf: radio riche) et ajout d’un dossier /artwork dans le dossier /dist

Voir la documentation des paramètres d'affichage

Partage
🛠️ correction des espacements titre / bouton

Sommaire
🛠️ Mise à jour de la structure HTML en remplaçant la div qui porte la class fr-summary__title par une balise paragraphe <p>. Il est également possible d’utiliser une balise de heading (h2 à h6) selon votre arborescence. (voir la documentation du sommaire)

Table
🛠️ correction de la couleur des lignes impair en darkmode
🛠️ correction du pointer event sur les tableaux sans js

Navigation
🛠️ correction catégorie du méga-menu en gras quelque soit la balise
🛠️ Retrait du hover sur les items non cliquable du mega-menu
🛠️ correction espacement titre mega-menu mobile

Documentation

🎉 Ajout de la page Javascript
🎉 Ajout des pages expliquant la nouvelle palette et le système colorimétrique.
🎉 Ajout de la page de démarrage Figma

Carte, Citation, Mise en avant, Mise en exergue, Tableau, Tag, Tuile
🎉 Ajout du bloc d’accentuation des couleurs.

Cases à cocher
🛠️ Revue du paragraphe validation et usage.

Sommaire
🛠️ Mise à jour du snippet de code, et ajout bloc d’explication sur le balisage du titre

Téléchargements

Code

Librairie Sketch

Sous-librairie Sketch d’icônes