Releases: GouvernementFR/dsfr
DSFR v1.7.1
Hotfix
Correctifs sur la version 1.7
Fondamentaux
- Ombres et élévations: correctif de z-index sur IE11
En-tête
- Correctif du mauvais exemple sur le logo opérateur horizontal.
DSFR v1.7.0
🎨 Fondamentaux
✨ Mise à jour de node Sass vers Dart Sass. Implémentation en modules SASS
Ajout d’un dossier 'module' à la racine du projet
Externalisation des mixins et functions Sass dans module/
✨ évolution du système d'élévation et des ombres
🎉 Ajout de fichiers de traduction pour gérer l’internationalisation du contenu des pages d’exemples
🛠️ Amendements sur les CGU du DSFR
🎉 Ajout de 55 pictogrammes dans la librairie d’artworks
🧩 Composants
Sélecteur de langues
🎉 Ajout du composant sélecteur de langue
Footer
🛠️ Correction du snippet du logo main : ajout du prefix fr- sur fr-footer__partners-link
🛠️ Correction du background au survol des liens partenaires en mode sombre
🛠️ Correction de l'attribut ‘title’ du lien de brand et de l’attribut ‘alt’ sur le logo opérateur
Header
🛠️ Correction de l'attribut ‘title’ du lien de brand et de l’attribut ‘alt’ sur le logo opérateur
🎉 Ajout d’un exemple avec sélecteur de langue
Liens
🛠️ Correction du soulignement au hover
Champs de saisie - Input
✨ Séparation de input en sous composants : input-base, input-tel, input-email
Pagination
🛠️ Correction du style des liens en <button>
Content, média
🛠️ Correction du bug de ratio sur les iframe youtube sur android
Indicateur d'étape - Stepper
🛠️ Correction du bug sur firefox masquant la barre d’état
📄 Modèles de pages
🎉 Création d’une section ‘page’ dans example/
🎉 Ajout de modèles de page 404
📄 Blocs fonctionnels (patterns)
🎉 Création d’une section ‘pattern’ dans example/
Les blocs fonctionnels sont à venir 😉 .
DSFR v1.6.0
🎨 Fondamentaux
Global
✨ Migration du système de build de node-sass vers sass-dart.
Icons
✨ Évolution de la gestion du placement des icônes dans les composants offrant la possibilité d’avoir une icône adjointe au label. Précédemment, le rendu d’affichage de ces composants se faisait en flex-box, avec l'icône rendue dans un pseudo-élément before et le placement déterminé par la propriété flex-direction en row ou row-reverse. Désormais, ces composants peuvent être rendu suivant le cas en inline ou en flex-box, l'icône pouvant être dans un pseudo-élément before ou after, suivant son placement à gauche ou à droite. En inline, le placement de l'icône se fait suivant l'alignement vertical et la taille de fonte. Cette évolution permet d'avoir l'icône inclue dans la ligne dans le cas où le label occuperait plusieurs lignes, notamment link
Medias
✨ En remplacement des modificateurs spécifiques fr-responsive-img--xxx et fr-responsive-vid--xxx, maintenant dépréciés, ajout d’utilitaires permettant de gérer le ratio d’aspect de manière générique : fr-ratio-32x9 fr-ratio-16x9 fr-ratio-3x2 fr-ratio-4x3 fr-ratio-1x1 fr-ratio-3x4 fr-ratio-2x3
🎉 Ajout des pictogrammes illustratifs
🧩 Composants
Badge
🛠️ Ajustement des espacements dans un groupe de badges
Breadcrumb
✨ Passage du breadcrumb en inline pour un affichage sur plusieurs lignes
Button
🛠️ Ajustement des espacements dans un groupe de boutons
Consent
✨ Correction cosmétique du bouton permettant de déployer les services.
Download
🛠️ Correction de la couleur des puces dans les listes de liens de téléchargement pour la couleur bleue.
Follow
✨ Ajout de réseaux sociaux dans les modificateurs inclus dans le composant, évitant une dépendance à utiliy/icons. Documenté dans les pages d’exemple.
Header
🛠️ Correction de la marge basse des liens rapides en version desktop
✨ Retrait du séparateur entre les liens rapides
🛠️ Ajustement des marges
Icons
🛠️ Correction du support déprécié de l’utilitaire .fr-fi-checkbox-circle-line
Logo
🛠️ Correction marges du logo en multiple de 4px
Links
🛠️ Revue du placement des icônes.
Navigation
🛠️ Correction de la gestion du focus par le JS au clic sur les éléments de navigation
Notice
🎉 Ajout du composant notice / Bande d’information importante
Sidemenu
✨ Changement de balise du titre pour un heading au lieu d’un paragraphe
Share
✨ Ajout de réseaux sociaux dans les modificateurs inclus dans le composant, évitant une dépendance à utiliy/icons. Documenté dans les pages d’exemple.
Stepper
🎉 Ajout du composant Indicateur d'étape
Tab
✨ Changement dans la méthode d’affichage des bordures et des éléments.
Table
🛠️ Correction bug IOs sur les bordures
Tag
🛠️ Ajustement des espacements dans un groupe de tags
DSFR v1.5.2
Hotfix
Correctifs sur la version 1.5
Liens
- Correction du soulignement des liens sur plusieurs lignes
- Correction du target="_blank" ajoutant une icône sur la balise
<form>
DSFR v1.4.3
Correctifs sur la version 1.4
Carte
- Correction du souligné sur le titre des Cartes, introduit en 1.4.2
DSFR 1.4.2
Correctifs sur la version 1.4
Liens
- Correction du soulignement des liens sur plusieurs lignes
- Correction du target="_blank" ajoutant une icône sur la balise
<form>
DSFR v1.5.1
Général
🛠️ Dist: correction du nom de fichier dsfr.nomodule.*.js
🧩 Fondamentaux
Icones
🛠️ Correction sur les icônes deprecated
Téléchargement de fichier
🛠️ Correction IE 11 - non prise en charge du poids du fichier ne cause plus d'erreur.
DSFR v1.5.0
🎨 Fondamentaux
✨ Ajouts d’icônes supplémentaires et classement par catégories (celles de RemixIcon).
Déplacement des utilitaires d’icônes dans un dossier utility.
Les classes d’icônes peuvent maintenant être importés depuis
dist/utility/utility.css et dist/utility/icons/icons.css, ou plus spécifiquement par catégorie, ex: dist/utility/icons/icons-system/icons-system.css.
Les icônes du dsfr sont préfixées par “fr--”, contrairement à celles de remixIcon.
Les icônes ne sont plus utilisées sous la forme d'une font-icon mais en mask-image: url() avec le chemin de l’icône.
🧩 Composants
Button
✨ Evolution de la taille des boutons (marge intérieur)
Carte
✨ Evolution de la carte
Checkbox
🛠️ Correction bug NVDA de restitution du label
France Connect
🛠️ Ajout attribut rel='noopener' sur le lien ‘Qu’est ce que FranceConnect'
Footer
🛠️ Correction de l’alignement des logos partenaires
Header
🎉 Ajout de la mention de site en beta
Input
🛠️ Correction input type date, la classe fr-fi-calendar-line n'est plus nécéssaire
Téléchargement de fichier
🎉 Ajout du composant Téléchargement de fichier
DSFR v1.4.1
Bouton FranceConnect
🛠️ Retrait du paragraphe de description.
🛠️ Correction de l’intitulé du lien Qu’est-ce que FranceConnect.
✨ Ajout d’un attribut target (_blank) sur le lien.
Tag
🛠️ Tag SM selectionnable: correction du background lorsque le tag est selectionné.
Follow
🛠️ Correction des classes “dépréciées” pour prendre en compte les liens avec icônes customs.
DSFR v1.4.0
🎨 Fondamentaux
🛠️ Fonte Marianne: nouvelle version corrigeant l'alignement avec les icônes.
🎉 Mise en place d’un système de dépréciation. Les modifications de classes CSS et de structure HTML dites “Breaking changes” (représenté par ce picto :
Il est cependant conseillé de recourir à ces modifications rapidement afin d'éviter le dédoublement du code et des problèmes de maintenabilité futurs.
🎉 Mise en place d’un système de variabilisation du core. Le fichier scr/core/variables.scss permet de configurer les classes utilitaires et style du reset du core que l'on souhaite build. Pour rebuild le core il est nécessaire de disposer des outils de build du dsfr (dossier /tool) disponible depuis git uniquement (hors release).
La command yarn build -p core permet alors de regénérer le fichier core.css
✨ Amélioration des template EJS, maintenant plus paramétrables.
🛠️ Correction de l’animation du collapse sur firefox
🛠️ Correction de nom de classes utilitaires :
fr-display-sm devient fr-display--sm (idem pour md, lg, xl)
fr-text--xx-bold devient fr-text--heavy
fr-displayed-sm devient fr-unhidden-sm (idem pour md, lg, xl)
fr-displayed-(sm,md,lg) , fr-display-(sm,md,lg) , fr-text--xx-bold sont dépréciés.
Utilisez maintenant respectivement : fr-unhidden-(sm,md,lg) , fr-display--(sm,md,lg) , fr-text--heavy
🎉 Ajout des icônes :
Action
zoom-in-line + zoom+in-fill
zoom-out-line + zoom-out-fill
link-unlink
italic
list-ordered
list-unordered
font-size
bold
highlight
phone-line + phone-fill
Contenus et médias
rss-line + rss-fill
image-line + image-fill
line-chart-line + line-chart-fill
map-pin-2-line + map-pin-2-fill
road-map-line + road-map-fill
timer-line et timer-fill
Navigation
home-4-line + home-4-fill
arrow-go-back-line + arrow-go-back-fill
arrow-up-fill (pour le back-to-top)
🧩 Composants
Des modifications dites “Breaking Change” sont à prévoir.
Il n’y aura pas d’impacte visuel puisqu’une version deprecated est maintenu un certain temps pour facilité la monté de version. Néanmoins ces changements doivent être pris en compte avant la fin du cycle de dépréciation (à venir).
Suite à la nouvelle version des boutons, certains lien deviennent des boutons tertiaires. Des modifications de classes ont donc été apporté sur certain composants : alert, content, modal, follow, share, consent, header.
L'évolution de la classe utilitaire fr-displayed, qui devient fr-unhidden, implique des changements sur pagination et navigation.
Accordéons
<ul> et <li> sont dépréciées <ul class="fr-accordions-group"> devient <div class="fr-accordions-group">
Bouton
🎉 Ajout du bouton tertiaire fr-btn--tertiary et tertiaire sans contour fr-btn--tertiary-no-outline
Content
fr-btn
Modal
🛠️ Correction JS, modal cachée en no CSS
fr-btn fr-btn--close.
Alert
fr-btn fr-btn--close.
Gestionnaire de consentement
fr-btn fr-btn--close.
Header
fr-btn fr-btn--close.
Le groupe de lien d’accès rapide, devient un groupe de bouton :fr-links-group est déprécié et est remplacé par fr-btns-group , fr-link est déprécié et est remplacé par fr-btn.
Follow
fr-btns-group.
fr-links-group--lg est retiré (et de plus remplacée par fr-btns-group--lg).
Les classes fr-link--facebook fr-link sont dépréciées et remplacées par fr-btn--facebook fr-btn (idem pour les autres liens)
Share
Les liens de partage ont maintenant une apparence de boutons tertiaires. Le groupe de liens devient un groupe de boutons.
fr-btns-group.
fr-share__link fr-share__link--facebook est déprécié et devient fr-btn fr-btn--facebook (idem pour les autres liens)
Navigation
fr-btn fr-btn--close.
Dans l’exemple du ‘leader’ du mega-menu : fr-displayed-lg est déprécié et devient fr-unhidden-lg.
Pagination
L’utilitaire fr-displayed est déprécié et devient fr-unhidden
(à utiliser conjointement avec fr-hidden).
fr-hidden fr-unhidden-lg.
Sidemenu
🛠️ correction de la hauteur du sidemenu sticky
Tab
🛠️ correction z-index des panel (provoquait des bug avec la modal).