---
title: Note de version 1.12
shortTitle: Note de version 1.12
description: Cette page détaille les nouveautés de la version 1.12 du Design Système de l’État avec un accent sur les composants Tableau et Bandeau d’information ainsi que le support du mode haut contraste et l’enrichissement des icônes et pictogrammes.
shortDescription: Nouveautés et correctifs de la version 1.12 du Design Système de l’État
keywords: version 1.12, Design Système de l’État, composants, tableau, bandeau, accessibilité, haut contraste, pictogrammes, icônes, Figma
excerpt: Découvrez les évolutions majeures du composant tableau et l’introduction du mode haut contraste dans la version 1.12 du Design Système de l’État.
summary: Cette note de version présente les changements apportés dans la version 1.12 dont une nouvelle version du composant Tableau enrichi de fonctionnalités avancées et une évolution du Bandeau d’information. Elle introduit le mode haut contraste pour renforcer l’accessibilité. La librairie Sketch est désormais figée au profit de Figma. Des ajouts importants d’icônes, pictogrammes et correctifs dans le code complètent cette mise à jour.
toc: 2
version: '1.12'
---

# Note de version 1.12

## Général

La version 1.12 apporte principalement des **nouvelles versions aux composants Tableau - Table et Bandeau d’information importante - Notice**. Elle s’accompagne d’une refonte du rendu du DSFR en mode “Haut contraste” ainsi que de recommandations visuelles pour indiquer aux utilisateurs lorsque de l’intelligence artificielle a été utilisé dans la création de contenus.

La version 1.12.1 est disponible depuis le 25 juin 2024.

[Code en version 1.12.1](https://github.com/GouvernementFR/dsfr/releases/tag/v1.12.1)

La version 1.12.0 est disponible depuis le 19 juin 2024.

[Code en version 1.12.0](https://github.com/GouvernementFR/dsfr/releases/tag/v1.12.0)

> [!WARNING]
> **Montée de version sur Figma**
>
> **Si vous utilisez une version précédente à la 1.12 sur un projet Figma, les libellés de la plupart de vos composants seront ré-initialisés en mettant à jour la librairie.** Dans le cadre de projets avec beaucoup d'écrans, cela peut être chronophage de tout remplacer, nous travaillons à trouver une solution pour faciliter cette manipulation. Dans cette attente nous vous conseillons de rester sur votre version actuelle et de n'utiliser la 1.12 que pour des nouveaux projets.
>
> **Des changements destructifs ont été introduits dans la nouvelle version du composant tableau.**

### Nouveautés

- 🎉 Ajout du mode contrasté
- 🎉 Ajout des icones :
  - design/shapes-fill.svg
  - design/shapes-line.svg
  - logo/whatsapp-fill.svg
  - logo/whatsapp-line.svg
  - others/fr--accessibility-fill.svg
  - others/fr--accessibility-line.svg
  - others/fr--ear-off-fill.svg
  - others/fr--ear-off-line.svg
  - others/fr--mental-disabilities-fill.svg
  - others/fr--mental-disabilities-line.svg
  - others/fr--sign-language-fill.svg
  - others/fr--sign-language-line.svg
  - others/wheelchair-fill.svg
  - others/wheelchair-line.svg
  - system/sort-asc-desc-line.svg
  - system/sort-asc-line.svg
  - system/sort-desc-line.svg
  - weather/fire-fill.svg
  - weather/fire-line.svg
  - weather/flood-fill.svg
  - weather/flood-line.svg
  - weather/fr--avalanches-fill.svg
  - weather/fr--submersion-fill.svg
  - weather/heavy-showers-fill.svg
  - weather/heavy-showers-line.svg
  - weather/snowy-fill.svg
  - weather/snowy-line.svg
  - weather/sparkling-2-fill.svg
  - weather/sparkling-2-line.svg
  - weather/temp-cold-fill.svg
  - weather/temp-cold-line.svg
  - weather/thunderstorms-fill.svg
  - weather/thunderstorms-line.svg
  - weather/tornado-fill.svg
  - weather/tornado-line.svg
  - weather/typhoon-fill.svg
  - weather/typhoon-line.svg
  - weather/windy-fill.svg
  - weather/windy-line.svg

### Évolutions

- ✨ Évolution du tableau permettant l’ajout de données complexes, d’utilitaires de placement, de bouton de tri, de coche de sélection de ligne

## Librairie Sketch

> [!NOTE]
> **Dépréciation de Sketch**
>
> La librairie Sketch ne sera plus mise à jour après la version 1.11. Seuls des correctifs nécessaires y seront apportés. Tous les nouveaux composants à partir de la version 1.12 seront disponibles sur Figma uniquement.

## Librairie Figma

### 🎨 Fondamentaux

#### Icônes

- 🎉 Ajout de nombreuses icônes dans les catégories :
  - Arrows
  - Buildings
  - Business
  - Communication
  - Design
  - Development
  - Device
  - Editor
  - Logos
  - Others
  - System
  - Weather

#### Couleurs

- 🎉 Ajout des tokens de couleur de bordure : $border-contrast-grey

### 🎨 Pictogrammes

- 🎉 Ajout de pictogrammes dans les catégories :
  - **Accessibility (nouvelle catégorie)**
    - wheelchair
    - ear-off
    - accessibility
    - eye-off
    - mental-disabilities
  - **Documents**
    - driving-license-new
    - international-driving-license
    - international-driving-license-new
    - national-identity-card
    - national-identity-card-passport
    - binders
    - presse-card
    - document-search
    - conclusion
    - archives
  - **Map & Travel**
    - compass
    - backpack
    - map-pin
    - location-overseas-france
    - travel-back
  - **Institutions**
    - astronaut
    - navy-anchor
    - navy-bachi
    - army-tank
  - **Leisure**
    - catalog
    - pictures
    - podcast
    - video
    - audio
    - video-games
    - art
  - **Buildings**
    - companie
    - base
  - **System**
    - flow-list
    - flow-settings
    - language
  - **Health & Medical**
    - medical-research
    - doctor
  - **Digital**
    - self-training
    - ecosystem
    - smartphone
    - innovation

### 🧩 Composants

#### Général

- ✨ Traduction de “label” en “libellé” sur tous les composants

#### Badge

- 🐛 Correction de l’erreur d’espacement de la version Succès lors du redimensionnement.

#### Bandeaux d’informations importantes

- ✨ Évolution du composant Bandeau d’information importante.
- 🎉 Ajout de trois types de bandeaux, chacun avec leurs propres variations :
  - Les bandeaux génériques.
  - Les bandeaux de vigilance météo.
  - Les bandeaux d'alerte.

#### En-tête connecté [BÊTA]

- 🎉 Ajout d’une version du composant En-tête en version utilisateur connecté.

#### Liste déroulante [BÊTA]

- ✨ Évolution du composant Liste déroulante.
- 🎉 Ajout de deux types de listes déroulantes riches :
  - Sélection unique.
  - Sélection multiple.

#### Menu déroulant [BÊTA]

- 🎉 Ajout du composant Menu déroulant.

#### Pied de page

- 🐛 Modification de l’url du lien gouvernement.fr en info.gouv.fr.
- 🐛 Modification de l’ordre d’affichage des liens de l’écosystème institutionnel.

#### Tableau

- ✨ Évolution du composant tableau permettant l’ajout de données complexes, d’utilitaires de placement, de bouton de trie, de coche de sélection de ligne.

> [!WARNING]
> **💥 Changements destructifs**
>
> Le tableau de la version précédente (v1.11) n’est pas relié au nouveau tableau. Pour profiter des nouvelles fonctionnalités du tableau il vous faut le recréer.

## Code v1.12.1

### 🎨 Fondamentaux

### Global

- ✨💥 Evolution de la structure des pictogrammes pour corriger la régression amenée par la version M156 de Chrome #[971](https://github.com/GouvernementFR/dsfr/issues/971)
  - Prévoir de récupérer les pictogrammes s’ils sont copiés/collés depuis le dist/

yarn pictogram-converter -p 'chemin/relatif/vers/le/dossier/de/vos/pictos'

### Core

- 🐛 Correction de l'affichage des collapses vides #[964](https://github.com/GouvernementFR/dsfr/issues/964)

### Build

- 🎉 Ajout d’un script pour transformer vos pictogrammes avec la nouvelle structure
  - Sur le projet github (voir doc contributing.md) une commande permet de lancer ce script

### 🧩 Composants

### Tableau - table

- Correctif sur le tableau #[969](https://github.com/GouvernementFR/dsfr/issues/969)
  - déplacement des bordures des tableaux dépréciés sur les thead et tbody
  - retrait des selecteurs css :has, support trop récent

## Code v1.12.0

### 🎨 Fondamentaux

### Global

- 🎉 Gestion des préférences utilisateurs #[929](https://github.com/GouvernementFR/dsfr/issues/929)
  - Mode haut contraste (couleurs forcées) : l’ensemble des composants ont été revu pour une utilisation avec un thème contrasté (Windows High Contrast mode)
  - Animations désactivées : les animations sur les composants sont désactivées lorsque l’option “reduce motion” est active
- 🐛 Correction du centrage des container-sm/md/lg/xl #[916](https://github.com/GouvernementFR/dsfr/issues/916)
- 🎉 Ajout d’icônes

### Pictogramme

- 🎉 Ajout du pictogramme digital/in-progress #[918](https://github.com/GouvernementFR/dsfr/issues/918)

### Build

- ✨ Lors de l'exécution de la commande yarn build, créé les fichiers de configuration s'ils n'existent pas #[908](https://github.com/GouvernementFR/dsfr/issues/908)
- ✨ Ajout de browser-sync en tant que peerDependencies dans le package.json #[908](https://github.com/GouvernementFR/dsfr/issues/908)

### 🧩 Composants

### Bandeau d’information importante - notice

- 🎉 Ajout de variations de bandeaux d'information importante #[917](https://github.com/GouvernementFR/dsfr/issues/917)
  - 2 niveaux génériques supplémentaires (warning et alert)
  - 3 bandeaux d'alertes
  - 3 bandeaux vigilance météo
- 💥 Changement de la structure html permettant l’ajout d’un titre, une description, et un lien #[917](https://github.com/GouvernementFR/dsfr/issues/917)

### Carte - card

- ✨ Ajout d'une classe utilitaire enlarge-button utilisée sur les cartes et les tuiles de téléchargement pour élargir la zone de clique à tout le composant quand l'élément cliquable est un bouton #[943](https://github.com/GouvernementFR/dsfr/issues/943) #[951](https://github.com/GouvernementFR/dsfr/issues/951)
- ✨ Mise à jour de la taille des images d’exemples de carte "Image et ratio" #[938](https://github.com/GouvernementFR/dsfr/issues/938)

### Contenu média - content

- ✨ Le composant fr-transcription n’est plus placé dans mais après la balise `<figure>` (la rétrocompatibilité de la structure précédente est conservée mais dépréciée) #[932](https://github.com/GouvernementFR/dsfr/issues/932)
  - ♿️ ajoute un attribut alt sur l'exemple "Média image avec une transcription" mentionnant la transcription située en dessous du composant Média
  - ♿️ ajoute un attribut title sur les exemples de "Média video" mentionnant la transcription située en dessous du composant Média

### Citation - quote

- 🐛 Ajout de la propriété object-fit: cover sur l'image de citation pour conserver le ratio de l'image lorsqu'elle n'est pas carrée. Dans la mesure du possible, privilégiez un ratio d'image carré pour un meilleur support navigateur. #[912](https://github.com/GouvernementFR/dsfr/issues/912)

### Curseur - range

- 🐛 Correction de la boucle infinie faisant crash la page #[931](https://github.com/GouvernementFR/dsfr/issues/931)
- 🐛 Correction du style du curseur avec étape désactivé, et ajout d’exemples de curseurs désactivés #[931](https://github.com/GouvernementFR/dsfr/issues/931)
- 🐛 Correction de la modification de valeur du deuxième input lorsque le min dépasse le max ou l'inverse sur le curseur double #[931](https://github.com/GouvernementFR/dsfr/issues/931)

### En-tête - header

- 🐛 Réduction de la zone de clic du lien du service, ou du logo, élargie en mobile. La zone à droite du logo et à droite du service n’est plus cliquable évitant les clics non désirés #[944](https://github.com/GouvernementFR/dsfr/issues/944)

### Fil d’Ariane - breadcrumb

- 🐛 Correction de l'alignement vertical des icônes de chevron sur tout les navigateurs (bug sur Safari 17) #[933](https://github.com/GouvernementFR/dsfr/issues/933)

### Interrupteur - toggle

- ✨💥 Ajout de la bordure colorée à gauche de l’interrupteur en état d’erreur/succès. Attention : Les marges avant et après le composant ont été retirées, possible ajustement des espacements à prévoir #[954](https://github.com/GouvernementFR/dsfr/issues/954)
- 🐛 Correction du retour à la ligne sur le label "activé/désactivé” #[928](https://github.com/GouvernementFR/dsfr/issues/928)

### Pied de page - footer

- ✨💥 Change l'ordre des liens, et gouvernement.fr devient info.gouv.fr #[905](https://github.com/GouvernementFR/dsfr/issues/905)
- 🐛 Remplacement de l'intitulé par défaut "[A modifier]" de l'attribut title par l'intitulé officiel sur les liens obligatoires du footer. #[905](https://github.com/GouvernementFR/dsfr/issues/905)
- 🐛 Réduction de la zone de clic du logo en mobile, elle n’est plus étendue sur toute la largeur #[944](https://github.com/GouvernementFR/dsfr/issues/944)

### Tableau - table

- ✨💥 Evolution du tableau permettant l’ajout de données complexes, d’utilitaires de placement, de bouton de tri, de coche de sélection de ligne (la rétrocompatibilité de la structure précédente est conservée mais dépréciée) #[911](https://github.com/GouvernementFR/dsfr/issues/911)

### Tuile - tile

- ✨ Ajout d'une classe utilitaire enlarge-button utilisée sur les cartes et les tuiles de téléchargement pour élargir la zone de clique à tout le composant quand l'élément cliquable est un bouton #[943](https://github.com/GouvernementFR/dsfr/issues/943) #[951](https://github.com/GouvernementFR/dsfr/issues/951)

### 🔌 Analytics

- 🎉 Ajout de la possibilité de bloquer une action particulière avec l'attribut et la valeur data-fr-analytics-action="false" quand l'envoi des actions est activé au global #[937](https://github.com/GouvernementFR/dsfr/issues/937)
- 🎉 Ajout de marquage sur le lien des bandeaux d’information importante #[917](https://github.com/GouvernementFR/dsfr/issues/917)
