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