Général

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