Version 1.0.0 rc1

08 avril 2021

version Release candidate, pour validation .

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 le fichier Sketch, le code et la documentation présente sur cet espace Confluence.


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


IMPORTANT !
Dans un souci de cohérence globale, le préfixe des classes css du DSFR change!
Nous abandonnons rf qui nous a accompagné tout au long de la phase ß au profit de fr.

Toutes les classes, id, et data-attributes sont concernés .
Par exemple:

fr-header remplace rf-header.

data-fr-theme remplace data-rf-theme.

<section class="fr-accordion"> <h3 class="fr-accordion__title"> <button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-78">Intitulé accordéon</button> </h3> <div class="fr-collapse" id="accordion-78"> <!-- données de test --> </div> </section>

<a class="fr-link" href="#">Label lien</a>

Il faut donc remplacer la chaine rf- par fr- dans vos fichiers, si vous utiliser la version 1 du DSFR!

Général

Evolution de la couleur $blue-france300 utilisé en thème sombre.

Librairie Sketch

Fondamentaux

🎉 Ajout de l’ombre MD inversée.
✨ Évolution de l’ombre MD.
🎉 Ajout des icônes réseaux sociaux dans la sous-librairie d’icônes.
✨ Évolution de la nomenclature des color variables.
✨ Évolution de la valeur du $blue-france-300
✨ Évolution de l’organisation des styles de claque bordure et couleurs

Composants

Global
✨ Évolution des overrides.

Liens
✨ Évolution des overrides des icônes des liens.

Modale
🛠️ Correction des paddings bottom des modales cas max.
🛠️ Rajout de l’ombre MD inversée sur les modales mobile.

 

Pagination
🎉 Ajout des items icône + texte “premier” et “dernier”.
🛠️ Correction de la couleur des items actifs.

 

Pied de page
✨ Évolution des logos partenaires du Pied de page, encadré intégré directement dans le Pied de page plutôt que dans le symbole “logo partenaire”.
🛠️ Correction hauteur du bloc lien dans le pied de page.

 

En-tête
🎉 Ajout du symbole imbriqué “ nom de service et baseline” dans les symboles “En-tête avec logo” Desktop.

 

Menu latéral
🎉 Ajout des items de navigation N2 et N3 mobile.
🎉 Ajouts des items “N2 déroulant ouvert actif” en desktop
✨ Évolution des items de navigation mobile et desktop.

 

 


Code

Fondamentaux

✨ Changement du préfixe de toutes les classes : fr-.
✨ Valeur de couleur du bleu France en theme sombre.
Evolution de la couleur des hovers transverse en thème sombre.
🎉 CORE - Ajout d’icônes dans la font-icon (arrow-double, refresh, theme, les réseaux sociaux…) ?
🎉 Grilles - Ajout de version responsive pour les gouttières
🛠️ Changement de structure: le dossier /packages devient /src.
Dans chaque ‘package’ les dossier scripts, style, template (auparavant dans ‘src’) remontent d’un niveau.

Composants

Boutons Radios, Cases à cocher
🛠️ Style de la légende sans graisse (regular).
🛠️ role=”group” retiré des groupes n’ayant pas de messages d’erreur ou de succès.

 

Interrupteur
✨ Nomenclature BEM de la liste d’interrupteurs, la classe .fr-toggle-list devient .fr-toggle__list
🛠️ correction de la marge entre l'input et le label sans texte activé/désactivé.

 

Menu latéral
🛠️ Correction des marges et des items actifs.

 

Navigation principale
Révision générale de la navigation
🛠️ Modale retirée de .fr-nav(remise au niveau du header)
🛠️ .fr-link--close remis dans la modale du header
🛠️ classes des <li> de .fr-menu et .fr-mega-menu retirée, non nécessaires
🛠️ .fr-nav__item--active .fr-menu__item--active .fr-mega-menu__item--active .fr-mega-menu__category--active dépréciées, l’item active est signifiée directement sur le bouton .fr-nav__btn ou le lien .fr-nav__link grâce à la présence de l’attribut aria-current
🛠️ Contenu éditorial du mega-menu inséré dans un wrapper .fr-mega-menu__leader
🛠️ Paragraphe du contenu éditorial caché en mobile et visible à partir du point de rupture LG grâce aux utilitaires .fr-hidden et .fr-displayed-lg
🛠️ Alignement du lien du contenu éditorial grâce à l’ajout de l’utilitaire .fr-link--align-on-content

 

En-tête
Révision générale du header
🛠️ Ajout d’un wrapper autour de la navigation pour la modale du menu mobile .fr-header__menu et déplacement du bouton .fr-link--close en premier enfant.
??️ Ajout d’un wrapper autour de la barre de recherche pour la modale mobile .fr-header__search et déplacement du bouton .fr-link--close en premier enfant.
🛠️ Insertion du conteneur .fr-container redistribué dans .fr-header__body et .fr-header__menu
🛠️ Ajout d’un wrapper .fr-header__body-row contenant .fr-header__brand et .fr-header__tools
🛠️ Ajout d’un wrapper .fr-header__brand-top pour la ligne du haut de .fr-header__brand en mobile
🛠️ Déplacement de .fr-header__navbar dans .fr-header__brand-top
🛠️ Renommage de .fr-shortcuts en .fr-links-group et classes enlevées des <li>
🛠️ Insertion d’un conteneur .fr-container dans .fr-header__search avec le modificateur .fr-container-lg--fluid
🛠️ Ajout d’un wrapper .fr-header__tools-links dans .fr-header__tools, contenant les liens d'accès direct .fr-links-group
🛠️ Ajout d’un élément .fr-header__menu-links dans .fr-header__menu où seront déplacés les liens d’accès direct

 

Pied de page
🛠️ correction hauteur max des logos partenaires.

 

Pagination
🛠️ correction des boutons icones + texte (ajustement de la taille).

 

Sommaire
🛠️ Correction des marges.

 

Liens
🎉 Ajout d’une classe utilitaire .fr-link--align-on-content
🎉 Ajout de classes utilitaire .fr-raw-link et .fr-reset-link permettant d’annuler les styles de liens (sur les images et figure).


Documentation

🎉 Création de la page Gestionnaire de consentement.
🎉 Création de pages : « principes de design », « Avant de commencer », « stratégie d’adoption »
🛠️ Paramètres d’affichage : correction du problème d’encodage dans le snippet du lien “intégré dans la pied de page”
🛠️ Ajouts de bloc ‘Paramétrisation’ et du bloc ‘Aide’ sur les pages composant.

🚫 Suppression des pages « charte bêta » et « déroulement de la phase bêta »

 

Évolution de la page couleurs

 

 


Téléchargements

Code


Librairie Sketch


Librairie d’icônes