Note de version 1.8

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

Information

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

Téléchargez le zip

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

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