🎉 Version 1.7

21 juillet 2022

(code: hotfix 1.7.1 du 25 juillet 2022)

Les mises à jour du Design System de l'État sont intégrées à des releases dont les numéros de versions suivent la nomenclature SemVer en respectant le schéma suivant : MAJEUR.MINEUR.PATCH (X.Y.Z). Ce système de gestion de versions concernera les fichiers Sketch et Figma, le code et la documentation.

🎉 : AJOUT, ✨ : EVOLUTION, 🛠️ : CORRECTION, 🚫 : SUPPRESSION

Général

Nouveauté(s)

• 🎉 Ajout du composant Sélecteur de langue.

Évolution(s)

• ✨ Évolution des ombres et du système d'élévation.

• 🎉 Ajout des modèles de pages d’erreurs dans les exemples de code.

• ✨ Amendements sur les CGU du DSFR

Librairie Sketch

🎨 Fondamentaux

Couleurs

• 🎉 Ajout des color variables : Options > Neutral > $grey-175, $grey-175-hover, $grey-175-active, $grey-900, $grey-900-hover, $grey-900-active et $grey-150, $grey-150-hover, $grey-150-active.

• 🎉 Ajout des layer styles : Options > Neutral > $grey-175, $grey-175-hover, $grey-175-active, $grey-900, $grey-900-hover, $grey-900-active et $grey-150, $grey-150-hover, $grey-150-active.

• 🎉 Ajout des layer styles (ombres) : Décisions > Background > $background-raised-grey, background-overlap-grey, background-lifted-grey, background-alt-raised-grey, background-alt-overlap-grey, background-contrast-raised-grey, background-contrast-overlap-grey.

• ✨ Évolution des couleurs de bordure dans Décisions > Border > $border-default grey : grey-900 en thème clair et grey-175 en thème sombre.

• ✨ Le token $background-elevated-grey évolue en $background-raised-grey.

🧩 Composants

Cartes

• 🛠️ Correction de l’auto-layout lorsque l’on ne souhaite pas utiliser de description.

Lettre d’information et réseaux sociaux

• 🛠️ Correction de la position des icônes de réseaux sociaux lors de l'étirement du composant.

Boutons fluides et boutons tertiaires

• 🛠️ Correction de la position de l'icône et du texte lors de l'étirement du composant.

Librairie Figma

Général

• Refonte des ombres :
  6 ombres sont présentes en option : $shadow-sm, $shadow-md et $shadow-lg pour thème clair et thème sombre.
  6 ombres sont présentes en décision : raised, overlap et lifted pour thème clair et sombre. Les tokens de décisions reposants sur les options.
  Ces ombres s’accompagne d’un système d’élévation et donc d’éclaircissements en thème sombre. Les mêmes tokens existent pour le thème clair mais ne sont pas affectés d’un éclaircissement.
  En résulte 7 tokens de background en thème clair et sombre :
  raised-grey($grey-1000, $grey-75),
  overlap-grey($grey-1000, $grey-100),
  lifted-grey($grey-1000, $grey-75),
  alt-raised-grey($grey-975, $grey-100),
  alt-overlap-grey($grey-975, $grey-125),
  contrast-raised-grey($grey-950, $grey-125),
  contrast-overlap-grey($grey-950, $grey-150)

• Plusieurs composants sont touchés et donc modifiés (visuellement et techniquement), détail ci-dessous.

🎨 Fondamentaux

• Les options $grey-175, $grey-900 et $grey-150 sont ajoutées.

• Les ombres d’option $shadow-sm, $shadow-md et $shadow-lg pour thème clair et thème sombre sont ajoutées.

🧩 Composants

• Les tokens border-default voient leurs valeurs changer : ils appliquent désormais l’option $grey-900 en thème clair et $grey-175 en thème sombre.

• Le token background-elevated-grey évolue en token de background raised-grey.

• Ajout des tokens de background raised-grey, overlap-grey, lifted-grey, alt-raised-grey, alt-overlap-grey, contrast-raised-grey, contrast-overlap-grey pour thème clair et thème sombre.

• Ajoute des tokens d’ombre raised, overlap et lifted pour thème clair et thème sombre.

Carte

La carte avec ombre (anciennement ombre MD) porte désormais le token raised.

Sélecteur de langue

Nouveau composant permettant de sélectionner une langue (défaut “FR”)

Bloc de téléchargement

Résolution du bug de redimensionnement.

En-tête

• Un fond est ajouté en position absolue pour éviter d’avoir à “Clip content” sur l’ensemble du composant.

• Le composant a une ombre par défaut en overlap.

Modale

• La surcouche est désormais unique ($grey-50 à 64% d’opacité) pour les deux thèmes, la variante thème sombre est donc supprimée.

• Les modales portent le token d’ombre raised.

• Les zones d’action des modales sont revues pour ne pas entrer en conflit avec l’élévation de leur parent : elles sont désormais séparées du corps par un séparateur, portent le même fond. Une marge est ajoutée pour distinguer le corps du pied de la modale.

Navigation principale

• Barre de navigation :

  • Tout comme l’en-tête, la barre de navigation perd son ombre (puisqu’elle est au même niveau que la page). Il est toujours possible de simuler l’ombre en l’ajoutant sur une instance.

  • Le séparateur haut est supprimé (plus nécessaire par défaut puisqu’un séparateur existe sur l’en-tête). Pour la version avec ombre, il est toujours possible de l’ajouter sur les instances.

  • Un séparateur bas est ajouté (il peut être masqué pour les instances avec ombre).

• Mégamenu : un fond est ajouté pour les mêmes raisons que l’en-tête. La bordure d’ouverture est déportée sur ce composant (elle était auparavant sur la barre de navigation). Les variantes avec bordures sont donc supprimées de la barre de navigation.

• Menu déroulant : une barre d’ouverture similaire à celle du mégamenu est ajoutée.

• Mégamenu et menu déroulant portent désormais le token overlap.

• Les planches sont revues pour refléter ces changements.

Gestionnaire de consentement

Le bandeau étant affiché par dessus le contenu, il prend l’ombre overlap.

Code

Version 1.7.2

(29 juillet 2022)

Ajout des répertoires “module”, “standalone”, “i18n” dans la section files du package.json.

Version 1.7.1

(25 juillet 2022)

Fondamentaux

• Correctif z-index sur IE11

Composants

Header

• Correctif exemple logo opérateur horizontal.

Version 1.7.0

🎨 Fondamentaux

• ✨ Mise à jour de node Sass vers Dart Sass. Implémentation en modules SASS

  • Ajout d’un dossier 'module' à la racine du projet

  • Externalisation des mixins et functions Sass dans module/

• ✨ évolution du système d'élévation et des ombres

• 🎉 Ajout de fichiers de traduction pour gérer l’internationalisation du contenu des pages d’exemples

• 🛠️ Amendements sur les CGU du DSFR

🧩 Composants

Sélecteur de langues

• 🎉 Ajout du composant sélecteur de langue

Footer

• 🛠️ Correction du snippet du logo main : ajout du prefix fr- sur fr-footer__partners-link

• 🛠️ Correction du background au survol des liens partenaires en mode sombre

• 🛠️ Correction de l'attribut ‘title’ du lien de brand et de l’attribut ‘alt’ sur le logo opérateur

Header

• 🛠️ Correction de l'attribut ‘title’ du lien de brand et de l’attribut ‘alt’ sur le logo opérateur

• 🎉 Ajout d’un exemple avec sélecteur de langue

Liens

• 🛠️ Correction du soulignement au hover

Pagination

• 🛠️ Correction du style des liens en <button>

Content, média

• 🛠️ Correction du bug de ratio sur les iframe youtube sur android

Indicateur d'étape - Stepper

• 🛠️ Correction du bug sur firefox masquant la barre d’état

Modèles de pages

🎉 Création d’une section ‘page’ dans example/

Page d’erreur - Response

• 🎉 Ajout de modèles de page non trouvée (404)

• 🎉 Ajout du modèle standalone de page service indisponible (503)

Blocs fonctionnels (patterns)

• 🎉 Création d’une section ‘pattern’ dans example/
  Les blocs fonctionnels sont à venir .

Documentation

• 🎉 Création des pages

  • Sélecteur de langue

  • Système d'élévation et ombres

  • Blocs fonctionnels.

• ✨ Mise à jour des pages

  • En tête (mise à jour snippets)

  • Gestionnaire de consentement (misa à jour des previews)

  • Pictogramme

Téléchargements

Code

Librairie Sketch
Core (disponible sur sketchcloud)