Général

La version 1.8.5 est disponible depuis le 28 novembre 2022
Code en version 1.8.5

La version 1.8.4 est disponible depuis le 15 novembre 2022
Code en version 1.8.4

La version 1.8.3 est disponible depuis le 15 novembre 2022
Code en version 1.8.3

La version 1.8.2 est disponible depuis le 9 novembre 2022
Code en version 1.8.2

La version 1.8.1 est disponible depuis le 27 octobre 2022
Code en version 1.8.1

La version 1.8.0 est disponible depuis le 27 octobre 2022
Code en version 1.8.0

Nouveauté(s)

• 🎉 Ajout du composant Transcription + ajout de ce composant dans Contenu média et Gestionnaire de consentement.
• 🎉 Ajout des modèles (création de compte, connexion et page d’erreur)
• 🎉 Ajout des blocs de formulaires (date de naissance, civilité, adresse, etc.)

Évolution(s)

• ✨ Évolution du composant Tuile (Bêta UI).
• ✨ Évolution du composant Contenu média.

Librairie Sketch

🎨 Fondamentaux

• 🎉 Ajout des icônes fullscreen-fill et fullscreen-line dans la catégorie Média de la librairie d’icônes.
• 🎉 Ajout du style de texte du composant Transcription.
• ✨ Evolution des styles de texte des composants Bouton radio, Case à cocher et Champ de saisie.

🧩 Composants

Boutons

• 🎉 Ajout des boutons tertiaires sans contour.
• 🎉 Ajout du bouton tertiaire dans le composant Groupe de boutons.

Contenu média

• ✨ Evolution : 3 tailles de média disponibles ; 6, 8, ou 10 colonnes en desktop et 10, 12 ou 100% en mobile. Ajout d’une zone de détails comprenant un texte de description/source, un lien et un bloc de transcription, disponible en taille 6 ou 8 colonnes en desktop et 12 colonnes en mobile.

Tuiles

• ✨ Evolution du composant Tuile (Bêta) : maintenant disponible en taille SM et MD avec ou sans pictogramme. Ajout d'éléments optionnels ; badge, détail, description.

Librairie Figma

🎛️ Outils

• 🛠️ Modification des en-têtes de présentation des composants. Ils précisent désormais si les composants sont fait pour mobile, desktop ou les deux.

🎨 Fondamentaux

• 🎉 Ajout des icônes fullscreen-fill et fullscreen-line dans la catégorie Média de la librairie d’icônes.

🧩 Composants

Contenu média

• ✨ Evolution : 3 tailles de média disponibles ; 6, 8, ou 10 colonnes en desktop et 10, 12 ou 100% en mobile. Ajout d’une zone de détails comprenant un texte de description/source, un lien et un bloc de transcription, disponible en taille 6 ou 8 colonnes en desktop et 12 colonnes en mobile.

Tuiles

• ✨ Evolution du composant Tuile (Bêta) : maintenant disponible en taille SM et MD avec ou sans pictogramme. Ajout d'éléments optionnels ; badge, détail, description.

Formulaires :

• 🛠️ Factorisation des formulaires.
• 🎉 Ajout d’une page présentant des composants spécifiques aux formulaires.
• 🎉 Ajout du composant Label
• 🎉 Ajout du composant Légende
• 🎉 Ajout du composant Message de formulaire

Bouton radio

• 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
• 🎉 Ajout des sections
• 🛠️ Amélioration de la nomenclature.

Bouton radio riche

• 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
• 🎉 Ajout des sections
• 🛠️ Amélioration de la nomenclature.

Champ de saisie

• 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
• 🎉 Ajout des sections
• 🛠️ Amélioration de la nomenclature.

Case à cocher

• 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
• 🎉 Ajout des sections
• 🛠️ Amélioration de la nomenclature.

Menu déroulant

• 🎉 Ajout des versions Erreur et Valide du composant individuel et des groupes.
• 🎉 Ajout des sections
• 🛠️ Amélioration de la nomenclature.

Groupe de bouton

• 🎉 Ajout d’un troisième bouton dans une variante tertiaire par défaut dans les groupes de bouton

Code

Version 1.8.5

Tag - Tag

• 🛠️ Correction d'une régression sur les tags avec une ancre

Transcription - Transcription

• 🛠️ Correction de la pleine largeur du composant

Version 1.8.4

Bouton - Button

• 🛠️ Correction d'une régression sur les icônes placées à droite
  

Pied de page - Footer

• 🛠️ Correction d'une régression sur le séparateur bleu

Transcription - Transcription

• 🛠️ Correction title de la modale de transcription cachée en mode accordéon

Version 1.8.2

•  🛠️ Correctifs d'accessibilité sur le titre des cartes de téléchargement
•  🛠️ Correctifs d'accessibilité sur le focus des tags supprimables
•  🛠️ Correctifs d'accessibilité sur le composant transcription
•  🛠️ Correction de l'effet flash lors du rafraichissement d'une page présentant le dark mode et prise des paramètres système.
•  🛠️ Correction sur le bouton paramètre d'affichage.
•  ✨ Évolution de la fonction getcolor afin de retourner les couleurs de hover
•  ✨ Ajout de l'autocomplete dans les blocs de formulaire

Version 1.8.0

🎨 Fondamentaux

Grille - grid

• 🛠️ Suppression du scroll horizontal généré par les “fr-container--fluid” en mobile, overflow hidden

• 🎉 Ajout de nouveaux pictogrammes et restructuration en sous dossier par catégorie (comme icons)

🧩 Composants

• 🛠️ Correction token de couleur actif

• ✨ le titre devient un h3 par défaut

• ✨ Evolution du système de formulaire (fieldset, fieldset__element)
  Le fr-fieldset__content est déprécié
  Chaque élément de formulaire doit être contenu dans un fr-fieldset__element
• ✨ Evolution du système de messages de statut, maintenant contenus dans un block fr-messages-group :
  • le message d’erreur : fr-message--error ( fr-text-error est déprécié )
  • le message d’information : fr-message--info
  • le message de validation : fr-message--valid ( fr-text-valid est déprécié )

• ✨ Evolution du groupe de radio pour utiliser le nouveau système de formulaire (voir form)

• ✨ le titre devient un h3 par défaut

• ✨ Evolution du groupe de checkbox pour utiliser le nouveau système de formulaire (voir form)

• 🛠️ Correction du wording “Qu’est-ce que France Connect ?”

• ✨ Evolution du groupe de champ de saisi pour utiliser le nouveau système de formulaire (voir form)

• ✨ Evolution du composant media vidéo maintenant imbriqué dans un figure pour plus d’homogénéité avec le média image.
• ✨ Evolution du composant via la possibilité d’ajouter un lien dans le figcaption
• ✨ Evolution du composant via l’ajout du composant transcription à la place du bouton vers la transcription

• ✨ Evolution du composant via l’ajout du composant transcription à la place du bouton vers la transcription

• ✨ le titre devient un h2 par défaut

• ✨ le titre de la newsletter et du bloc socials deviennent un h3 par défaut

• ✨ Le aria label sur le <nav> devient un aria-labelledBy pointant vers l'id du titre
• 🛠️ Correction de l’affichage en position sticky sur Firefox

• ✨ le titre devient un h3 par défaut

• 🎉 Ajout du composant mot de passe

• 🛠️ Correction de l’affichage d’une modale à l’intérieur d’un onglet

• 🛠️ Correction de l’alignement du logo en haut
• 🛠️ La bordure supérieur bleue passe à l’intérieur

• ✨ le titre devient un h2 par défaut

• 🎉 Ajout du composant de transcription

• 🛠️ Correction tag sélectionnable hover

• ✨ le titre devient un h3 par défaut

Modèles de pages

Page d’erreur - Response

• 🛠️ Correction du snippet de code (grille et utilitaires d’espacements)
• 🛠️ Mise à jour du chemin vers le pictogramme
  
  

Page liées au compte - Account

• 🎉 Ajout du modèle de connexion (avec et sans erreur)

• 🎉 Ajout du modèle de création de compte
• 🎉 Ajout du modèle de création de compte en 3 étapes (identifiants, identité, coordonnées)
• 🎉 Ajout de modèles de confirmation de création et de validation de compte

• 🎉 Ajout du modèle de récupération de mot de passe
• 🎉 Ajout du modèle de confirmation de demande de récupération

Blocs fonctionnels (patterns)

• 🎉 Modèle de bloc de civilité (civility)
• 🎉 Modèle de bloc de nom et prénom (name)
• 🎉 Modèle de date unique (date)
• 🎉 Modèle de formulaire d'adresse (address)
• 🎉 Modèle de formulaire société (company)
• 🎉 Modèle de formulaire de nationalité (nationality)

API

• 🎉 Ajout de la classe publique colors et de la méthode getColors(context, use, tint, {options}) sur l’API du DSFR
• 🎉 Ajout de l’event scheme sur l’attribut data-fr-theme

Documentation

• 🛠️ Mise à jour des url vers le site de documentation des pages examples