Note de version - 1.14

Général

La version 1.14.1 est disponible depuis le 01 septembre 2025.

Code en version 1.14.1

La version 1.14.0 est disponible depuis le 25 Juin 2025.

Code en version 1.14.0

La version 1.14 du DSFR apporte une refonte complète de notre site systeme-de-design.gouv.fr . En plus d’un nouveau socle technique et d’une nouvelle page d’accueil, la documentation de nos composants a été entièrement réécrite et enrichie. Vous pouvez retrouver le détail des nouveautés dans cet article .

Nous mettons également à disposition un menu de navigation tertiaire en version Bêta et quelques correctifs dont vous trouverez l’exhaustivité ci-dessous.

Librairies Figma

Composants

  •  Ajout du composant Navigation tertiaire

Code v1.14.1

Fondamentaux

Pictogrammes

  • Ajout en dev de pictogrammes #1210
    • building
      • base.svg
      • companie.svg
    • digital
      • smartphone.svg
    • document
      • archive.svg
      • binders.svg
      • conclusion.svg
      • document-search.svg
      • driving-license-new.svg
      • international-driving-license-new.svg
      • international-driving-license.svg
      • national-identity-card-passport.svg
      • presse-card.svg
      • sign-document.svg
    • health
      • doctor
      • medical-research
    • institutions
      • army-tank
      • astronaut
      • navy-anchor
      • navy-bachi
    • leasure
      • art
      • audio
      • catalog
      • pictures
      • podcast
      • video
      • video-games
    • system
      • language
      • flow-settings
      • flow-list

Build

  •  Version de Node plus permissive : les versions acceptées sont maintenant "^20.19.0 || ^22.12.0 || >=24.0.0” #1252

Utility

  •  Ajout en dev d’icônes présentes dans la librairie Figma et restructuration des dossiers.  Attention si vous importez uniquement certains dossiers d’icônes : des icônes ont été déplacées de “System” vers un nouveau dossier “Arrow”, ce qui peut entrainer la disparition de ces icônes dans vos pages. (Si vous utilisez utility.css ou icons.css, il n’y aura pas d’impact) #1242
    • Ajout d'une nouvelle section "/arrows" :
      • arrow-down-circle-fill.svg
      • arrow-down-circle-line.svg
      • arrow-left-circle-fill.svg
      • arrow-left-circle-line.svg
      • arrow-left-down-fill.svg
      • arrow-left-down-line.svg
      • arrow-left-right-fill.svg
      • arrow-left-right-line.svg
      • arrow-right-circle-fill.svg
      • arrow-right-circle-line.svg
      • arrow-right-down-fill.svg
      • arrow-right-down-line.svg
      • arrow-right-up-fill.svg
      • arrow-right-up-line.svg
      • arrow-turn-back-fill.svg
      • arrow-turn-back-line.svg
      • arrow-turn-forward-fill.svg
      • arrow-turn-forward-line.svg
      • arrow-up-circle-fill.svg
      • arrow-up-circle-line.svg
      • arrow-up-down-fill.svg
      • contract-left-fill-1.svg
      • contract-left-fill.svg
      • contract-left-line-1.svg
      • contract-left-line.svg
      • contract-left-right-fill-1.svg
      • contract-left-right-fill.svg
      • contract-left-right-line-1.svg
      • contract-left-right-line.svg
      • contract-right-fill-1.svg
      • contract-right-fill.svg
      • contract-right-line-1.svg
      • contract-right-line.svg
      • contract-up-down-fill-1.svg
      • contract-up-down-fill.svg
      • contract-up-down-line-1.svg
      • contract-up-down-line.svg
      • corner-down-left-fill.svg
      • corner-down-left-line.svg
      • corner-down-right-fill.svg
      • corner-down-right-line.svg
      • corner-left-down-fill.svg
      • corner-left-down-line.svg
      • corner-left-up-fill.svg
      • corner-left-up-line.svg
      • corner-right-down-fill.svg
      • corner-right-down-line.svg
      • corner-right-up-fill.svg
      • corner-right-up-line.svg
      • corner-up-left-fill-1.svg
      • corner-up-left-fill.svg
      • corner-up-left-line-1.svg
      • corner-up-left-line.svg
      • corner-up-right-fill-1.svg
      • corner-up-right-fill.svg
      • corner-up-right-line-1.svg
      • corner-up-right-line.svg
      • expand-left-fill-1.svg
      • expand-left-fill.svg
      • expand-left-line-1.svg
      • expand-left-line.svg
      • expand-left-right-fill-1.svg
      • expand-left-right-fill.svg
      • expand-left-right-line-1.svg
      • expand-left-right-line.svg
      • expand-right-fill-1.svg
      • expand-right-fill.svg
      • expand-right-line-1.svg
      • expand-right-line.svg
      • expand-up-down-fill-1.svg
      • expand-up-down-fill.svg
      • expand-up-down-line-1.svg
      • expand-up-down-line.svg
      • skip-down-fill.svg
      • skip-down-line.svg
      • skip-up-fill.svg
      • skip-up-line.svg
    • Déplace depuis  la section "/system" dans la nouvelle section "/arrows" :
      • fr--arrow-left-s-first-line.svg
      • fr--arrow-left-s-last-line.svg
      • fr--arrow-s-line-double-line-1.svg
      • fr--arrow-s-line-double-line.svg
      • arrow-down-fill.svg
      • arrow-down-line.svg
      • arrow-down-s-fill.svg
      • arrow-down-s-line.svg
      • arrow-go-back-fill.svg
      • arrow-go-back-line.svg
      • arrow-go-forward-fill.svg
      • arrow-go-forward-line.svg
      • arrow-left-fill.svg
      • arrow-left-line.svg
      • arrow-left-s-fill.svg
      • arrow-left-s-line.svg
      • arrow-left-up-fill.svg
      • arrow-left-up-line.svg
      • arrow-right-fill.svg
      • arrow-right-line.svg
      • arrow-right-s-fill.svg
      • arrow-right-s-line.svg
      • arrow-up-down-line.svg
      • arrow-up-fill.svg
      • arrow-up-line.svg
      • arrow-up-s-fill.svg
      • arrow-up-s-line.svg
    • Ajout dans la section "/buildings" :
      • building-4-fill.svg
      • building-4-line.svg
      • home-office-fill.svg
      • home-office-line.svg
      • school-fill.svg
      • school-line.svg
      • tent-fill.svg
      • tent-line.svg
    • Ajout dans la section "/business" :
      • archive-drawer-fill.svg
      • archive-drawer-line.svg
      • at-fill.svg
      • at-line.svg
      • bar-chart-2-fill.svg
      • bar-chart-2-line.svg
      • bar-chart-fill.svg
      • bar-chart-horizontal-fill.svg
      • bar-chart-horizontal-line.svg
      • bar-chart-line.svg
      • bubble-chart-fill.svg
      • bubble-chart-line.svg
      • calculator-fill.svg
      • calculator-line.svg
      • calendar-check-fill.svg
      • calendar-check-line.svg
      • calendar-close-fill.svg
      • calendar-close-line.svg
      • calendar-todo-fill.svg
      • calendar-todo-line.svg
      • cloud-off-fill.svg
      • cloud-off-line.svg
      • donut-chart-fill.svg
      • donut-chart-line.svg
      • honour-fill.svg
      • honour-line.svg
      • inbox-2-fill.svg
      • inbox-2-line.svg
      • inbox-archive-fill.svg
      • inbox-archive-line.svg
      • inbox-fill.svg
      • inbox-line.svg
      • inbox-unarchive-fill.svg
      • inbox-unarchive-line.svg
      • mail-add-fill.svg
      • mail-add-line.svg
      • mail-check-fill.svg
      • mail-check-line.svg
      • mail-close-fill.svg
      • mail-close-line.svg
      • mail-download-fill.svg
      • mail-download-line.svg
      • mail-forbid-fill.svg
      • mail-forbid-line.svg
      • mail-lock-fill.svg
      • mail-lock-line.svg
      • mail-send-fill.svg
      • mail-send-line.svg
      • mail-settings-fill.svg
      • mail-settings-line.svg
      • mail-star-fill.svg
      • mail-star-line.svg
      • mail-unread-fill.svg
      • mail-unread-line.svg
      • mail-volume-fill.svg
      • mail-volume-line.svg
      • megaphone-fill.svg
      • megaphone-line.svg
      • pass-expired-fill.svg
      • pass-expired-line.svg
      • pass-pending-fill.svg
      • pass-pending-line.svg
      • pass-valid-fill.svg
      • pass-valid-line.svg
      • pie-chart-fill.svg
      • pie-chart-line.svg
      • presentation-fill.svg
      • presentation-line.svg
      • printer-cloud-fill.svg
      • printer-cloud-line.svg
      • record-mail-fill.svg
      • record-mail-line.svg
      • reply-all-fill.svg
      • reply-all-line.svg
      • reply-fill.svg
      • reply-line.svg
      • seo-fill.svg
      • seo-line.svg
      • service-fill.svg
      • service-line.svg
      • shake-hands-fill.svg
      • shake-hands-line.svg
      • stack-fill.svg
      • stack-line.svg
      • window-2-fill.svg
      • window-2-line.svg
    • Ajout dans la section "/communication" :
      • chat-download-fill.svg
      • chat-download-line.svg
      • chat-follow-up-fill.svg
      • chat-follow-up-line.svg
      • chat-forward-fill.svg
      • chat-forward-line.svg
      • chat-history-fill.svg
      • chat-history-line.svg
      • chat-new-fill.svg
      • chat-new-line.svg
      • chat-off-fill.svg
      • chat-off-line.svg
      • chat-private-fill.svg
      • chat-private-line.svg
      • chat-quote-fill.svg
      • chat-quote-line.svg
      • chat-settings-fill.svg
      • chat-settings-line.svg
      • chat-upload-fill.svg
      • chat-upload-line.svg
      • chat-voice-fill.svg
      • chat-voice-line.svg
      • emoji-sticker-fill.svg
      • emoji-sticker-line.svg
      • message-3-fill.svg
      • message-3-line.svg
      • speak-fill.svg
      • speak-line.svg
    • Ajout dans la section "/design" :
      • anticlockwise-fill.svg
      • anticlockwise-line.svg
      • artboard-fill.svg
      • artboard-line.svg
      • blur-off-fill.svg
      • blur-off-line.svg
      • circle-fill.svg
      • circle-line.svg
      • clockwise-fill.svg
      • clockwise-line.svg
      • collage-fill.svg
      • collage-line.svg
      • compasses-2-fill.svg
      • compasses-2-line.svg
      • contrast-drop-2-fill.svg
      • contrast-drop-2-line.svg
      • crosshair-2-fill.svg
      • crosshair-2-line.svg
      • drag-drop-fill.svg
      • drag-drop-line.svg
      • edit-circle-fill.svg
      • edit-circle-line.svg
      • eraser-fill-1.svg
      • eraser-line-1.svg
      • focus-3-fill.svg
      • focus-3-line.svg
      • grid-fill.svg
      • grid-line.svg
      • hammer-fill.svg
      • hammer-line.svg
      • hexagon-fill.svg
      • hexagon-line.svg
      • layout-bottom-fill.svg
      • layout-bottom-line.svg
      • layout-column-fill.svg
      • layout-column-line.svg
      • layout-fill.svg
      • layout-left-fill.svg
      • layout-left-line.svg
      • layout-line.svg
      • layout-masonry-fill.svg
      • layout-masonry-line.svg
      • layout-right-fill.svg
      • layout-right-line.svg
      • layout-row-fill.svg
      • layout-row-line.svg
      • layout-top-fill.svg
      • layout-top-line.svg
      • magic-fill.svg
      • magic-line.svg
      • markup-fill.svg
      • markup-line.svg
      • octagon-fill.svg
      • octagon-line.svg
      • pentagon-fill.svg
      • pentagon-line.svg
      • quill-pen-fill.svg
      • quill-pen-line.svg
      • rectangle-fill.svg
      • rectangle-line.svg
      • ruler-fill.svg
      • ruler-line.svg
      • scissors-cut-fill.svg
      • scissors-cut-line.svg
      • scissors-fill.svg
      • scissors-line.svg
      • screenshot-2-fill.svg
      • screenshot-2-line.svg
      • shape-fill.svg
      • shape-line.svg
      • slice-fill.svg
      • slice-line.svg
      • square-fill.svg
      • square-line.svg
      • table-alt-fill.svg
      • table-alt-line.svg
      • tools-fill.svg
      • tools-line.svg
      • triangle-fill.svg
      • triangle-line.svg
    • Ajout dans la section "/development" :
      • braces-fill.svg
      • braces-line.svg
      • brackets-fill.svg
      • brackets-line.svg
      • code-fill.svg
      • code-line.svg
      • code-s-slash-fill.svg
      • command-fill.svg
      • command-line.svg
      • css3-fill.svg
      • css3-line.svg
      • git-close-pull-request-fill.svg
      • git-close-pull-request-line.svg
      • html5-fill.svg
      • html5-line.svg
      • javascript-fill.svg
      • javascript-line.svg
      • parentheses-fill.svg
      • parentheses-line.svg
      • terminal-fill.svg
    • Ajout dans la section "/device" :
      • airplay-fill.svg
      • airplay-line.svg
      • barcode-box-fill.svg
      • barcode-box-line.svg
      • barcode-fill.svg
      • barcode-line.svg
      • base-station-fill.svg
      • base-station-line.svg
      • battery-charge-fill.svg
      • battery-charge-line.svg
      • battery-fill.svg
      • battery-line.svg
      • battery-low-fill.svg
      • battery-low-line.svg
      • bluetooth-connect-fill.svg
      • bluetooth-connect-line.svg
      • cast-fill.svg
      • cast-line.svg
      • cellphone-fill.svg
      • cellphone-line.svg
      • cpu-fill.svg
      • cpu-line.svg
      • device-recover-fill.svg
      • device-recover-line.svg
      • fingerprint-fill.svg
      • fingerprint-line.svg
      • gamepad-fill.svg
      • gamepad-line.svg
      • gps-fill.svg
      • gps-line.svg
      • gradienter-fill.svg
      • gradienter-line.svg
      • hotspot-fill.svg
      • hotspot-line.svg
      • install-fill.svg
      • install-line.svg
      • instance-fill.svg
      • instance-line.svg
      • keyboard-fill.svg
      • keyboard-line.svg
      • macbook-fill.svg
      • macbook-line.svg
      • mouse-fill.svg
      • mouse-line.svg
      • phone-find-fill.svg
      • phone-find-line.svg
      • phone-lock-fill.svg
      • phone-lock-line.svg
      • qr-scan-fill.svg
      • qr-scan-line.svg
      • radar-fill.svg
      • radar-line.svg
      • remote-control-2-fill.svg
      • remote-control-2-line.svg
      • remote-control-fill.svg
      • remote-control-line.svg
      • restart-fill.svg
      • restart-line.svg
      • rfid-fill.svg
      • rfid-line.svg
      • rotate-lock-fill.svg
      • rotate-lock-line.svg
      • router-fill.svg
      • router-line.svg
      • scan-fill.svg
      • scan-line.svg
      • sd-card-fill.svg
      • sd-card-line.svg
      • sd-card-mini-fill.svg
      • sd-card-mini-line.svg
      • sensor-fill.svg
      • sensor-line.svg
      • shut-down-fill.svg
      • shut-down-line.svg
      • signal-wifi-error-fill.svg
      • signal-wifi-error-line.svg
      • signal-wifi-fill.svg
      • signal-wifi-line.svg
      • signal-wifi-off-fill.svg
      • signal-wifi-off-line.svg
      • sim-card-2-fill.svg
      • sim-card-2-line.svg
      • u-disk-fill.svg
      • u-disk-line.svg
      • uninstall-fill.svg
      • uninstall-line.svg
      • usb-fill.svg
      • usb-line.svg
      • wifi-off-fill.svg
      • wifi-off-line.svg
      • wireless-charging-fill.svg
      • wireless-charging-line.svg
    • Ajout dans la section "/editor" :
      • sort-asc.svg
      • sort-desc.svg
    • Ajout dans la section "/weather " :
      • fr--avalanches-line.svg
      • fr--submersion-line.svg

Composants

  •  Correction des radios boutons "tout accepter / tout refuser" qui passent à la ligne sur le formulaire de consentement dans certaines résolutions. #1238
  •  Les marges verticales de la modale en desktop sont maintenant définies en “%” plutôt qu’en “vh” pour prendre 10% de l’iframe et non 10% de la page au sein d’une iframe. #1221
  •  Correction de la bordure de la navigation mobile lorsqu'elle ne contient qu'un seul élément #1214

Range - Curseur

  •  Ajout d'attributs aria-label “Valeur minimale” et “valeur maximale” sur les inputs du curseur double, pour décrire leur usage #1232

Table - Tableau

  •  Ajout du modificateur fr-table--multiline équivalent à fr-cell--multiline mais s'appliquant à tout le tableau #1233

Toggle - Interupteur

  •  Retrait de la variation interrupteur avec libellé à droite qui est problématique en termes d'accessibilité, notamment en navigation avec loupe d'écran. Celle-ci reste fonctionnelle mais ne doit plus être utilisée. #1225

Translate - Sélecteur de langues

  • Le composant sélecteur de langue ne doit plus utiliser une balise <nav> avec l'attribut role=navigation, mais une simple <div> pour alléger la lecture sur les lecteurs d'écrans. #1229

Storybook

  • Ajout de stories sur les checkbox et radios #1211

 API JS

  • Retrait du "patch" JS pour les analytics, spécifique aux anciennes versions du DSFR #1243

Documentation

  • Le maillage des composants est maintenant proposé sous forme de cartes plutôt que des liens #1220
  • Ajout de lien sur les titres des pages de documentation pour récupérer l’ancre vers la section plus facilement.
  • Mise à jour des documentations des fondamentaux (grille, icone, médias, pictogramme, typographie) #1246
  • Correction du lien vers la documentation de FranceConnect #1246
  • Ajout d'informations sur l'attribut accept dans la documentation de l'ajout de fichier #1246
  • Ajout des dépendances CSS dans la partie code de chaque composant
  • Ajout de documentation sur les parties Javascript de l'en-tête, des cases à cocher, du tableau, et du contrôle segmenté
  • Correction de l'exemple du modèle de nom et prénom avec ajout de prénom #1237
  • Ajout d’explicatifs sur le fonctionnement du composant tableau dans la partie code #1233
  • Correction du thème sur les iframes storybook insérées dans la doc #1228
  • Correctifs éditoriaux mineurs #1211
  • Correction et amélioration de la documentation de l'interrupteur #1225
  • Correction des tableaux trop grands en mobile #1211

Code v1.14.0

Fondamentaux

Pictogrammes

  • Ajout de pictogrammes : #1160
    • digital/ecosystem
    • digital/self-training
    • digital/innovation
    • accessibility/accessibility
    • leisure/art

Composants

Infobulle - Tooltip

  • Correction de la fermeture avec la touche Échap du tooltip au sein d’une modale #1174

Mise en avant - Callout

  • Ajout de la possibilité d’utiliser un <p> à la place d’un <hx> pour le titre du callout #1173

 Storybook

  • Ajout de stories d’exemples sur les composants suivant : #1166
    • Alerte
    • Bouton radio
    • Champ de saisie
    • Carte
    • Case à cocher
    • Champ de saisie
    • Contrôle segmenté
    • En-tête
    • Lien
    • Menu latéral
    • Pagination
    • Paramètre d'affichage
    • Pied de page
    • Tuile

Documentation

  • Ajout de la documentation associée aux composants, fondamentaux, et modèles, directement dans le code, sous forme de fichiers markdown.
  • Rédaction de plus de 250 nouvelles pages de documentation et réalisation de plus de 400 illustrations.