diff --git a/CHANGELOG.md b/CHANGELOG.md index e3788c87e..d78e8bf67 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,9 +10,363 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi > ## DSFR v1 +## v1.10 + +### [1.10.0](https://github.com/GouvernementFR/dsfr/compare/v1.9.3...1.10.0) - 26 Juin 2023 + +#### fix(1.10): corrige erreurs de lint + + +#### ⬆️ chore(dependencies): met a jour les dépendances Node [(#638)](https://github.com/GouvernementFR/dsfr/pull/638) +- Mise à jour de sécurité + + +#### 🐛 fix(core): apparence du champ de recherche iOS [(#639)](https://github.com/GouvernementFR/dsfr/pull/639) +- En utilisant des librairies tierces (telles que normalize.css), le champ de recherche reprend son aspect natif arrondi en mobile IOS. +- Spécificité renforcée sur le sélecteur afin de conserver le appearance: none + + +#### 🐛 fix(header): duplication des id généralisée pour les quick access [(#637)](https://github.com/GouvernementFR/dsfr/pull/637) +- L'ensemble des id présents dans les accès rapides du header doivent être suffixés par -mobile à la duplication + + +#### 🐛 fix(analytics): correctifs divers et ajouts de propriétés de page [(#612)](https://github.com/GouvernementFR/dsfr/pull/612) +- liens cassés de la documentation +- retrait du patch js des pages d'exemple +- correctif du collect manuel au changement d'url +- correctif du taux de clic désactivé sur certains composants +- ajustements pages d'exemple +- retrait des limitation de valeurs sur la propriété`user.profile` +- ajouts de propriétés dans la configuration de page + - page_id + - page_author + - page_tags + - page_date + + +#### 🐛 fix(search): hauteur du champ trop grande de 1px sur ios [(#632)](https://github.com/GouvernementFR/dsfr/pull/632) +Sur ios le champ dépasse de 1px par rapport au bouton. + +-> Correction du max-height + + +#### ✨ feat(select, input): ajout de la bordure en état erreur / succés / info [(#635)](https://github.com/GouvernementFR/dsfr/pull/635) +Actuellement la bordure gauche montrant l'état d'erreur/succès/info n'est appliqué que dans le cas d'un groupe de champ en erreur via les modificateur .fr-fieldset--error, .fr-fieldset--valid, .fr-fieldset--info + +Afin d'être ISO avec l'UI nous rajoutons cet élément visuel sur : +- les champs seuls (.fr-input-group) : + - `.fr-input-group--error` + - `.fr-input-group--valid` + - `.fr-input-group--info` +- les selects (.fr-select-group) + - `.fr-select-group--error` + - `.fr-select-group--valid` + - `.fr-select-group--info` + + +#### 🐛 fix(tab): correction onglets imbriqués en legacy [(#628)](https://github.com/GouvernementFR/dsfr/pull/628) +- correction des marges sur les tabs imbriqués sur IE +- correction disclosure et disclosureGroup IE +- correction syntax error selecteur Collapse + + +#### 🐛 fix(example): retire les attributs file des <link> [(#631)](https://github.com/GouvernementFR/dsfr/pull/631) +- l'attribut file n'est pas un attribut possible pour les éléments <link> + + +#### 🐛 fix(link, button, tag, badge): retrait du z-index [(#630)](https://github.com/GouvernementFR/dsfr/pull/630) +- retrait du z-index: 1 qui pose problème dans une modale avec footer. + + +#### 🎉 feat(tooltip): ajout de la fonctionnalité Tooltip [(#486)](https://github.com/GouvernementFR/dsfr/pull/486) +Le composant `Infobulle` (ou `bulle d’aide`, `aide contextuelle`) permet d’afficher du contenu dans le contexte de navigation (non modal), à propos et lors de l’interaction avec un élément précis de l’interface. Il est caché par défaut, et s’affiche au survol ou au clic de l’élément associé, par-dessus le reste de la page. + + +#### 🐛 fix(share): correction copie url dans presse papier [(#629)](https://github.com/GouvernementFR/dsfr/pull/629) +- Gestion de la Promise retournée par `navigator.clipboard.writeText()` + + +#### ✨ feat(address): met a jour les message d'aide des champs de formulaire [(#624)](https://github.com/GouvernementFR/dsfr/pull/624) +- ajout d'indication et de description du format attendu + + +#### 🐛 fix(account): met a jour la hiérarchie html des modèles de page [(#618)](https://github.com/GouvernementFR/dsfr/pull/618) +- Mise en place d'une hiérarchie sans saut de niveau de titre, plus cohérente +- Correctif typo sur la classe `fr-grid-row--gutters` + + +#### 🐛 fix(accordion, transcription, translate, sidemenu): Ajustement sur l'état défaut et actif [(#564)](https://github.com/GouvernementFR/dsfr/pull/564) +Harmonisation avec la navigation sur Accordion, Sidemenu, Translate et Transcription : +- Passage icône et intitulé en action-high-blue-france +- Ajout background-open-blue-france sur le bouton lorsque l'élément est ouvert +- Icône “arrow-down-s-ligne” (la même que sur navigation) +- Accordion, Translate : Retrait changement de graisse (normal -> bold) à l'ouverture et graisse constante en medium + + +#### 🐛 fix(tab, core): correctif tab legacy & margin top des headings [(#621)](https://github.com/GouvernementFR/dsfr/pull/621) +- Corrige la taille de l'icône +- Corrige l'alignement du contenu du tab_panel +- Ajustement du padding de la tab__list +- Retire les margin-top des headings (h1 -> h6) + + +#### 📝 doc(core): ajoute des exemples liens bruts et resets [(#613)](https://github.com/GouvernementFR/dsfr/pull/613) +Par défaut, le dsfr stylise les liens natifs, ce qui peut poser problème dans l'utilisation de librairie tierce. +2 classes utilitaires sont mise à disposition pour contrecarrer le style fort du lien : +- `.fr-raw-link` retire toute stylisation sur les liens natifs +- `.fr-reset-link` remet le soulignement natif du navigateur (`text-decoration: underline;`) +Des pages d'exemples en illustrant l'utilisation ont été ajoutées dans les pages d'exemples des fondamentaux. + + +#### ✨ feat(radio): radio rich sans images & pictogram à la place d'img [(#540)](https://github.com/GouvernementFR/dsfr/pull/540) +Les radios riches doivent utiliser des pictogrammes et non des images : +- Retrait des images +- Ajout de pictogramme + +Le snippet : +```html +<div class="fr-radio-group fr-radio-rich"> + <input value="1" type="radio" id="radio-rich-1" name="radio-rich"> + <label class="fr-label" for="radio-rich-1"> + Libellé bouton radio + </label> + <div class="fr-radio-rich__img"> + <img src="../../../example/img/placeholder.1x1.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" /> + </div> +</div> +``` +DEVIENT : +```html +<div class="fr-radio-group fr-radio-rich"> + <input value="1" type="radio" id="radio-rich-1" name="radio-rich"> + <label class="fr-label" for="radio-rich-1"> + Libellé bouton radio + </label> + <div class="fr-radio-rich__pictogram"> + <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px"> + <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use> + <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use> + <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use> + </svg> + </div> +</div> +``` +Remplacer buildings/city-hall par la catégorie et le nom du pictogramme désiré + +BREAKING CHANGE : `fr-radio-rich__img` devient `fr-radio-rich__pictogram` + + +#### 📝 doc(core): corrige les liens vers les pages de documentation des fondamentaux [(#623)](https://github.com/GouvernementFR/dsfr/pull/623) +- Mise à jour des liens vers les fondamentaux sur le site de documentation + + +#### ⬆️ chore(dependencies): met a jour les dépendances Node [(#622)](https://github.com/GouvernementFR/dsfr/pull/622) +- Mise à jour de sécurité + + +#### ✨ feat(card): image des cartes de téléchargement format a4 [(#620)](https://github.com/GouvernementFR/dsfr/pull/620) +- Ajout d'une image de placeholder au format a4 (21x29.7) + + +#### 🐛 fix(core): corrige liens pour retro-compat sur firefox [(#615)](https://github.com/GouvernementFR/dsfr/pull/615) +- La fonction css max(), mise en place pour corriger le bug d'affichage d'un soulignement d'une épaisseur inférieure à 1px, est supportée à partir de la version 78 de firefox, ce qui est insuffisant. +- Le précédent bug est maintenant corrigé avec un léger épaississement du trait sur firefox (0.25px) + + +#### 🐛 fix(header, navigation): focus des nav-items mobile & ajustements [(#609)](https://github.com/GouvernementFR/dsfr/pull/609) +- L'outline de focus est maintenant entièrement visible sur les liens des sous menu en mobile +- Ajustement de l'alignement du bouton fermé en desktop +- Retrait du mega-menu__leader vide dans les examples + + +#### ✨ feat(pagination): évolution taille et écart des boutons [(#549)](https://github.com/GouvernementFR/dsfr/pull/549) +Harmonisation de l'espacement entre les boutons de pagination : +- L'espacement passe à 16px entre tous les boutons +- Les boutons passent en taille SM + + +#### 🐛 fix(core, modal): décalage scrollbar à l'ouverture/fermeture modale & fix scroll behavior [(#519)](https://github.com/GouvernementFR/dsfr/pull/519) +Lorsque la page est scrollable, un décalage se produit à l'ouverture d'une modal (la page étant figé elle n'est plus scrollable). + +Une marge est donc appliquée à l'ouverture de la modale pour simuler la barre de scroll et ainsi éviter le mouvement du contenu en arrière plan. + + +#### ♻️ refactor(radio,checkbox,toggle): passage input en bleu et refactorisation [(#502)](https://github.com/GouvernementFR/dsfr/pull/502) +Uniformisation des champs à cocher toggle/radio/checkbox + +toggle: +- Ajout des variants toggle error/valid +- Retrait du css sur input `appearance:none` +- bordure en background svg +- le toggle est maintenant placé dans un fieldset + +radio: +- Le contour devient bleu +- retrait du fond blanc du radio bouton (transparence) +- input déssiné en background image + +radio-rich: +- L'outline au focus englobe tout le radio-riche, plus l'input + +checkbox: +- Le contour devient bleu +- correction changement d'état au mouse-down (:active), maintenant au mouse up + +Form: +- les hint-text des champs désactivés passent en couleur `--text-disabled-grey` + + +#### ✨ feat(core): ouverture des disclosures à partir des ancres, état disabled désactive disclosure [(#532)](https://github.com/GouvernementFR/dsfr/pull/532) +- Correctif de l'état disabled sur les boutons associés à une modale, un onglet ou un accordéon. La fonctionnalité d'ouverture est désactivée si les boutons primaires sont désactivés. +- Ajout de la fonctionnalité d'ouverture d'une modale, d'un onglet ou d'un accordéon si la partie ancre de l'url correspond à l'id de l'élément -> les liens d'évitements peuvent ouvrir le menu et la recherche en mobile. + + +#### 🐛 fix(tab): écoute des événements de clavier déplacé sur la liste d'onglets [(#531)](https://github.com/GouvernementFR/dsfr/pull/531) +L'écoute des événements de clavier se faisant sur le composant, il est impossible d'interagir avec des éléments de formulaire dans le contenu de l'onglet -> l'écoute est déplacée au niveau de la liste des onglets, ce qui en exclut le contenu + + +#### ✨ feat(name): ajout bouton de suppression de prénom [(#493)](https://github.com/GouvernementFR/dsfr/pull/493) +Dans le modèle de de bloc nom/prénom, un bouton permet d'ajouter des champs de saisie pour les prénoms secondaires -> ajout d'un bouton permettant de supprimer ces champs ajoutés + + +#### ✨ feat(tile): Ajout icône flèche, état désactivé, icone lien externe, tuile de téléchargement [(#602)](https://github.com/GouvernementFR/dsfr/pull/602) +Les tuiles peuvent maintenant être de type téléchargement (comme les cartes) + - Les tuiles de téléchargement sont par défaut horizontales + - Le détail de la tuile de téléchargement est obligatoire et il peut être rempli automatiquement en fonction du fichier à télécharger en plaçant à l'attribut "data-fr-assess-file" sur le lien (comme pour carte) + +Les tuiles ont maintenant par défaut une icone. + - arrow-right (par défaut) + - external-link (en target="_blank") + - download (avec la classe fr-tile--download) + +Les tuiles désactivées (a sans href) ont à présent: + - la bordure bottom en grise + - l'icone et le titre en gris + +Ajout des classes "fr-tile--vertical@md" et "fr-tile--vertical@lg" pour passer une tuile horizontale, ou download, en vertical à partir des breakpoints md et lg + + +#### 🎉 feat(tile): évolution des tuiles [(#534)](https://github.com/GouvernementFR/dsfr/pull/534) +**Evolution majeur du composant Tuile :** +Nous souhaitons revoir la structure html de la tuile pour étendre les variations de contenu (avec détails, badge, etc), et uniformiser avec les comportements de la Carte (card). + +Changements apportés : +- Ajout d'un niveau d'encapsulation dans la structure html + - Ajout d'un wrapper "fr-tile__content" pour englober le contenu + - Ajout d'un wrapper "fr-tile__header" pour englober l'image +- L'image des tuiles est remplacée par un pictogramme + - La classe "fr-tile__img" devient "fr-tile__pictogram" + - Son contenu est maintenant un svg "fr-artwork" +- Ajout de la possibilité de placer un badge, un tag, un texte de détail, dans le contenu de la tuile +- Ajout d'une taille de tuile SM : "fr-tile--sm" + +**⚠️ Breaking Change** +Le snippet de code d'une tuile : +```html +<div class="fr-tile fr-enlarge-link"> + <div class="fr-tile__body"> + <h4 class="fr-tile__title"> + <a class="fr-tile__link" href>Titre M bold</a> + </h4> + <p class="fr-tile__desc">Texte M regular 2 lignes max</p> + </div> + <div class="fr-tile__img"> + <img class="fr-responsive-img" src="../../../example/img/placeholder.1x1.png" alt="" /> + <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance --> + </div> +</div> +``` + +Devient : +```html +<div class="fr-tile fr-enlarge-link" id="tile-6584"> + <div class="fr-tile__body"> + <div class="fr-tile__content"> + <h3 class="fr-tile__title"> + <a href="#">Intitulé de la tuile</a> + </h3> + <p class="fr-tile__desc">Lorem [...] elit ut.</p> + </div> + </div> + <div class="fr-tile__header"> + <div class="fr-tile__pictogram"> + <svg aria-hidden="true" class="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px"> + <use class="fr-artwork-decorative" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-decorative"></use> + <use class="fr-artwork-minor" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-minor"></use> + <use class="fr-artwork-major" href="../../../dist/artwork/pictograms/buildings/city-hall.svg#artwork-major"></use> + </svg> + </div> + </div> +</div> +``` + + +#### 🚚 refactor(download): séparation du download en carte et lien [(#487)](https://github.com/GouvernementFR/dsfr/pull/487) +Pour mutualiser les comportements de la carte et du lien au composant download, celui-ci doit devenir une variante de ces composants et non pas l'inverse. + +Retrait du composant : téléchargement de fichier - Download -> déprécié +Ajout de la variante de carte : fr-card--download +Ajout de la variante de lien : fr-link--download + +Le lien de téléchargement : +```html +<div class="fr-download"> + <h3> + <a href="[À MODIFIER - /example/img/image.jpg]" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet + <span class="fr-download__detail"> + JPG – 61,88 ko + </span> + </a> + </h3> +</div> +``` +DEVIENT : +```html +<a class="fr-link fr-link--download" download href="[À MODIFIER - example/img/image.jpg]"> + Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span> +</a> +``` + +et la carte de téléchargement : +```html +<div class="fr-download fr-enlarge-link fr-download--card"> + <h3> + <a href="[À MODIFIER - example/img/image.jpg]" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet + <span class="fr-download__detail"> + JPG – 61,88 ko + </span> + </a> + </h3> + <p class="fr-download__desc">Texte de description<</p> +</div> +``` +DEVIENT : +```html +<div class="fr-card fr-enlarge-link fr-card--download"> + <div class="fr-card__body"> + <div class="fr-card__content"> + <h3 class="fr-card__title"> + <a download href="[À MODIFIER - example/img/image.jpg]"> + Télécharger le document lorem ipsum sit dolores amet + </a> + </h3> + <p class="fr-card__desc">Texte de description</p> + <div class="fr-card__end"> + <p class="fr-card__detail">JPG – 61,88 ko</p> + </div> + </div> + </div> +</div> +``` + +BREAKING CHANGE : Remplacer le composant fr-download par la variante de link fr-link--download et remplacer le composant fr-download--card par une carte fr-card--download + + + + ## v1.9 -### [1.9.3](https://github.com/GouvernementFR/dsfr/compare/v1.9.2...1.9.3) - 17 Mai 2023 +### [v1.9.3](https://github.com/GouvernementFR/dsfr/compare/v1.9.2...v1.9.3) - 17 Mai 2023 #### 🐛 fix(breadcrumb): ajoute une page exemple alternative [(#600)](https://github.com/GouvernementFR/dsfr/pull/600) - étiquette d'élément span rendue possible sur l'élément courant du fil d'ariane diff --git a/package.json b/package.json index 1b5010c99..78001d537 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gouvfr/dsfr", - "version": "1.9.3", + "version": "1.10.0-rc.1", "description": "Système de Design de l'Etat - DSFR", "repository": "git@github.com:GouvernementFR/dsfr.git", "author": "Service d'Information du Gouvernement ", diff --git a/src/component/accordion/style/_module.scss b/src/component/accordion/style/_module.scss index 827563a2f..5e7d90aa5 100644 --- a/src/component/accordion/style/_module.scss +++ b/src/component/accordion/style/_module.scss @@ -30,7 +30,7 @@ text-align: left; @include margin(0); @include animate.caret(); - + @include after { @include margin-right(0); @include margin-left(auto); diff --git a/src/component/accordion/style/_scheme.scss b/src/component/accordion/style/_scheme.scss index 717e78d6c..d57dd1e97 100644 --- a/src/component/accordion/style/_scheme.scss +++ b/src/component/accordion/style/_scheme.scss @@ -13,6 +13,7 @@ &__btn { @include color.text(action-high blue-france, (legacy:$legacy)); + &[aria-expanded='true'] { @include color.background(open blue-france, (legacy: $legacy)); } diff --git a/src/component/radio/deprecated/style/_module.scss b/src/component/radio/deprecated/style/_module.scss index aee48a4da..f14263b0d 100644 --- a/src/component/radio/deprecated/style/_module.scss +++ b/src/component/radio/deprecated/style/_module.scss @@ -22,7 +22,6 @@ @include margin-top(2v); @include margin-bottom(4v); - &:last-child { @include margin-bottom(3v); } diff --git a/src/component/radio/main.scss b/src/component/radio/main.scss index 08ec8062e..26286601e 100644 --- a/src/component/radio/main.scss +++ b/src/component/radio/main.scss @@ -23,4 +23,4 @@ @import 'deprecated/style/module'; @import 'deprecated/style/scheme'; -@include _radio-scheme-deprecated; \ No newline at end of file +@include _radio-scheme-deprecated; diff --git a/src/component/transcription/style/_scheme.scss b/src/component/transcription/style/_scheme.scss index adbe2e83b..9bfc0c502 100644 --- a/src/component/transcription/style/_scheme.scss +++ b/src/component/transcription/style/_scheme.scss @@ -13,6 +13,7 @@ &__btn { @include color.text(action-high blue-france, (legacy:$legacy)); + &[aria-expanded='true'] { @include color.background(open blue-france, (legacy: $legacy)); } diff --git a/src/core/example/link/sample/library.ejs b/src/core/example/link/sample/library.ejs index 09f5f58dd..43df28ea8 100644 --- a/src/core/example/link/sample/library.ejs +++ b/src/core/example/link/sample/library.ejs @@ -1,44 +1,58 @@ <% const sample = getSample(include); %> - - - -<% - let classes = locals.classes || []; -%> - - -
> + + + +<% let classes = locals.classes || []; %> + +
+ >
- <%- include('../../../../component/toggle/template/ejs/toggle.ejs', {toggle: {state: true, checked: true, label: `Interupteur de la classe ${classes[0]}sur le wrapper`, id: classes[0]}}); %> + <%- include('../../../../component/toggle/template/ejs/toggle.ejs', {toggle: + {state: true, checked: true, label: `Interupteur de la classe + ${classes[0]}sur le wrapper`, id: + classes[0]}}); %>