Version 1.3

Date de publication : 18 janvier 2022

Version 1.3 (1.3.0 Sketch & Figma, 1.3.1 code)

Légende

  • 🎉 : Ajout

  • ✨ : Évolution

  • 🛠️ : Correction

  • 🚫 : Suppression

  • : Modification de code

 


Général

🎉 Ajout du composant Badge
🎉 Ajout des états ‘activable’ et ‘supprimable’ sur le Tag
🎉 Ajout des espacement 0,5v (2px/0.125rem) et 1,5v (6px/0.375rem)
✨ Mise à jour des icônes système : erreur , success , warning et info.


Librairie Sketch

🌎 Global

Couleur

  • 🛠️ Classement des colors variables de décisions dans les familles de typologies de token pour être raccord au classement dans les styles de calques 

🎨 Fondamentaux

Typographie

  • 🚫 Suppression de la bordure sur le style de texte SM - Texte détail / Droite en thème clair

  • 🛠️ Modification du nom de style de texte StatutInactif et ajouté dans le dossier Statut, en thème clair

  • 🛠️ Correction de la color variable utilisée dans le styles de texte de titre alternatif par $text-tile-grey

Couleur

  • 🛠️ Correction du style de calque $background-elevated-grey en rajoutant l’ombre portée, en thème clair et en thème sombre

  • 🛠️ Correction de la taille de la bordure sur le style de calque $border-action-low-blue-france, en thème sombre

  • 🛠️ Correction de la taille de la bordure sur le style de calque $border-plain-grey, en thème clair et sombre

Icônes

  • ✨ Intégration des icônes de la sous-librairie d’icônes dans la librairie principale
    Exemple du chemin : 1. Fondamentaux/Icônes/Librairie/Statuts/error-fill

  • 🛠️ Modification du chemin des tailles d’icônes : 1. Fondamentaux/Icônes/Tailles/LG

  • 🎉 Ajout de l'icône :

    • flashlight-fill + flashlight-line

  • ✨ Mise à jour des icônes systèmes

    • error-fill + error-line

    • info-fill + info-line

    • alert-fill + alert-line

    • success-fill + success-line

Espacement

  • 🎉 Ajout des espacement 0,5v (2px/0.125rem) et 1,5v (6px/0.375rem)

🧩 Composants

Menu latéral

  • 🛠️ Correction de la couleur de bordure sur le menu latéral en thème clair et en thème sombre

Tag

  • 🎉 Ajout des états “sélectionné” et “supprimable”

  • 🛠️ Modification des paddings du composant

  • 🚫 Suppression de la possibilité d’avoir l’icône à droite (zone réservée aux icônes ‘selectionné’ et ‘supprimable’)

Badge

  • 🎉 Ajout du composant

Onglets

  • 🛠️ Correction du comportement de l'ombre en mobile


Librairie Figma

🌎 Global

  • ✨ Refonte visuelle et mise à jour du contenu des planches (Fondamentaux et Composants)

  • ✨ Mise à jour des icône système :

    • erreur : fr-error (et non plus alert)

    • avertissement : alert

    • information : fr-info (et non plus information, dont le rond était présent ailleurs)

    • succès : checkbox (pas de changement)

  • ✨ Mise à jour des composants utilisant ces icônes en conséquence.

🎨 Fondamentaux

Typographie

  • 🎉 Ajout du style de texte "SM - Texte détail/Desktop & Mobile - Maj" pour le badge

  • 🎉 Ajout du style de texte "XS - Texte mention/Desktop & Mobile - Maj" pour le badge

  • 🎉 Ajout des styles de texte suivants en prévision des boutons v2 :

    • “SM - Texte détail/Desktop & Mobile - Medium”

    • “MD - Texte standard/Desktop & Mobile - Medium”

    • “LG - Texte article/Desktop/Medium”

Icônes

  • 🎉 Ajout de la taille d'icône XS (12px)

  • 🛠️ L’icône “align-left” était mal nommée “volume-down”, son nom est corrigé

  • 🎉 Ajout des icônes :

    • flashlight

    • fr-error

    • fr-info

Espacements

  • 🎉 Ajout des symboles d'espacement 0.5V et 1.5V

🧩 Composants

Badge

  • 🎉 Ajout du composant à la bibliothèque

Pied de page

  • 🎉 Ajout de l'icône "lien externe" dans les liens officiels du pied de page

  • 🛠️ Correction du lien “gouvernement” auquel il manquait un “e”

Mise en avant

  • 🛠️ Correction du padding-right (48px au lieu de 32px)

Tableau

  • 🛠️ Correction noms des calques

Tag

  • 🛠️ Ajustement des paddings (16 → 12px pour le MD, en prévision de l'état "actif")

  • ✨ Réorganisation des symboles : le tag “cliquable” est désormais séparé du tag “non cliquable” (ce qui entraînera une séparation des symboles lors de la mise à jour via Community)

  • 🎉 Ajout des états “Focus”, “Survol”, “Cliqué”, “Supprimable” et “Sélectionné” au variant du tag cliquable

  • 🛠️ Les paddings des tags prennent désormais en compte la présence d’une icône (dans ce cas, le padding est légèrement inférieur pour compenser l’espace blanc compris dans la plupart des icônes)

  • 🚫 Suppression de la possibilité d’avoir l’icône à droite (zone réservée aux icônes ‘selectionné’ et ‘supprimable’)

Modale

  • 🛠️ Ajustement des espacements dans les paragraphe de Lorem ipsum (un double espace était présent entre les paragraphes suite à la mise à jour des styles de texte)

Onglets

  • 🛠️ Amélioration du comportement de l'ombre en mobile (reste bien alignée à droite même si le groupe fait plus de 320px)

Éléments de formulaire

  • ✨ Passage des icônes de validation en version "pleines" pour une meilleur lisibilité

Interrupteur

  • 🛠️ Correction de la propriété de resizing en largeur, de “Fixed” à “Fill container” pour une meilleure adaptabilité du composant


Code

Version 1.3.1


Date de publication : 7 février 2022

Global

  • 🛠️ Numéro de version dans les fichiers : 1.3.1 remplace 1.2.1.

  • ✨ Documentation template ejs

  • ✨ Mise à jour de la dépendance “simple-get” en 4.0.1


Core

  • 🎉 Ajout du module font-swap

  • 🛠️ Correctif de la régression sur l’ordre des média queries (MD n'était plus pris en compte)

  • 🛠️ Correction de l’alignement des icônes (span inline)

Alerte

  • 🎉 Exemple d’ajout dynamique d’une alerte refermable (pour illustrer l’utilisation du role=”alert”)

 

Bouton radio / Case à cocher

  • 🎉 Ajout d’un exemple avec <sup> et <sub>

  • 🛠️ Correction de la gestion de l’attribut checked

Interrupteur

  • 🛠️ correctif a11y : activé/désactivé n’est plus restitué deux fois par les lecteurs d'écran

  • 🛠️ correctif de l’affichage du status sur firefox

  • 🛠️ Correction de la gestion de l’attribut checked

Média

  • 🛠️ “e” manquant dans le commentaire accompagnant les image
    (“<!-- L’alternative de l’image (attribut alt) doit toujours être présente (…)-->“)

Menu principal

  • 🛠️ Correction du focus des sous items qui était tronqué

  • 🛠️ Refactorisation du template ejs de header et ses sous templates & ajout documentation

  • 🛠️ Correction du bouton fermer du mega menu, maintenant entièrement cliquable

Menu latéral

  • 🛠️ Correction du focus des sous items qui était tronqué

Modal

  • 🛠️ ajout de l’attribut aria-hidden="true" sur le span de l’icône du titre de la modal.


Version 1.3.0

🌎 Global

  • 🛠️ Correction du chargement des CSS vars par défaut lorsque les cookies sont désactivés.

  • 🛠️ Correction d’un bug javascript sur l’utilisation de la méthode .classList() dû au chargement des scripts de polyfill dans le script dsfr.module.js

  • 🛠️ Mise à jour de la documentation des templates ejs

🎨 Fondamentaux

  • 🎉 Ajout d’une nouvelle police de caractères pour les icône systèmes

    • fr-icon-error-fill & fr-icon-error-line

    • fr-icon-info-fill & fr-icon-info-line

    • fr-icon-warning-fill & fr-icon-warning-line

    • fr-icon-success-fill & fr-icon-success-line

  • 🎉 Ajout d’un reset CSS pour les balises <sup> et <sub> et exemples d’implémentation pour utilisation dans les radio-button ou checkbox

  • 🎉 Liste exhaustive des utilitaires d'espacements dans l’exemple du core.
    Ajout des tokens n1-5v, n0-5v, 0-5v, 1.5v (valant respectivement -6px, -2px, 2px, 6px).

🧩 Composants

Alerte

  • Retrait de l’attribut role=”alert” par défaut. Ce rôle doit être ajouté sur les alertes dynamique, qui sont injectée dans le DOM au cours de la navigation dans une page.

  • ✨ Mise à jour des icônes de status

Champs de saisie

  • ✨ Mise à jour des icônes d’erreur et de succès.

Contenu média (a11y)

  • Ajout d’attributs role='img’ et aria-label sur les svg porteurs de sens.

  • ✨ Ajout d’un exemple de svg non porteur de sens

Gestionnaire de consentement - Consent (a11y)

  • Ajout d’attributs “title” sur les boutons “tout accepter”, “tout refuser”, “personnaliser”

  • Attributs aria sur le fieldset des services du formulaire de consentement, plutot que sur la légende :

    • Retrait de l’attribut aria-describedby de la balise legend

    • Ajout d'id aux balises legend

    • Ajout de l’attribut aria-labelledby sur les balises fieldset ayant pour valeurs les id du tag legend et et de la description.

  • Ajout d’un attribut aria-describedby sur les boutons ‘voir plus de détail’ affichant les sous-finalité.

Lettre d’information & RS - Follow (a11y)

  • Ajout de l'attribut autocomplete='email' pour gérer l’auto-complétion

  • ✨ Message d’erreur plus précis, avec un exemple d’adresse électronique différent de celui présent dans le placeholder.

  • ✨ Attribut title des liens externes plus court “intitulé lien - ouvre une nouvelle fenêtre”

  • ✨ Mise à jour de l’icônes d’erreur.

Partage (a11y)

  • Ajout des attributs role=”link” et aria-disabled=”true” sur les liens désactivés

  • Message d’explication avant les boutons désactivés dans le DOM

  • ✨ Attribut title des liens externes plus court “intitulé lien - ouvre une nouvelle fenêtre”

✨ Ajout d’un exemple de svg non porteur de sens

Onglets - tabs

  • 🎉 Ajout d’un js pour scroll vers le bouton sélectionné

  • 🛠️ Retrait de la function conceal sur le tabPanel dans l'API js


Tag

  • 🚫 Suppression de la possibilité d’avoir l’icône à droite (zone réservée aux icônes ‘selectionné’ et ‘supprimable’)


Documentation

  • 🛠️ Header et Foote : Correction de certains exemples de présentation en remplaçant le terme 'République Française' par 'Intitulé officiel'

  • 🛠️ Tag : Correction des exemples d’implémentation, ajouts des nouveaux snippets

  • 🛠️ Lien, Pagination, Mise à jour des snippets de liens désactivés

  • 🛠️ Boutons radios riches, modification du commentaire image dans les snippets de code.

  • 🛠️ Inputs, Lettre d’information, Alerte: mise à jour des previews suite au changement d’icônes.


Téléchargements

Code



Librairie Sketch