Version 1.4

16 mars 2022

(code: hotfix 1.4.3 du 14 juin 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)

Évolution(s)

  • ✨ Librairie Sketch : séparation des symboles et des planches de présentation des “Fondamentaux” et des “Composants” en deux fichiers distincts : une librairie “core” non ouverte au téléchargement et un fichier à télécharger (Consulter la documentation dédiée à Sketch).

  • ✨ Changement des états par défaut et au survol des liens (“fr-links”) : par défaut, les liens sont soulignés et au survol, le soulignement s'épaissit.

  • ✨ Evolution des tailles de texte: fusion des styles de texte (Dekstop et Mobile) XL à 20px et LG à 18px

  • ✨ Evolution de la taille (hauteur) des boutons LG : 56px 48px. Le texte passe lui aussi à 18px.

  • 🎉 Ajouts d’icônes supplémentaires (liste détaillée plus bas).


Librairie Sketch

🎨 Fondamentaux

Planche

  • 🚫 Suppression des planches de présentation dans le fichier de la librairie “core”

  • 🎉 Création d’un fichier dédié aux planches des “Fondamentaux” et des “Composants”

  • ✨ Refonte des planches de “Bienvenue”

  • ✨ Refonte des planches de “Fondamentaux” avec le rajout d’une partie dédiée au système colorimétrique

  • ✨ Refonte des planches de “Composant” avec le rajout d’une introduction présentant le composant et ses quelques règles d’utilisations sommaires

Couleur

  • ✨ Classement des tokens d’options par indice dans les styles de calques et dans les colors variables

  • 🎉 Rajout des tokens de décisions manquants dans les styles de calques et les colors variables

Les couleurs marquées d’un cadenas 🔒 ne sont pour l’instant associées à aucun composant et usage existant.

Forme

  • ✨ Déplacement du symbole “Forme de base” du dossier “Outils” dans le dossier “Fondamentaux”

Typographie

  • ✨ Classement des styles de textes en 4 sections :

    • “1. Titres alternatifs”

    • “2. Titres de niveaux”

    • “3. Corps de texte”

    • “4. Composants”

  • ✨ Classement des styles de texte dans la section “3. Corps de texte” en 2 sections suivant la typographie utilisée “Marianne” ou “Spectral”

  • ✨ Fusion des styles de texte (Dekstop et Mobile) XL à 20px et LG à 18px

  • 🛠️ Rajout du bold sur “XS - Texte mention - bold” en thème clair sur l'alignement à droite

Icône

  • 🎉 Ajout des icônes :

    • Action

      • zoom-in-line + zoom+in-fill

      • zoom-out-line + zoom-out-fill

      • link-unlink

      • italic

      • list-ordered

      • list-unordered

      • font-size

      • bold

      • highlight

    • Contenus et médias

      • phone-line + phone-fill

      • rss-line + rss-fill

      • image-line + image-fill

      • line-chart-line + line-chart-fill

      • map-pin-2-line + map-pin-2-fill

      • road-map-line + road-map-fill

      • timer-line et timer-fill

    • Navigation

      • home-4-line + home-4-fill

      • arrow-go-back-line + arrow-go-back-fill

      • arrow-up-fill

🧩 Composants

Bouton

  • 🎉 Ajout du bouton tertiaire

  • ✨ Passage des labels en regular des boutons primaires et secondaire en medium

  • 🛠️ Modification de la taille (longueur) des boutons avec icône en appliquant la marge négative

  • 🛠️ Modification de la taille (hauteur) des boutons LG : 56px 48px

  • 🛠️ Modification de la nomenclature : InactifDésactivé

Élément de navigation

  • 🛠️ Modification de la nomenclature : ActifCourant

Pagination

  • 🛠️ Modification de la nomenclature : Défaut / Actif / InactifDéfaut / Courant /Désactivé

Liste déroulante

  • 🛠️ Modification de la nomenclature : InactifDésactivé

Onglet

  • ??️ Modification de la nomenclature : ActifSélectionné

Tags

  • 🛠️ Modification de la nomenclature : Défaut / InactifDéfaut / Désactivé / Sélectionné / Supprimable

Lien

  • ✨ Rajout d’un soulignement sous les liens

  • 🚫 Suppression du padding des liens au survol

  • 🚫 Suppression des symbols “lien icône seule”

  • 🛠️ Modification de la nomenclature : InactifDésactivé

Bouton “FranceConnect”

  • 🎉 Ajout du bouton “FranceConnect”

  • 🎉 Ajout du bouton “France Connect +”

Partage RS

  • ✨ Passage des items de formes arrondis en formes carrés

  • 🛠️ Modification de la nomenclature : InactifDésactivé

Pagination

  • ✨ Passage des items de formes arrondis en formes carrés

Champ de saisie

  • 🎉 Rajout des symboles “Erreur + Texte de description + Message” et “Succès + Texte de description + Message”

  • 🛠️ Modification de la nomenclature : InactifDésactivé

Bouton radio

  • 🛠️ Correction du placement des composants au moment de l’agrandissement du composant “Groupe - horizontal”

  • 🛠️ Modification de la nomenclature : Désactivé - Défaut / Activé / InactifDéfaut (non coché) /
    Coché / Désactivé

Bouton radio riche

  • 🛠️ Modification de la nomenclature : Défaut / Inactif / ActivéDéfaut (non coché) / Coché / Désactivé

  • 🛠️ Correction du token sur le fond du composant fermé en mobile, thème sombre

  • 🛠️ Correction de l’espacement entre le titre de la rubrique et la liste d’items

Fil d’Ariane

  • 🛠️ Correction de l’ordre des calques en thème clair et en thème sombre

Tuile

  • 🛠️ Correction d’un problème de resize vertical sur horizontal en desktop

Case à cocher

  • 🛠️ Modification de la nomenclature : Défaut / Activé / InactifDéfaut (non coché) /
    Coché / Désactivé

Interrupteur

  • 🛠️ Modification de la nomenclature : Désactivé / Activé / Désactivé - Inactif / Activé - InactifNon coché/ Coché / Non coché désactivé / Coché désactivé

Ajout de fichier

  • 🛠️ Modification de la nomenclature : InactifDésactivé


Librairie Figma

Général

  • Diverses corrections de wording

  • Tous les symboles de base ont désormais une description indiquant leur rôle, afin d'éviter les manipulations malencontreuses

  • Harmonisation des noms d'états pour les composants : dans la plupart des cas, “Défaut” est l'état par défaut, parfois accompagné d’une précision, et “Désactivé” remplace le terme “Inactif”

  • Refonte des planches de présentations des couleurs pour plus de cohérence avec la présentation Sketch.

Du fait de la mise à jour des liens et l’ajout du bouton tertiaire, certaines modifications sont à prévoir lors de la mise à jour de la librairie Figma dans vos designs :

  • Réinitialisation des labels des accès rapides dans l’en-tête

  • Réinitialisation de l’icône des liens avec icône seule

  • Diminution de la hauteur de la barre de recherche LG à 48px

  • Réinitialisation des numéros de pagination

🎨 Fondamentaux

Icônes

🎉 Ajout des icônes :

  • Action

    • zoom-in

    • zoom-out

    • link-unlink

    • italic

    • list-ordered

    • list-unordered

    • font-size

    • bold

    • highlight

  • Contenus et médias

    • phone

    • rss

    • image

    • line

    • map

    • road-map

    • timer

  • Navigation

    • home-4

    • arrow-go-back

    • arrow-fill (séparée de arrow-line pour éviter des défauts de mise à jour sur arrow-line, très présente dans le DSFR)

Typographie

✨ Modification du style de texte XL à 20px et LG à 18px. Par conséquent, certains composants (comme le bouton LG, voient la taille de leur texte réduite)

🚫 Suppression des styles de texte XL mobile et LG mobile (fusionnés avec la version Desktop, dont la taille est ajustée).

🧩 Composants

Lien

  • ✨ Évolution du lien :

    • Suppression des marges internes

    • Ajout d’un souligné

    • Au survol, le souligné s’épaissit

  • 🎉 Configuration du composant interactif (survol et clic)

  • 🚫 Le composant “Lien icône seule” disparaît. Ses occurrences sont remplacées par des boutons tertiaires icône seule (voir “Bouton”).

  • ✨ Les liens dans les composants suivants évoluent donc en conséquence :

    • Liens d’évitement

    • Navigation principale

Retour en haut de page

  • 🎉 Ajout d’un sous-composant des liens : “Retour en haut de page”

Bouton

  • 🎉 Ajout d’un troisième bouton, le bouton tertiaire :

    • Ce bouton est à réserver aux actions mineures, et aux contextes où un bouton discret est nécessaire

    • Par défaut, il possède un encadré $border-default-grey, celui-ci est facultatif

  • 🎉 Configuration des composants interactifs (survol et clic)

  • 🛠️ Ajustement des marges internes de tous les boutons : celles-ci sont réduites pour plus de sobriété

  • 🛠️ Ajustement des marges internes sur les variantes comprenant une icône : celles-ci sont ajustées pour prendre en compte la marge négative présente en code (pour compenser l’espace blanc présent dans la plupart des icônes)

  • 🛠️ Le bouton LG est réduit de 8px à 48px de haut, pour des raisons de cohérence avec le bouton LG avec icône seule

  • ✨ Les libellés des trois types de bouton passent en graisse “Medium” pour une meilleure lisibilité

  • ✨ Des boutons tertiaires remplacent les liens dans les composants suivants :

    • Alerte, Modale : bouton “Fermer”

    • Contenu média : bouton “Afficher la transcription”

    • En-tête : accès rapides

    • Lettre d’information et réseaux sociaux : boutons réseaux sociaux

    • Pagination : tous les boutons

    • Partage : boutons réseaux sociaux

Bouton FranceConnect

  • 🎉 Ajout du bouton “FranceConnect”

  • 🎉 Ajout du bouton “FranceConnect+”

Onglets

  • 🛠️ Ajustement des marges internes sur les variantes comprenant une icône : celles-ci sont ajustées pour prendre en compte la marge négative présente en code (pour compenser l’espace blanc présent dans la plupart des icônes)

Pied de page

  • 🛠️ Ajout d’icônes “lien externe” aux liens obligatoires du pied de page


Code

Version 1.4.3

Date de publication : 14 juin 2022

Cartes

🛠️ Correction du souligné sur le titre des Cartes introduit en 1.4.2 .

Version 1.4.2

Date de publication : 14 juin 2022

Liens
🛠️ Correction du soulignement des liens sur plusieurs lignes
🛠️ Correction du target="_blank" ajoutant une icône sur les balises

Version 1.4.1

Date de publication : 28 mars 2022

Bouton FranceConnect
🛠️ Retrait du paragraphe de description.
🛠️ Correction de l’intitulé du lien Qu’est-ce que FranceConnect.
✨ Ajout d’un attribut target (_blank) sur le lien.

Tag
🛠️ Tag SM selectionnable: correction du background lorsque le tag est selectionné.

Follow
🛠️ Correction des classes “dépréciées” pour prendre en compte les liens avec icônes customs.

Version 1.4.0

🎨 Fondamentaux

🎉 Mise en place d’un système de dépréciation. Les modifications de classes CSS et de structure HTML dites “Breaking changes” (représenté par ce picto : ) passent à présent par une étape de dépréciation avant d'être définitivement supprimés. Il est cependant conseillé de recourir à ces modifications rapidement afin d'éviter le dédoublement du code et des problèmes de maintenabilité futurs.

🎉 Mise en place d’un système de variabilisation du core. Le fichier scr/core/variables.scss permet de configurer les classes utilitaires et style du reset du core que l'on souhaite build. Pour rebuild le core il est nécessaire de disposer des outils de build du dsfr (dossier /tool) disponible depuis git uniquement (hors release).
La command yarn build -p core permet alors de regénérer le fichier core.css

🛠️ Fonte Marianne: nouvelle version corrigeant l’alignement avec les icônes et ajout des fichiers avec la graisse medium.

✨ Amélioration des template EJS, maintenant plus paramétrables.

🛠️ Correction de l’animation du collapse sur firefox

🛠️ Correction de nom de classes utilitaires :
fr-display-sm devient fr-display--sm (idem pour md, lg, xl)
fr-text--xx-bold devient fr-text--heavy
fr-displayed-sm devient fr-unhidden-sm (idem pour md, lg, xl)


Les utilitaires fr-displayed-(sm,md,lg) , fr-display-(sm,md,lg) , fr-text--xx-bold sont dépréciés.
Utilisez maintenant respectivement : fr-unhidden-(sm,md,lg) , fr-display--(sm,md,lg) , fr-text--heavy

 

🎉 Ajout des icônes :

  • Action

    • zoom-in-line + zoom+in-fill

    • zoom-out-line + zoom-out-fill

    • link-unlink

    • italic

    • list-ordered

    • list-unordered

    • font-size

    • bold

    • highlight

    • phone-line + phone-fill

  • Contenus et médias

    • rss-line + rss-fill

    • image-line + image-fill

    • line-chart-line + line-chart-fill

    • map-pin-2-line + map-pin-2-fill

    • road-map-line + road-map-fill

    • timer-line et timer-fill

  • Navigation

    • home-4-line + home-4-fill

    • arrow-go-back-line + arrow-go-back-fill

    • arrow-up-fill (pour le back-to-top)

🧩 Composants

Des modifications dites “Breaking Change” sont à prévoir. Il n’y aura pas d’impacte visuel puisqu’une version deprecated est maintenu un certain temps pour facilité la monté de version. Néanmoins ces changements doivent être pris en compte avant la fin du cycle de dépréciation (à définir).

  • Suite à la nouvelle version des boutons, certains lien deviennent des boutons tertiaires. Des modifications de classes ont donc été apporté sur certain composants : alert, content, modal, follow, share, consent, header.

  • L'évolution de la classe utilitaire fr-displayed, qui devient fr-unhidden, implique des changements sur pagination et navigation.


Accordions

Changement de la structure html des groupes d’accordéons :
les balises <ul> et <li> sont dépréciées <ul class="fr-accordions-group"> devient <div class="fr-accordions-group">

Bouton

🎉 Ajout du bouton tertiaire fr-btn--tertiary et tertiaire sans contour fr-btn--tertiary-no-outline

 

Content

Changement de la structure html :

Le bouton de transcription devient un bouton tertiaire au lieu d’un lien : fr-link devient fr-btn

1 2 3 4 5 6 7 8 9 10 11 <div class="fr-content-media"> <div class="fr-responsive-vid"> <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="fr-content-media__caption">© Légende de la vidéo</div> <div class="fr-content-media__transcription"> <button class="fr-btn"> Label du bouton de la transcription </button> </div> </div>

 

Modal

🛠️ Correction JS, modal cachée en no CSS

Changement de la structure html :

Le bouton de fermeture de la modal devient un bouton tertiaire sans contour Les classes fr-link fr-link--close sont dépréciées et remplacées par fr-btn fr-btn--close

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <button class="fr-btn" data-fr-opened="false" aria-controls="modal-1"> Modal simple </button> <dialog id="modal-1" class="fr-modal" role="dialog" aria-labelledby="modal-861-title"> <div class="fr-container fr-container--fluid fr-container-md"> <div class="fr-grid-row fr-grid-row--center"> <div class="fr-col-12 fr-col-md-8 fr-col-lg-6"> <div class="fr-modal__body"> <div class="fr-modal__header"> <button class="fr-btn--close fr-btn" aria-controls="modal-1" title="Fermer"> Fermer </button> </div> <div class="fr-modal__content"> <h1 id="modal-861-title" class="fr-modal__title"> <span class="fr-fi-arrow-right-line fr-fi--lg" aria-hidden="true"></span> Titre de la modale </h1> <p>Lorem [...] elit ut.</p> </div> </div> </div> </div> </div> </dialog>

 

Alert

Changement de la structure html :

Le bouton de fermeture de l’alerte devient un bouton tertiaire sans contour . Les classes fr-link fr-link--close sont dépréciées et remplacées par fr-btn fr-btn--close.

1 2 3 4 5 6 7 <div class="fr-alert fr-alert--info"> <p class="fr-alert__title">Information Covid</p> <p>Cliquer sur la croix pour fermer l&#39;alerte</p> <button class="fr-btn--close fr-btn" title="Masquer le message" onclick="const alert = this.parentNode; alert.parentNode.removeChild(alert)"> Masquer le message </button> </div>

 

Gestionnaire de consentement

Changement de la structure html :

Le bouton de fermeture du gestionnaire de consentement devient un bouton tertiaire sans contour. Les classes fr-link fr-link--close sont dépréciées et remplacées par fr-btn fr-btn--close.

1 2 3 4 5 6 7 ... <div class="fr-modal__header"> <button class="fr-btn--close fr-btn" aria-controls="fr-consent-modal" title="Fermer"> Fermer </button> </div> ...

 

Header

Changement de la structure html :

Le bouton de fermeture des modals de search et menu en mobile deviennent des boutons tertiaires sans contour. Les classes fr-link fr-link--close sont dépréciées et remplacées par fr-btn fr-btn--close.

Le groupe de lien d’accès rapide, devient un groupe de bouton :

  • fr-links-group est déprécié et est remplacé par fr-btns-group

  • fr-link est déprécié et est remplacé par fr-btn

+ voir navigation

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <div class="fr-header__tools"> <div class="fr-header__tools-links"> <ul class="fr-btns-group"> <li> <a class="fr-btn fr-fi-add-circle-line" href="[url - à modifier]"> Créer un espace </a> </li> <li> <a class="fr-btn fr-fi-lock-line" href="[url - à modifier]"> Se connecter </a> </li> <li> <a class="fr-btn fr-fi-account-line" href="[url - à modifier]"> S’enregistrer </a> </li> </ul> </div> <div class="fr-header__search fr-modal" id="modal-430"> <div class="fr-container fr-container-lg--fluid"> <button class="fr-btn--close fr-btn" aria-controls="modal-430" title="Fermer"> Fermer </button> <div class="fr-search-bar" id="search-429" role="search"> <label class="fr-label" for="search-429-input"> Rechercher </label> <input class="fr-input" placeholder="Rechercher" type="search" id="search-429-input" name="search-429-input"> <button class="fr-btn" title="Rechercher"> Rechercher </button> </div> </div> </div> </div> ... <div class="fr-header__menu fr-modal" id="modal-402" aria-labelledby="button-403"> <div class="fr-container"> <button class="fr-btn--close fr-btn" aria-controls="modal-402">Fermer</button> ...

 

Follow

Le groupe de liens ‘socials' dans ‘follow’ devient un groupe de boutons.

Changement de la structure html :

Dans le groupe de lien socials :

  • fr-links-group est déprécié et est remplacé par fr-btns-group.

  • fr-links-group--lg est retiré (et de plus remplacée par fr-btns-group--lg)

  • Les classes fr-link--facebook fr-link sont dépréciées et remplacées par fr-btn--facebook fr-btn (idem pour les autres liens)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <ul class="fr-btns-group"> <li> <a class="fr-btn--facebook fr-btn" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le facebook de l'organisation]" target="_blank"> facebook </a> </li> <li> <a class="fr-btn--twitter fr-btn" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le twitter de l'organisation]" target="_blank"> twitter </a> </li> <li> <a class="fr-btn--instagram fr-btn" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers l'instagram de l'organisation]" target="_blank"> instagram </a> </li> <li> <a class="fr-btn--linkedin fr-btn" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le linkedin de l'organisation]" target="_blank"> linkedin </a> </li> <li> <a class="fr-btn--youtube fr-btn" title="[À MODIFIER - Intitulé du lien] - nouvelle fenêtre" href="[À MODIFIER - Lien vers le youtube de l'organisation]" target="_blank"> youtube </a> </li> </ul>

 

Share

Les liens de partage ont maintenant une apparence de boutons tertiaires. Le groupe de liens devient un groupe de boutons.

Changement de la structure html :

Dans le groupe de liens de partage :

  • fr-share__group est déprécié et devient fr-btns-group

  • fr-share__link fr-share__link--facebook est déprécié
    et devient fr-btn fr-btn--facebook (idem pour les autres liens)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <div class="fr-share"> <p class="fr-share__title">Partager la page</p> <ul class="fr-btns-group"> <li> <a class="fr-btn--facebook fr-btn" onclick="window.open(this.href,'Partager sur Facebook','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=450'); event.preventDefault();" href="https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]" target="_blank" rel="noopener"> Partager sur Facebook </a> </li> <li> <!-- Les paramètres de la reqûete doivent être URI-encodés (ex: encodeURIComponent() en js) --> <a class="fr-btn--twitter fr-btn" onclick="window.open(this.href,'Partager sur Twitter','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=420'); event.preventDefault();" href="https://twitter.com/intent/tweet?url=[À MODIFIER - url de la page]&text=[À MODIFIER - titre ou texte descriptif de la page]&via=[À MODIFIER - via]&hashtags=[À MODIFIER - hashtags]" target="_blank" rel="noopener"> Partager sur Twitter </a> </li> <li> <a class="fr-btn--facebook fr-btn" onclick="window.open(this.href,'Partager sur LinkedIn','toolbar=no,location=yes,status=no,menubar=no,scrollbars=yes,resizable=yes,width=550,height=550'); event.preventDefault();" href="https://www.linkedin.com/shareArticle?url=[À MODIFIER - url de la page]&title=[À MODIFIER - titre ou texte descriptif de la page]" target="_blank" rel="noopener"> Partager sur LinkedIn </a> </li> <li> <a class="fr-btn--mail fr-btn" href="mailto:?subject=[À MODIFIER - objet du mail]&body=[À MODIFIER - titre ou texte descriptif de la page] [À MODIFIER - url de la page]" target="_blank"> Partager par email </a> </li> <li> <button class="fr-btn--copy fr-btn" onclick="navigator.clipboard.writeText(window.location);alert('Adresse copiée dans le presse papier.');"> Copier dans le presse-papier </button> </li> </ul> </div>

 

Navigation

Changement de la structure html :

Les classes fr-link fr-link--close sont dépréciées et remplacées par fr-btn fr-btn--close.

Dans l’exemple du ‘leader’ du mega-menu : fr-displayed-lg est déprécié et devient fr-unhidden-lg.

1 2 3 4 5 <div class="fr-mega-menu__leader"> <h4 class="fr-h4 fr-mb-2v">Titre éditorialisé</h4> <p class="fr-hidden fr-unhidden-lg">Lorem [...] elit ut.</p> <a class="fr-link fr-fi-arrow-right-line fr-link--icon-right fr-link--align-on-content" href="#">Voir toute la rubrique</a> </div>

 

Pagination

L’utilitaire fr-displayed est déprécié et devient fr-unhidden
(à utiliser conjointement avec fr-hidden).

Changement de la structure html :

Les éléments cachés en mobile changent : fr-displayed-lg est déprécié et devient fr-hidden fr-unhidden-lg.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <nav role="navigation" class="fr-pagination" aria-label="Pagination"> <ul class="fr-pagination__list"> <li> <a class="fr-pagination__link fr-pagination__link--first" href="#"> Première page </a> </li> <li> <a class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label" href="#"> Page précédente </a> </li> <li> <a class="fr-pagination__link" href="#" title="Page 1"> 1 </a> </li> <li> <a class="fr-pagination__link" aria-current="page" title="Page 2"> 2 </a> </li> <li> <a class="fr-pagination__link fr-hidden fr-unhidden-lg" href="#" title="Page 3"> 3 </a> </li> <li> <a class="fr-pagination__link fr-hidden fr-unhidden-lg"> … </a> </li> <li> <a class="fr-pagination__link fr-hidden fr-unhidden-lg" href="#" title="Page 130"> 130 </a> </li> <li> <a class="fr-pagination__link fr-hidden fr-unhidden-lg" href="#" title="Page 131"> 131 </a> </li> <li> <a class="fr-pagination__link" href="#" title="Page 132"> 132 </a> </li> <li> <a class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label" href="#"> Page suivante </a> </li> <li> <a class="fr-pagination__link fr-pagination__link--last" href="#"> Dernière page </a> </li> </ul> </nav>

 

Sidemenu

  • 🛠️ correction de la hauteur du sidemenu sticky

Tab

  • 🛠️ correction z-index des panel (provoquait des bug avec la modal).

 

Paramètres d’affichage

Changement de la structure html :

Le bouton d’ouverture de la modale des paramètres d’affichage devient un bouton tertiaire sans contour . La composition en classes utilitaires basée sur le fr-link est dépréciée et remplacées par fr-btn fr-btn--display que ce soit dans l’entête, le pied de page ou en bouton autonome.

Dans l’entête

1 2 3 4 5 6 7 8 9 10 11 <div class="fr-header__tools"> <div class="fr-header__tools-links"> <ul class="fr-btns-group"> <li> <button class="fr-btn--display fr-btn" aria-controls="fr-theme-modal" title="Paramètres d'affichage" > Paramètres d'affichage </button> </li> </ul> </div> </div>

Dans le pied de page

1 2 3 4 5 6 7 8 9 <div class="fr-footer__bottom"> <ul class="fr-footer__bottom-list"> <li class="fr-footer__bottom-item"> <button class="fr-btn--display fr-btn" aria-controls="fr-theme-modal" title="Paramètres d'affichage"> Paramètres d'affichage </button> </li> </ul> </div>

Bouton simple

1 2 3 <button class="fr-btn--display fr-btn" aria-controls="fr-theme-modal" title="Paramètres d'affichage"> Paramètres d'affichage </button>


Pied de page

Logo opérateur et logos partenaire: la taille est désormais gérée sur les image de manière inline, et non plus forcée dans la feuille de style: à adapter selon vos besoin!

 


Documentation


🎉 Création et mise à jour des pages.


Téléchargements

Code


Librairie Sketch

Planches

 
Core (disponible sur sketchcloud)