Version 1.8

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 :

Info

Si vous aviez inséré des formulaires dans vos conceptions avant la mise à jour 1.8.0, celles-ci seront toujours visibles dans leur état 1.7.0.Pour mettre à jour vos conceptions à la version 1.8.0, il faudra refaire les liens des anciens composants vers les nouveaux(Boutons radio, Boutons radio riches, Case à cocher, Champ de saisie, Liste déroulante).

  • 🛠️ 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
Pictogrammes - pictogram
  • 🎉 Ajout de nouveaux pictogrammes et restructuration en sous dossier par catégorie (comme icons)

🧩 Composants

Accordéon
  • 🛠️ Correction token de couleur actif
Alerte - Alert
  • ✨ le titre devient un h3 par défaut
Formulaire - Form
  • ✨ 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é )
Bouton radio - Radio
  • ✨ Evolution du groupe de radio pour utiliser le nouveau système de formulaire (voir form)
Carte - Card
  • ✨ le titre devient un h3 par défaut
Case à cocher - Checkbox
  • ✨ Evolution du groupe de checkbox pour utiliser le nouveau système de formulaire (voir form)
Bouton FranceConnect - Connect
  • 🛠️ Correction du wording “Qu’est-ce que France Connect ?”
Champ de saisie - Input
  • ✨ Evolution du groupe de champ de saisi pour utiliser le nouveau système de formulaire (voir form)
Contenu Media - Content
  • ✨ 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
Gestionnaire de consentement - Consent
  • ✨ Evolution du composant via l’ajout du composant transcription à la place du bouton vers la transcription
Indicateur d'étape - Stepper
  • ✨ le titre devient un h2 par défaut
Lettre d'information et Réseaux Sociaux - follow
  • ✨ le titre de la newsletter et du bloc socials deviennent un h3 par défaut
Menu latéral - Sidemenu
  • ✨ 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
Mise en avant - Callout
  • ✨ le titre devient un h3 par défaut
Mot de passe - password
  • 🎉 Ajout du composant mot de passe
Onglets - tab
  • 🛠️ Correction de l’affichage d’une modale à l’intérieur d’un onglet
Pied de page - Footer
  • 🛠️ Correction de l’alignement du logo en haut
  • 🛠️ La bordure supérieur bleue passe à l’intérieur
Sommaire - Summary
  • ✨ le titre devient un h2 par défaut
Transcription - Transcription
  • 🎉 Ajout du composant de transcription
Tag - Tag
  • 🛠️ Correction tag sélectionnable hover
Tuile - Tile
  • ✨ 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

Connexion - Login
  • 🎉 Ajout du modèle de connexion (avec et sans erreur)
Création de compte - register
  • 🎉 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
Récupération, Mot de passe oublié - recovery
  • 🎉 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