🎉 Version 1.5

Created by JC Hourdeaux
Last updated: Apr 26, 2022

21 avril 2022


Les mises à jour du Design System de l'État sont intégrées à des releases dont les numéros de versions suivent la nomenclature SemVer en respectant le schéma suivant : MAJEUR.MINEUR.PATCH (X.Y.Z). Ce système de gestion de versions concernera les fichiers Sketch et Figma, le code et la documentation.


🎉 : AJOUT, ✨ : EVOLUTION, 🛠️ : CORRECTION, 🚫 : SUPPRESSION

Général

Nouveauté(s)

Évolution(s)

  • ✨ Évolution des cartes

  • ✨ Ajouts d’icônes supplémentaires et classement par catégories issus de RemixIcon

Building

  • home-4

  • building

  • hotel

  • community

  • government

  • bank

  • store

  • hospital

  • ancient-gate

  • ancient-pavilion

Business

  • mail-open

  • cloud

  • profil

  • archive

  • award

  • medal

  • bar-chart-box

  • pie-chart-box

  • pie-chart-2

  • bookmark

  • briefcase

  • calendar-2

  • customer-service

  • flag

  • global

  • send-plane

  • projector-2

  • slideshow

  • window

  • copyright

  • calendar-event

Communication

  • chat-2

  • chat-3

  • message-2

  • chat-check

  • chat-delete

  • feedback

  • discuss

  • question-answer

  • questionnaire

  • video-chat

  • chat-poll

Design

  • pencil

  • ball-pen

  • pen-nib

  • ink-bottle

  • mark-pen

  • edit-box

  • sip

  • brush

  • brush-3

  • paint-brush

  • pencil-ruler

  • drag-move-2

  • palette

  • paint

  • pantone

  • layout-grid

  • table

  • contrast

  • drop

  • crop

Development

  • bug

  • code-box

  • terminal-box

  • terminal-window

  • cursor

  • git-commit

  • git-pull-request

  • git-merge

  • git-branch

  • git-repository

  • git-repository-commits

  • git-repository-private

  • code-s-slash

Device

  • tv

  • computer

  • mac

  • smartphone

  • tablet

  • device

  • database

  • server

  • hard-drive-2

  • qr-code

  • rss

  • bluetooth

  • wifi

  • dashboard-3

  • save-3

Document

  • file-download

  • file

  • draft

  • file-text

  • booklet

  • folder-2

  • article

  • clipboard

  • survey

  • newspaper

  • book-2

  • todo

  • file-add

Editor

  • font-size

  • separator

  • table-2

  • subscript

  • superscript

  • hashtag

  • h-1

  • h-2

  • h-3

  • h-4

  • h-5

  • h-6

  • question-mark

  • space

  • translate-2

  • code-view

Finance

  • money-euro-box

  • money-euro-circle

  • coin

  • bank-card

  • shopping-cart-2

  • shopping-bag

  • trophy

  • gift

  • secure-payment

Health & Medical

  • heart

  • heart-pulse

  • dossier

  • health-book

  • first-aid-kit

  • capsule

  • medicine-bottle

  • test-tube

  • microscope

  • hand-sanitizer

  • stethoscope

  • syringe

  • thermometer

  • surgical-mask

  • virus

  • dislike

  • mental-health

  • lungs

  • psychotherapy

Logo

  • telegram

  • vimeo

  • chrome

  • edge

  • firefox

  • google

  • ie

  • safari

  • mastodon

Map

  • france

  • map-pin-user

  • earth

  • anchor

  • compass-3

  • gas-station

  • charging-pile-2

  • car

  • taxi

  • bus

  • train

  • sailboat

  • ship-2

  • bike

  • motorbike

  • signal-tower

  • suitcase-2

  • caravan

  • restaurant

  • cup

  • goblet

Media

  • image-add

  • image-edit

  • gallery

  • clapperboard

  • film

  • live

  • camera

  • music-2

  • headphone

  • mic

  • notification-3

  • stop-circle

Others

  • lightbulb

  • leaf

  • plant

  • seedling

  • recycle

  • scales-3

  • umbrella

  • lightbulb

System

  • lose-circle

  • arrow-up-fill

  • arrow-right-fill

  • arrow-down-fill

  • arrow-left-fill

  • arrow-up-s-fill

  • arrow-right-s-fill

  • arrow-down-s-fill

  • arrow-left-s-fill

  • arrow-go-back-fill

  • arrow-go-forward-fill

  • upload-fill

  • download-fill

  • eye-off-fill

  • eye-fill

  • lock-unlock

  • filter-fill

  • time

  • thumb-up

  • thumb-down

  • star

  • star-s

  • alarm-warning

  • external-link-fill

  • more

  • shield

  • notification-badge

User & Faces

  • user-add

  • account-pin-circle

  • user-search

  • user-setting

  • user-star

  • user-heart

  • admin

  • group

  • team

  • parent

Weather

  • sun

  • moon

  • cloudy-2

  • ✨ Ajout au header d’un badge pour les sites et applicatifs en version beta.

Librairie Sketch

Général

  • 🛠️ Divers correctifs de couleurs

  • 🎉 Ajout d’une nouvelle page “[Bêta] Composants” dans le fichier “Système de Design de l'État · Fondamentaux, Composants” comprenant les composants proposés en amont des sorties “officielles”

  • 🎉 Mise à disposition d’un nouveau fichier “Système de Design de l'État · Pictogrammes” comprenant les pictogrammes

  • 🎉 Ajout d'une nouvelle section “📝 — [Bêta] Composants —” dans la liste des composants de la librairie “Système de Design de l'État · Core”

🎨 Fondamentaux

Icônes

  • 🎉 Ajout de plusieurs icônes RemixIcon et classement par catégories

  • 🛠️ Correction des noms de plusieurs icônes pour refléter leur caractère unique au DSFR en rajoutant le préfixe “fr--”.

🧩 Composants

Carte

  • ✨ Évolution du composant en vu de proposer plus de modularité.

Si vous aviez inséré des cartes dans vos conceptions avant la mise à jour 1.5.0, celles-ci seront toujours visibles et seront dépréciées lors de la fin de la phase de transition. Il est conseillé de mettre à jour vos composants “Carte”.

Téléchargement de fichier

  • 🎉 Ajout du composant sous la forme d’un bloc de téléchargement et d’un lien de téléchargement.

[Bêta] Bandeau d’information importante

  • 🎉 Ajout du composant avec et sans croix de fermeture

Paramètres d’affichage

  • ✨ Mise en place du lien entre le composant et les pictogrammes

Bouton FranceConnect

🛠️ Correction : la description présente dans le composant en 1.4.0 n'étant pas obligatoire, elle a été retirée du composant

En-tête

🎉 Ajout d’une mise en situation pour les sites en version bêta à la planche du composant. Il ne s’agit pas d’une variation du symbole qui lui ne change pas.

Librairie Figma

Général

  • 🛠️ Divers correctifs de couleurs

  • 🎉 Ajout du fichier “Pictogrammes” à l’espace Community

  • 🎉 Ajout des tokens $artwork-minor-red-marianne.

🎨 Fondamentaux

Icônes

  • 🎉 De nombreuses icônes ont été ajoutées

  • 🎉 Des catégories ont été ajoutées pour ranger les icônes (ce sont celles de Remix Icon)

  • 🛠️ Les noms de plusieurs icônes ont été corrigés pour refléter leur caractère unique au DSFR, elles possèdent désormais le préfixe “fr-”. Attention, les instances précédemment insérées de ces icônes ne conserveront pas leurs liens lors de la mise à jour.

🧩 Composants

Carte

  • ✨ Le composant évolue, il propose désormais beaucoup plus de modularité

  • Techniquement, la nouvelle carte est un nouveau symbole : l’ancien a été supprimé.

Si vous aviez inséré des cartes dans vos designs avant la mise à jour 1.5.0, celles-ci seront toujours visibles mais ne renverront pas à la nouvelle carte après la mise à jour du fichier “Composants”. Elles pointeront toujours vers la version 1.4.0 (si vous gardez l’archive).

Téléchargement de fichier

  • 🎉 Un nouveau composant est ajouté

  • 🎉 Il propose deux versions construites sur des composants existants : le bloc de téléchargement et le lien de téléchargement.

Paramètres d’affichage

✨ Les illustrations du composants sont désormais liées au fichier “Pictogrammes”

Bouton FranceConnect

🛠️ La description présente dans le composant en 1.4.0 n'étant pas obligatoire, elle a été retirée du composant

Groupe de boutons

🛠️ La propriété “Fill container” a été corrigée sur les groupes de boutons pour que leur contenu suive leur taille

En-tête

🎉 Une mise en situation pour les sites en version bêta a été ajoutée à la planche du composant. Il ne s’agit pas d’une variation du symbole qui lui ne change pas.

Code

v1.5.1

Date de publication : 26 avril 2022

Fondamentaux

🛠️ Dist : correction du nom de fichier dsfr.nomodule.*.js

🎨 Fondamentaux

Icônes
🛠️ Correction sur les icônes deprecated.
✨ Ajout description et liens dans les packages.

Téléchargement de fichier
🛠️ Correction IE 11 - non prise en charge du poids du fichier ne cause plus d'erreur.


v1.5.0

🎨 Fondamentaux

  • 🛠️ Correction bug cosmétique des listes à puces sur Android

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

 

Documentation


🎉 Création et mise à jour des pages.

Téléchargements

Code


Librairie Sketch

Planches composants

 

Exemples de Modèles

 

Core (disponible sur sketchcloud)