Releases: GouvernementFR/dsfr
DSFR v1.3.1
Global
🛠️ Numéro de version dans les fichiers : 1.3.1 remplace 1.2.1.
✨ Documentation template ejs
✨ Mise à jour de la dépendance “simple-get” en 4.0.1
Core
🎉 Ajout du module font-swap
🛠️ Correctif de la régression sur l’ordre des média queries (MD n'était plus pris en compte)
🛠️ Correction de l’alignement des icônes (span inline)
Alerte
🎉 Exemple d’ajout dynamique d’une alerte refermable (pour illustrer l’utilisation du role=”alert”)
Bouton radio / Case à cocher
🎉 Ajout d’un exemple avec et
🛠️ Correction de la gestion de l’attribut checked
Interrupteur
🛠️ correctif a11y : activé/désactivé n’est plus restitué deux fois par les lecteurs d'écran
🛠️ correctif de l’affichage du status sur firefox
🛠️ Correction de la gestion de l’attribut checked
Média
🛠️ “e” manquant dans le commentaire accompagnant les image
(““)
Menu principal
🛠️ Correction du focus des sous items qui était tronqué
🛠️ Refactorisation du template ejs de header et ses sous templates & ajout documentation
🛠️ Correction du bouton fermer du mega menu, maintenant entièrement cliquable
Menu latéral
🛠️ Correction du focus des sous items qui était tronqué
Modal
🛠️ ajout de l’attribut aria-hidden="true" sur le span de l’icône du titre de la modal.
DSFR v1.3.0
🌎 Global
🛠️ Correction du chargement des CSS vars par défaut lorsque les cookies sont désactivés.
🛠️ Correction d’un bug javascript sur l’utilisation de la méthode .classList() dû au chargement des scripts de polyfill dans le script dsfr.module.js
🛠️ Mise à jour de la documentation des templates ejs
🎨 Fondamentaux
🎉 Ajout d’une nouvelle police de caractères pour les icône systèmes
fr-icon-error-fill & fr-icon-error-line
fr-icon-info-fill & fr-icon-info-line
fr-icon-warning-fill & fr-icon-warning-line
fr-icon-success-fill & fr-icon-success-line
🎉 Ajout d’un reset CSS pour les balises et et exemples d’implémentation pour utilisation dans les radio-button ou checkbox
🎉 Liste exhaustive des utilitaires d'espacements dans l’exemple du core. Ajout des tokens n1-5v, n0-5v, 0-5v, 1.5v (valant respectivement -6px, -2px, 2px, 6px).
🧩 Composants
Alerte
🚫 Retrait de l’attribut role=”alert” par défaut. Ce rôle doit être ajouté sur les alertes dynamique, qui sont injectée dans le DOM au cours de la navigation dans une page.
✨ Mise à jour des icônes de status
Champs de saisie
✨ Mise à jour des icônes d’erreur et de succès.
Contenu média (a11y)
🎉 Ajout d’attributs role='img’ et aria-label sur les svg porteurs de sens.
✨ Ajout d’un exemple de svg non porteur de sens
Gestionnaire de consentement - Consent (a11y)
🎉 Ajout d’attributs “title” sur les boutons “tout accepter”, “tout refuser”, “personnaliser”
Attributs aria sur le fieldset des services du formulaire de consentement, plutot que sur la légende :
Retrait de l’attribut aria-describedby de la balise legend
🎉 d'id aux balises legend
🎉 Ajout de l’attribut aria-labelledby sur les balises fieldset ayant pour valeurs les id du tag legend et et de la description.
🎉 Ajout d’un attribut aria-describedby sur les boutons ‘voir plus de détail’ affichant les sous-finalité.
Lettre d’information & RS - Follow (a11y)
🎉 Ajout de l'attribut autocomplete='email' pour gérer l’auto-complétion
✨ Message d’erreur plus précis, avec un exemple d’adresse électronique différent de celui présent dans le placeholder.
✨ Attribut title des liens externes plus court “intitulé lien - ouvre une nouvelle fenêtre”
✨ Mise à jour de l’icônes d’erreur.
Partage (a11y)
🎉 Ajout des attributs role=”link” et aria-disabled=”true” sur les liens désactivés
🎉 Message d’explication avant les boutons désactivés dans le DOM
✨ Attribut title des liens externes plus court “intitulé lien - ouvre une nouvelle fenêtre”
✨ Ajout d’un exemple de svg non porteur de sensOnglets - tabs
🎉 Ajout d’un js pour scroll vers le bouton sélectionné
DSFR v1.2.1
🛠️ 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.
- 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
DSFR v1.2.0
Architecture
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 instantiés de façon réactive grâce aux mutationObserver. Il est maintenant possible d’accéder à un composant et ses methodes 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();
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'
- l’attribut style est retiré sur le label (style=”background-image:…”)
- l’image illustrative est maintenant insérée via une balise placée dans une
✨ Il est maintenant possible d’utiliser une icone illustrative du DSFR(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à
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 ou
, et le lien devient facultatif.
✨ Ajout d’une troisième option ‘système' dans la modale de selection
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
. 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
DSFR v1.1.0
Fondamentaux
Core
🛠️ Collapse, problème de visibilité avec visibility: visible, passe en inherit.
Composants
Cases à cocher
🛠️ Label long ne passe plus à ligne
Citation
🎉 Ajout du composant
Lettre d’information et réseaux sociaux
🎉 Ajout du composant
Partage
🎉 Ajout du composant
Tableau
🛠️ Comportement sans JS
DSFR v1.0.0
Fondamentaux
✨ Icons : correction des utilitaires de taille d’icones ‘fr-fi--size’ et ajout taille fr-fi--md
🎉 Icons : ajout des icônes checkbox-circle-fill, checkbox-circle-line, error-warning-fill, error-warning-line, et close-circle-fill
🚫 Icons : remplacement de l’icône checkbox-fill par checkbox-circle-fill
🛠️ Reset : input, select et textarea utilise maintenant la fonte Marianne
🛠️ Correction des listes à puces
Composants
Boutons
🛠️ Correction du nom de la partial scss qui générait un css à part.
Boutons radios / Cases à cocher
🛠️ Correction de l’inversion du label
Cartes
✨ Déplacement du bloc détail en bas de carte
Le paragraphe fr-card__detail a été déplacé afin que le titre soit en première position et répondre ainsi aux critères d’accessibilité.
La mise à jour de la feuille de style n’entraine pas de régression visuelle si vous conservez l’ancien positionnement, mais nous conseillons fortement mettre à jour vos cartes pour améliorer l’A11Y !
En-tête
🛠️ Id sur le bouton d’ouverture du menu en mobile (se retrouvant dans l’attribut aria-labelledby de la navigation)
Modale
🛠️ correction A11y, couleur du titre, et espacements
🛠️ Focus trap: observer remonté d’un niveau.
Navigation
🛠️ Correction bug du changement de sens du chevron au click.
Tabs
🛠️ Correctif bug de transition
Utilities
🎉 Ajout de la page d’exemple des utilitaires d’espacements
✨ Espacement jusqu’à 32v
Pagination
🛠️ Correction du snippet
Skiplinks
🛠️ Correction du snippet, balise
v1.0.0rc1
Fondamentaux
✨ Changement du préfixe de toutes les classes : fr-.
✨ Valeur de couleur du bleu France en theme sombre.
✨ Evolution de la couleur des hovers transverse en thème sombre.
🎉 CORE - Ajout d’icônes dans la font-icon (arrow-double, refresh, theme, les réseaux sociaux…) ?
🎉 Grilles - Ajout de version responsive pour les gouttières
🛠️ Changement de structure: le dossier /packages devient /src.
Dans chaque ‘package’ les dossier scripts, style, template (auparavant dans ‘src’) remontent d’un niveau.
Composants
Boutons Radios, Cases à cocher
🛠️ Style de la légende sans graisse (regular).
🛠️ role=”group” retiré des groupes n’ayant pas de messages d’erreur ou de succès.
Interrupteur
✨ Nomenclature BEM de la liste d’interrupteurs, la classe .fr-toggle-list devient .fr-toggle__list
🛠️ correction de la marge entre l'input et le label sans texte activé/désactivé.
Menu latéral
🛠️ Correction des marges et des items actifs.
Navigation principale
✨ Révision générale de la navigation
🛠️ Modale retirée de .fr-nav(remise au niveau du header)
🛠️ .fr-link--close remis dans la modale du header
🛠️ classes des
🛠️ .fr-nav__item--active .fr-menu__item--active .fr-mega-menu__item--active .fr-mega-menu__category--active dépréciées, l’item active est signifiée directement sur le bouton .fr-nav__btn ou le lien .fr-nav__link grâce à la présence de l’attribut aria-current
🛠️ Contenu éditorial du mega-menu inséré dans un wrapper .fr-mega-menu__leader
🛠️ Paragraphe du contenu éditorial caché en mobile et visible à partir du point de rupture LG grâce aux utilitaires .fr-hidden et .fr-displayed-lg
🛠️ Alignement du lien du contenu éditorial grâce à l’ajout de l’utilitaire .fr-link--align-on-content
En-tête
✨ Révision générale du header
🛠️ Ajout d’un wrapper autour de la navigation pour la modale du menu mobile .fr-header__menu et déplacement du bouton .fr-link--close en premier enfant.
??️ Ajout d’un wrapper autour de la barre de recherche pour la modale mobile .fr-header__search et déplacement du bouton .fr-link--close en premier enfant.
🛠️ Insertion du conteneur .fr-container redistribué dans .fr-header__body et .fr-header__menu
🛠️ Ajout d’un wrapper .fr-header__body-row contenant .fr-header__brand et .fr-header__tools
🛠️ Ajout d’un wrapper .fr-header__brand-top pour la ligne du haut de .fr-header__brand en mobile
🛠️ Déplacement de .fr-header__navbar dans .fr-header__brand-top
🛠️ Renommage de .fr-shortcuts en .fr-links-group et classes enlevées des
🛠️ Insertion d’un conteneur .fr-container dans .fr-header__search avec le modificateur .fr-container-lg--fluid
🛠️ Ajout d’un wrapper .fr-header__tools-links dans .fr-header__tools, contenant les liens d'accès direct .fr-links-group
🛠️ Ajout d’un élément .fr-header__menu-links dans .fr-header__menu où seront déplacés les liens d’accès direct
Pied de page
🛠️ correction hauteur max des logos partenaires.
Pagination
🛠️ correction des boutons icones + texte (ajustement de la taille).
Sommaire
🛠️ Correction des marges.
Liens
🎉 Ajout d’une classe utilitaire .fr-link--align-on-content
🎉 Ajout de classes utilitaire .fr-raw-link et .fr-reset-link permettant d’annuler les styles de liens (sur les images et figure).
DSFR v0.6.0
All/Transverse
🎉 Ajout du composant Paramètres d’affichage.
🎉 Ajout des Icones de favoris.
La version 0.6.0 apporte de nombreux changements faits durant les dernières semaines, au niveau de la structure globale du projet, ainsi qu’au niveau du code.
L'audit d’accessibilité nous a amené à faire un certain nombre de modifications sur l’ensemble des composants, notamment le composant onglet dont la structure change significativement.
Nous essayons d’être le plus exhaustif possible quand aux modifications opérées entre la v0.5.3 et la version actuelle.
Avec la version 0.6.0, la structure du projet a changé.
Nous passons à un package npm unique.
Il est disponible via npm / yarn : @gouvfr/dsfr
La structure que nous mettons à disposition , sur le zip ou npm est désormais la suivante:
- dist: contient les sources à placer à la racine de votre site (js, css, fonts, favicons).
-packages : contient les sources js et sass des différents composants. - examples: contient des snippets html d’example des composants que vous pouvez consulter en local (idéalement sur serveur http local de type http-server ou autre).
All / transverse
✨ Passage à un package unique: @gouvfr/dsfr, afin de simplifier le versionning et la structure globale du projet.
✨ Passage en modules ES6 : 2 fichiers sont désormais nécessaires (.module et .nomodule) pour inclure le code js.
Attention à bien mettre les attributs afin de faire fonctionner les fichiers:
<script type="module" src="js/dsfr.module.min.js"></script> <script type="text/javascript" nomodule src="js/dsfr.nomodule.min.js"></script>✨ Evolution : disclosure v2 mis en place sur accordions, navigation, header, sidemenu de la v2 de
🚫 Suppression de l’attribut data-rf-reset : le reset n’est plus optionnel sur les balises génériques.
🚫 Suppression de la classe rf-prose.
🚫 Suppression de la classe rf-list.
🎉 Ajout des classes utilitaires: rf-raw-link (annule le souligné / icone nouvelle fenetre, utilise pour les images) , rf-reset-link, hidden-bp, display-bp.
Boutons radio / boutons radio 'riches'
🛠️ Correction du bug d’ordre d’affichage des caractères spéciaux dans les labels.
🛠️ Le texte d’aide (.rf-hint-text) est déplacé dans la balise .
🚫 : Suppression de l’attribut aria-describedby.
🎉 : ajout d’un attribut id.
🎉
🎉 Sur les groupes de bouton radio ajout d’un role=”group” et d’un attribut aria-labelledby sur la balise qui référence la légende et le message (d’erreur ou de succès) lorsqu’il est affiché.
ex: aria-labelledby=”id-legend id-block-message” .
Barre de recherche
🎉 ajout d’un attribut role=”search” sur l'élément .rf-search-bar
Barre de recherche - Search bar ( Mis à jour - v0.6.0)
Cartes
🛠️ Inversion du bloc image et du body afin que le titre soit le premier élément.
✨ L'extension du lien sur l’ensemble de la carte est géré par la classe .rf-enlarge-link.
Cases à cocher
🛠️ Correction du bug d’ordre d’affichage des caractères spéciaux dans les labels.
🛠️ Le texte d’aide (.rf-hint-text) est déplacé dans la balise .
🚫 : Suppression de l’attribut aria-describedby.
🎉 : ajout d’un attribut id.
🎉
🎉 Sur les groupes de cases à cocher, ajout d’un role group et d’une propriété aria-labelledby sur la balise qui référence la légende et le message (d’erreur ou de succès) lorsqu’il est affiché.
ex: aria-labelledby=”id-legend id-block-message” .
🛠️ Sur la case à cocher seule avec message (d’erreur ou de succès) La propriété aria-describedby est sur la balise (et non plus sur le label).
Champ de saisie
🛠️ La propriété aria-describedby est mise sur la balise (et non plus sur le label) pour lier les messages (d’erreur ou de succès).
🛠️ Correction du rendu du champ date.
🎉 Possibilité d’ajouter une icône sur le champ de saisie.
En-tête - Header
🛠️ Changement de structure du bloc ‘brand’.
Un seul lien se trouvant sur le nom du site (se trouvant, selon l’architecture du header, sur le bloc marque ou le nom du site), qui est étendu au bloc brand via la classe ‘rf-enlarge-link’.
🎉 Ajout de la classe rf-modal sur l'élément et le bloc rf-header__tools, pour gérer les modales du menu et de la recherche en mobile. Ajout ‘en dur’ des boutons d’ouverture et de fermeture des modales (et non plus injectés en js comme précédemment).
Fil d’arian
🎉: ajout d’un attribut role=navigation.
✨ Mobile: utilisation du collapse v2. Ajout des attributs aria-expanded et aria-controls sur le bouton.
Ajout d’un .
🎉 L'élément courant est encapsulé dans un sans attribut href, et ayant un attribut aria-current=page.
Fil d'Ariane - Breadcrumb - (Mis à jour - v0.6.0)
Icône
🎉 ajout d’attribut aria-hidden=”true” sur les
Icônes - Icons (Mis à jour - v0.6.0)
Interrupteur
🎉 Ajout d’un id sur l'élément rf-hint-text
🎉 : ajout d’un attribut aria-labelledby lié à l'élément rf-hint-text si ce dernier est présent.
Interrupteur - Toggle switch (Mis à jour - v0.6.0)
Liens d'évitement
🛠️
🛠️ Changement des intitulés des liens
Liens d'évitement - Skiplinks (Mis à jour - v0.6.0)
Liste déroulante
🛠️ La propriété aria-describedby est mise sur la balise (et non plus sur le label) pour lier les messages (d’erreur ou de succès).
Liste déroulante - Select (Mis à jour - v0.6.0)
Médias intégrés au contenu
🛠️ Bouton de transcription rf-btn modifié en lien rf-link.
🚫 Suppression des attributs width et height des iframes.
🎉 : ajout d’un attribut role=”group”.
🎉 : ajout d’un attribut aria-label reprenant le texte de la balise .
Médias (intégrés au contenu) - Responsive medias (Mise à jour - v0.6.0)
Mise en exergue
🚫 Suppression des classes rf-highlight--sm et --lg.
On utilise les classes utilitaire rf-text--sm et --lg sur le paragraphe.
Mise en exergue - Highlight
Modale
🛠️ Attribut aria-expanded supprimé et remplacé par l’attribut data-rf-opened sur le bouton d’ouverture.
Modale - Modal (Mis à jour - v0.6.0)
Navigation Principale
🎉 Ajout de la classe rf-modal (mobile), ajout du bouton de fermeture de la modale mobile.
🛠️ Changement des classes rf-btn et rf-link remplacée par rf-nav__btn et rf-nav__link.
🎉 Ajout de l’attribut aria-current=”true” sur l’item de menu actif (niveau supérieur)
🎉 Ajout de l’attribut aria-current=”page” sur le lien de la page courante.
Navigation principale - Main navigation (Mis à jour - v0.6.0)
Menu latéral
🎉 : ajout de l’attribut role=”navigation”.
🎉 Ajout de l’attribut aria-current=”true” sur l’item de menu actif (niveau supérieur)
🎉 Ajout de l’attribut aria-current=”page” sur le lien de la page courante.
🛠️ Correction : harmonisation des espacements bas des symboles desktop
Menu latéral - Side menu (Mis à jour - v0.6.0)
Onglets
🛠️ Changement de la structure globale :
les éléments .rf-tabs__panels sont déplacés en dehors de l'élement rf-tabs__list.
🎉 Ajout de l’attribut aria-label sur l'élément .rf-tab__list.
🎉 Ajout d’un attribut aria-labelledby sur tabs__panels lié au tab.
Onglets - Tabs (Mis à jour - v0.6.0)
Pied de page - Footer
🎉 Ajout du bloc licence
🚫 Suppression du bloc copyright.
🛠️ Changement du code du bloc marque. Le lien est élargi via la classe rf.enlarge-link.
🛠️ L'élement rf-footer__top-cat devient un heading hx .
🛠️ Les logos partenaires sont désormais dans une liste
🛠️ Rajout du prefixe sur les classes “footer__partners-link”.
Pagination
🎉 : ajout de l’attribut role=”navigation”.
🚫 Suppression des classes sur les élément
🛠️ Changement des classes sur les éléments (.pagination__link et modificateurs)
🛠️ Les éléments inactifs deviennent des liens sans attribut href.
🛠️ La gestion de l’affichage selon les breakpoints est faite via les classes utilitaires (rf-displayed-lg)
Pagination - Pagination (Mis à jour - v0.6.0)
Sommaire
🎉 Ajout de l’attribut id sur l'élément .rf-summary__title.
🛠️ : remplacement de l’attribut aria-label par un attribut aria-labelledby , lié à l’id de l'élément rf-summary__title.
Sommaire - Summary (Mis à jour - v0.6.0)
Tableau
🛠️ Correction sur scroll horizontal.
Tableau - Table (Mis à jour - v0.6.0)
Tag
🛠️ Tags non cliquables deviennent des (et non plus des ).
Tag (Mis à jour - v0.6.0)
Tuile
🛠️ Inversion du bloc image et du body afin que le titre soit le premier élément.
✨ L'extension du lien sur l’ensemble de la carte est géré par la classe .rf-enlarge-link.
DSFR v0.5.3
All / transverse
✨Consolidation du core, rapatriement des scripts d'utilitaire et de la grille.
✨ Nouveau token v et w systématisé, N supprimé.
✨ Nouvelles mixins (spacing, text...).
✨ Nouveau système de font-size, line-height et spacing.
✨ Nouvelle largeur maximum pour le container : 1200px.
✨ Nouvelle version des fontes.
✨ Evolution : disclosure (collapse) [v2] et mise en place sur accordions, navigation, header, sidemenu.
🎉 Ajout des classe de margin auto dans les utilities.
🎉 Ajout de h5 et h6.
🎉 Responsive container.
🎉 Ajouts de commentaire dans le code sass (inputs, form).
Accordéon
✨ Evolution du système de collapse (classe .rf-collapse)
BREAKING CHANGE : cette évolution nécessite de mettre à jour le code du composant en 0.5.0:
Voir les nouveaux snippets de l'accordéon
Cases a cocher
🛠️ Correction : case à cocher small a retablies.
Champs de saisie, boutons radios, cases à cocher et liste déroulante
✨ Évolution de la taille du texte de 14 px à 16 px (fix zoom sur ios).
Champs de saisie
🛠️ Correction : Le style d’erreur n’apparait plus avec la pseudo class ::invalid (les champs required apparaissaient par défaut en erreur).
🛠️ Correction : Le comportement natif des champs date (icone calendrier) et number (flèches d’incrément/décrément) est rétabli.
🛠️ Correction : opacité par défaut du placeholder sur Firefox à 1.
Footer
🛠️ Correction : bloc site public centré si la description n’est pas présente.
🛠️ Correction : lien footer top non iso librairie.
🛠️ Correction : Spacing des liens du footer (bloc mentions légales).
Header
🛠️ Correction : Dev bouton burger tronqué.
Icones
✨ Évolution : changement des classes de taille : .rf-fi (défaut: MD 24x24), .rf-fi--sm (16x16), .rf-fi--lg(32x32), .rf-fi--xl n’existe plus (remplacée par LG).
Interrupteur
🛠️ Correction : Espacement trop faible entre le libellé et l'interrupteur.
🛠️ Correction : curseur au survol.
Liens
✨ Ajout de rf-link--close.d
Liens d'évitement
🛠️ Correction : spacing iso librairie.
Media
🛠️ Correction : Image LG rétablie.
Menu latéral
✨ Evolution du système de collapse (classe .rf-collapse)
BREAKING CHANGE : cette évolution nécessite de mettre à jour le code du composant en 0.5.0:
Voir les nouveaux snippets du menu latéral
Navigation
✨ Evolution du système de collapse (classe .rf-collapse)
BREAKING CHANGE : cette évolution nécessite de mettre à jour le code du composant en 0.5.0:
Voir les nouveaux snippets de la navigation principale
Sommaire
Evolution : rf-container retiré du composant.
Tags
🛠️ Correction : tabs focus panel caché.
🛠️ Correction : tabs focus avant interaction retiré.
🛠️ Correction : liste cassée dans un tabpanel
🛠️ Correction : overflow du tabpanel sur un contenu dynamique.
DSFR v0.4.0
All / transverse
✨ Evolution: nouvelles couleurs pour les éléments désactivés. Le background passe de g300 à g200, et le texte de g600-g500 à g-600-g400.
✨ Evolution: passage partiel aux unités v et w.
✨ Evolution: ajout de commentaires sur le code (sass et js).
Core
✨ Evolution: rapatriement des packages icons et medias dans le core.
✨ Evolution: gestion du z-index .
✨ Evolution: séparation du reset en 2 parties :
l'attribut data-rf-reset, stylise body, headings et liens.
mini reset sur toutes classes commençant par le prefix du dse.
IMPORTANT
La nouvelle version du reset css du code nécessite l’ajout de l’attribut data-rf-reset sur la balise html : .
Voir la documentation de la typographie mise à jour
✨ Evolution: typography est rappatrié dans le core et est divisé en 2 parties.
rf-prose : conteneur qui stylise les tags headings, liens et listes qu'il contient.
typography : classes qui permettent d'appliquer directement des styles.
IMPORTANT
Le style des listes est désormais lié à la présence de la classe rf-list sur la balise ul/ol , ou de la classe rf-prose sur le parent de la liste. Sinon, c’est le style navigateur qui est appliqué.
Voir la documentation des listes mise à jour.
Boutons, liens, tags: gestion des icônes
✨ Evolution: changement de la gestion des icônes afin de l’uniformiser.
IMPORTANT
Il n’y désormais plus d’affichage d’icône par défaut lorsque les classes rf-composant--icon-left ou rf-composant--icon-right sont utilisées seules. Une classe d’icône doit être présente.
La classe rf-composant--icon-only est dépréciée. Son usage en v0.4.0 ne produira plus le rendu attendu.
A partir de la v0.4.0, il est obligatoire de préciser l’icône à afficher avec la classe correspondante (voir la documentation des icônes).
L’appel à la classe d’icône, par exemple rf-fi-checkbox-line , sans classe de placement aura pour effet de n’afficher que l’icône et de masquer le texte présent (équivalent du rf-composant--icon-only).
<button class=”rf-btn rf-fi-checkbox-line”>Texte du bouton affichera un bouton icone seule.
Pour afficher le texte et placer l’icône à l’endroit voulu, il faut obligatoirement ajouter une classe de placement rf-composant--icon-right (icône à droite du texte) ou rf-composant--icon-left (icône à gauche du texte).
<button class=”rf-btn rf-fi-checkbox-line rf-btn--icon-right”>Texte du bouton affichera
le texte du bouton et l’icone, placée à droite.
Voir les nouveaux snippets des liens
Voir les nouveaux snippets des boutons
Voir les nouveaux snippets des tags
Buttons
🛠️ Correction : contour bouton secondaire sur une balise fonctionne.
Cards
✨ Evolution: la classe rf-cards__lead devient rf-cards__title pour homogénéisation avec les tuiles.
Footer
Evolution: changement et ajouts de classes dans le footer.
IMPORTANT
La classe de la liste contenant les liens gouvernementaux a été modifié, et des classes ont été ajoutées sur les balises a:
changement de la classe rf-footer__content-links en rf-footer__content-listajout sur les liens de la classe rf-footer__content-link
dans le footer complet, Sur les liens de navigation , les balises ont désormais une classe rf-footer__top-link.
Voir la documentation du footer mise à jour
Formulaire (Inputs, checkboxes, boutons radio, select, textarea)
✨ Evolution: le paragraphe de texte descriptif optionnel est déplacé dans le label et change de balise (auparavant
, il devient un ). L’attribut aria-describedby du label et l’id du span sont supprimés :
A noter que l’ancien code fonctionne toujours, il n’y a pas de régression visuelle.
Header
🛠️ Correction : burger menu s’affiche en cas de présences de raccourcis uniquement.
Tuile
✨ Refactorisation du pictograme/image, et gestion du responsive étendue.
Les anciens snippets de code sont obsolètes.
Voir les snippets de code mis à jour dans la documentation
Utilities
✨ Evolution: passage des valeurs des classes de spacing en !important.