From f2102c8d5f4a8f20472f471175464af87c4bbfff Mon Sep 17 00:00:00 2001 From: lab9 Date: Thu, 13 Jul 2023 13:08:20 +0200 Subject: [PATCH 01/23] =?UTF-8?q?=E2=9C=A8=20feat(colors):=20ajout=20des?= =?UTF-8?q?=20utilitaires=20de=20couleur=20flat=20[DS-3484](#693)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ajout des classes utilitaires pour le token background flat avec les variations de couleur d'accent --- module/color/variable/_decisions.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/module/color/variable/_decisions.scss b/module/color/variable/_decisions.scss index 381c9506c..89ebfdf0d 100644 --- a/module/color/variable/_decisions.scss +++ b/module/color/variable/_decisions.scss @@ -19,8 +19,8 @@ $values: ( ), flat: ( neutral: strongest, - /* primary: strong, - accent: strong,*/ + primary: strong, + accent: strong, system: strong, ), action-high: ( From 33461434b00b5c62118a8c9d99ca74d86fcf9f54 Mon Sep 17 00:00:00 2001 From: lab9 Date: Wed, 19 Jul 2023 15:01:08 +0200 Subject: [PATCH 02/23] =?UTF-8?q?=F0=9F=90=9B=20fix(core):=20correctif=20s?= =?UTF-8?q?ur=20KeyAction=20[DS-3488]=20(#696)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Corrige la régression sur l'écoute des interactions avec le clavier dû à l'évolution de la structure de la constante KeyCodes, non répercutée dans KeyAction --- src/core/script/api/modules/register/instance.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/core/script/api/modules/register/instance.js b/src/core/script/api/modules/register/instance.js index beeba6ba8..2c23a62fe 100644 --- a/src/core/script/api/modules/register/instance.js +++ b/src/core/script/api/modules/register/instance.js @@ -173,13 +173,13 @@ class Instance { for (const action of this._hashes) action.handle(hash, e); } - listenKey (code, closure, preventDefault = false, stopPropagation = false, type = 'down') { + listenKey (keyCode, closure, preventDefault = false, stopPropagation = false, type = 'down') { if (this._keyListenerTypes.indexOf(type) === -1) { this.listen(`key${type}`, this.handlingKey); this._keyListenerTypes.push(type); } - this._keys.push(new KeyAction(type, code, closure, preventDefault, stopPropagation)); + this._keys.push(new KeyAction(type, keyCode, closure, preventDefault, stopPropagation)); } unlistenKey (code, closure) { @@ -503,10 +503,10 @@ class Instance { } class KeyAction { - constructor (type, code, closure, preventDefault, stopPropagation) { + constructor (type, keyCode, closure, preventDefault, stopPropagation) { this.type = type; this.eventType = `key${type}`; - this.code = code; + this.keyCode = keyCode; this.closure = closure; this.preventDefault = preventDefault === true; this.stopPropagation = stopPropagation === true; @@ -514,7 +514,7 @@ class KeyAction { handle (e) { if (e.type !== this.eventType) return; - if (e.keyCode === this.code) { + if (e.keyCode === this.keyCode.value) { this.closure(e); if (this.preventDefault) { e.preventDefault(); From 5e884cafd6dcbbf569470283332c35f9c581f186 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 15:19:30 +0200 Subject: [PATCH 03/23] =?UTF-8?q?=F0=9F=90=9B=20fix(sidemenu):=20correctio?= =?UTF-8?q?n=20de=20la=20couleur=20des=20liens=20du=20sidemenu=20[DS-3493]?= =?UTF-8?q?=20(#698)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Effet de bord du passage du bouton mobile en bleu, l'ensemble des boutons du sidemenu est passé en bleu. - Ce correctif amène la spécificité nécessaire pour avoir les boutons et lien en `text default grey` --- src/component/sidemenu/style/_scheme.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/component/sidemenu/style/_scheme.scss b/src/component/sidemenu/style/_scheme.scss index 75c278b94..b6ead368e 100644 --- a/src/component/sidemenu/style/_scheme.scss +++ b/src/component/sidemenu/style/_scheme.scss @@ -28,6 +28,11 @@ } @include list-item { + #{ns(sidemenu__link)}, + #{ns(sidemenu__btn)} { + @include color.text(default grey, (legacy:$legacy)); + } + @include before { @include color.box-shadow(default grey, (legacy:$legacy), top-1-out bottom-1-in); } From 262fa7a74120f9e83dbe97362c07ea0aac345cbd Mon Sep 17 00:00:00 2001 From: lab9 Date: Wed, 19 Jul 2023 15:20:58 +0200 Subject: [PATCH 04/23] =?UTF-8?q?=F0=9F=90=9B=20fix(password):=20correctif?= =?UTF-8?q?=20accessibilit=C3=A9=20des=20messages=20[DS-3327]=20(#694)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ajout sur les messages de validation et d'erreur de la composition du mot de passe d'un statut en after uniquement pour les lecteurs d'écrans - BREAKING CHANGE : il est nécessaire d'ajouter les attributs `data-fr-valid`et `data-fr-error` avec les textes correspondants à l'état (respectivement, en français, "validé" et "en erreur" --- .../example/spa/agnostic/route.js.ejs | 2 -- src/component/form/style/module/_message.scss | 7 ++++++ .../form/template/ejs/fieldset/fieldset.ejs | 2 +- .../form/template/ejs/message/builder.js.ejs | 4 ++-- .../input/input-base/template/ejs/input.ejs | 2 +- .../example/sample/password-register.ejs | 24 ++++++++++++------- src/component/password/i18n/fr.yml | 4 +++- src/component/password/style/_module.scss | 14 +++++++++++ 8 files changed, 44 insertions(+), 15 deletions(-) diff --git a/src/analytics/example/spa/agnostic/route.js.ejs b/src/analytics/example/spa/agnostic/route.js.ejs index 480910d56..6e00f8195 100644 --- a/src/analytics/example/spa/agnostic/route.js.ejs +++ b/src/analytics/example/spa/agnostic/route.js.ejs @@ -41,8 +41,6 @@ const urlLocationHandler = async () => { let location = window.location.href.replace(HREF, ''); // get the url route - console.log('route', location); - // get the route object from the urlRoutes object const route = urlRoutes[location] || urlRoutes['404']; // get the html from the template diff --git a/src/component/form/style/module/_message.scss b/src/component/form/style/module/_message.scss index e6fe83579..6915ada95 100644 --- a/src/component/form/style/module/_message.scss +++ b/src/component/form/style/module/_message.scss @@ -1,10 +1,17 @@ #{ns(message)} { + --comma: ", "; + --content: var(--comma); @include display-flex(row, flex-start); @include text-style(xs); @include margin(0 0 1v 0); + @include after(var(--content)) { + @include sr-only(); + } + &:last-child { @include margin-bottom(0); + --comma: ". "; } &--error, diff --git a/src/component/form/template/ejs/fieldset/fieldset.ejs b/src/component/form/template/ejs/fieldset/fieldset.ejs index 317d13083..74c014992 100644 --- a/src/component/form/template/ejs/fieldset/fieldset.ejs +++ b/src/component/form/template/ejs/fieldset/fieldset.ejs @@ -87,7 +87,7 @@ if (fieldset.valid) { } if (fieldset.messages) { - fieldset.messages.forEach(message => builder.add(message.type, message.text)); + fieldset.messages.forEach(message => builder.add(message.type, message.text, message.attributes)); } if (builder.isIncluded) labelledBy.push(...builder.ids); diff --git a/src/component/form/template/ejs/message/builder.js.ejs b/src/component/form/template/ejs/message/builder.js.ejs index 7fbe52aca..937b30872 100644 --- a/src/component/form/template/ejs/message/builder.js.ejs +++ b/src/component/form/template/ejs/message/builder.js.ejs @@ -34,7 +34,7 @@ class MessageBuilder { return this._ids; } - add (type, data) { + add (type, data, attributes) { this.appends[type]++; const append = this.appends[type] > 0 ? '-' + this.appends[type] : ''; const typedId = type ? `-${type}` : ''; @@ -42,7 +42,7 @@ class MessageBuilder { switch (typeof data) { case 'string': // this._ids.push(id); - this.messages.push({ type: type, id: id, text: data }); + this.messages.push({ type: type, id: id, text: data, attributes: attributes }); break; case 'object': diff --git a/src/component/input/input-base/template/ejs/input.ejs b/src/component/input/input-base/template/ejs/input.ejs index e8540606c..a576f9586 100644 --- a/src/component/input/input-base/template/ejs/input.ejs +++ b/src/component/input/input-base/template/ejs/input.ejs @@ -76,7 +76,7 @@ if (input.error) { } if (input.messages) { - input.messages.forEach(message => builder.add(message.type, message.text)); + input.messages.forEach(message => builder.add(message.type, message.text, message.attributes)); } if (builder.isIncluded) describedby.push(...builder.ids); diff --git a/src/component/password/example/sample/password-register.ejs b/src/component/password/example/sample/password-register.ejs index 5bb3ae63a..fe682c21e 100755 --- a/src/component/password/example/sample/password-register.ejs +++ b/src/component/password/example/sample/password-register.ejs @@ -1,7 +1,20 @@ <% -let password = locals.password || {}; +const password = locals.password || {}; -let data = { +const messages = password.messages || [ + { text: getText('format.label', 'password') }, + { text: getText('format.characters', 'password'), type: 'info' }, + { text: getText('format.special', 'password'), type: 'info' }, + { text: getText('format.digit', 'password'), type: 'info' } +]; + +const msgAttributes = {}; +msgAttributes[`data-${prefix}-valid`] = getText('format.valid', 'password'); +msgAttributes[`data-${prefix}-error`] = getText('format.error', 'password'); + +messages.filter(message => message.type !== undefined).forEach(message => { message.attributes = msgAttributes; }); + +const data = { id: uniqueId('password'), ...password, input: { @@ -11,12 +24,7 @@ let data = { }, checkbox: password.checkbox || {}, link: false, - messages: password.messages || [ - { text: getText('format.label', 'password') }, - { text: getText('format.characters', 'password'), type: 'info'}, - { text: getText('format.special', 'password'), type: 'info'}, - { text: getText('format.digit', 'password'), type: 'info'} - ], + messages: messages } %> diff --git a/src/component/password/i18n/fr.yml b/src/component/password/i18n/fr.yml index 503238879..910d278c9 100644 --- a/src/component/password/i18n/fr.yml +++ b/src/component/password/i18n/fr.yml @@ -17,6 +17,8 @@ format: digit: 1 chiffre minimum special: 1 caractère spécial minimum characters: 12 caractères minimum + valid: validé + error: en erreur link: label: Mot de passe oublié ? - href: url de la page de récupération \ No newline at end of file + href: url de la page de récupération diff --git a/src/component/password/style/_module.scss b/src/component/password/style/_module.scss index 399097ef8..fbc52d0dd 100644 --- a/src/component/password/style/_module.scss +++ b/src/component/password/style/_module.scss @@ -39,4 +39,18 @@ &__label { @include padding-right(24v); } + + #{ns(message)} { + &:first-child { + --comma: " "; + } + } + + #{ns(message--valid)}#{ns-attr(valid)} { + --content: "\00a0-\00a0" attr(#{ns-attr(valid, null, true)}) var(--comma); + } + + #{ns(message--error)}#{ns-attr(error)} { + --content: "\00a0-\00a0" attr(#{ns-attr(error, null, true)}) var(--comma); + } } From 4acb5adb98de3d8a4e0021322f35194ef87e9fcf Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 15:23:52 +0200 Subject: [PATCH 05/23] =?UTF-8?q?=F0=9F=90=9B=20fix(header):=20correctif?= =?UTF-8?q?=20r=C3=A9gression=20scroll=20horizontal=20[DS-3514]=20(#697)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - La navigation du header créée un scroll horizontal dans la page - l'ajout d'un max-width prévient le problème --- src/component/header/style/module/_nav.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/header/style/module/_nav.scss b/src/component/header/style/module/_nav.scss index 4d3bc7f21..4cb6fd1fc 100644 --- a/src/component/header/style/module/_nav.scss +++ b/src/component/header/style/module/_nav.scss @@ -10,6 +10,7 @@ &__list { @include margin(0 -4v); + @include max-width(calc(100% + 4v)); } } } From 4621d3b8df1f9b0eb6b102b39c9c6c03684b7c29 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 15:29:44 +0200 Subject: [PATCH 06/23] =?UTF-8?q?=F0=9F=90=9B=20fix(modal):=20pr=C3=A9vien?= =?UTF-8?q?s=20d=C3=A9calage=20mobile=20[DS-3495]=20(#699)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - l'ajout d'un padding à l'ouverture permet de se substituer au décalage créé potentiellement par la disparition de la scrollbar en desktop - En mobile, la modale occupe 100% de la largeur, ce padding créé un espacement incorrect - ajout d'une media query sur le breakpoint MD pour corriger le problème --- src/component/modal/style/_module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/modal/style/_module.scss b/src/component/modal/style/_module.scss index 45251c8df..61af5aa9f 100644 --- a/src/component/modal/style/_module.scss +++ b/src/component/modal/style/_module.scss @@ -21,7 +21,7 @@ @include margin(0); @include display-flex(column, stretch, space-between); @include fixed(0, 0, 0, 0, 100%, 100%); - @include padding-right(var(--scrollbar-width)); + @include padding-right(var(--scrollbar-width), md); // transition in/out transition: opacity 0.3s, visibility 0.3s; From 84646e0eb012a1ad3ba8b96f9ee841fd491d429a Mon Sep 17 00:00:00 2001 From: cypri3 <61988545+cypri3@users.noreply.github.com> Date: Wed, 19 Jul 2023 15:43:58 +0200 Subject: [PATCH 07/23] =?UTF-8?q?=F0=9F=90=9B=20fix(*):=20mise=20=C3=A0=20?= =?UTF-8?q?jour=20des=20liens=20du=20readme=20(#700)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Mise à jour des liens vers [https://www.systeme-de-design.gouv.fr](https://www.systeme-de-design.gouv.fr) dans le readme --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1194dd7d0..0d8519da6 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ Le fichier `utilities.min.css` doit être placé un niveau plus bas que le dossi Le point de départ de l’utilisation du DSFR est la création de fichiers HTML, afin de pouvoir utiliser les différents composants. Ces fichiers sont à mettre à la racine de votre projet. L’exemple ci dessous est le code minimal afin de pouvoir utiliser le DSFR. L’ajout de l’attribut **data-fr-scheme** sur la balise html permet d’activer la gestion des thèmes clair et sombre. Les valeurs possibles sont `system`, `light`, `dark`. La valeur “system” permet d’utiliser la configuration définie sur le système d’exploitation de l’utilisateur. -Consulter la [documentation des paramètres d’affichage](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage) afin d’en savoir plus. +Consulter la [documentation des paramètres d’affichage](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametre-d-affichage) afin d’en savoir plus. ```html @@ -156,7 +156,7 @@ Il est **impératif** d’appeler les **deux fichiers** javascript afin que le c ``` -> NB : Le package analytics est géré indépendament et doit être ajouté après le js du dsfr. Voir [documention analytics](https://github.com/GouvernementFR/dsfr/blob/main/doc/Analytics-1.9.0.pdf) +> NB : Le package analytics est géré indépendament et doit être ajouté après le js du dsfr. Voir [documention analytics](https://github.com/GouvernementFR/dsfr/blob/main/src/analytics/doc/analytics.md) De la même façon que le CSS il est possible d’importer uniquement le JS des composants utilisés (et leurs dépendances). ### Icônes @@ -192,4 +192,4 @@ Le processus de contribution est détaillé sur la [page CONTRIBUTING.md](CONTRI ## Documentation -[Documentation développeurs](https://www.systeme-de-design.gouv.fr/comment-utiliser-le-dsfr/developpeurs) +[Documentation développeurs](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/developpeurs/) From 0bc7366e0fab78c3aed9943db12c10b7dc7e631f Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 16:18:06 +0200 Subject: [PATCH 08/23] =?UTF-8?q?=F0=9F=90=9B=20fix(download):=20graisse?= =?UTF-8?q?=20du=20titre=20des=20liens=20[DS-3518]=20(#701)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Passage des liens dépréciés en graisse regular --- src/component/download/deprecated/style/module/_download.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/component/download/deprecated/style/module/_download.scss b/src/component/download/deprecated/style/module/_download.scss index b9bc35cbb..f4631d6b9 100644 --- a/src/component/download/deprecated/style/module/_download.scss +++ b/src/component/download/deprecated/style/module/_download.scss @@ -12,7 +12,9 @@ @include padding-bottom(6v); @include margin(0 0 4v 0); - @include nest-download-link; + @include nest-download-link { + @include font-weight(regular); + } &__desc { @include text-style(sm); From f9e313badc53b93bed8242ee0f467a6b80cd763c Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 16:44:35 +0200 Subject: [PATCH 09/23] =?UTF-8?q?=F0=9F=90=9B=20fix(link):=20correctif=20t?= =?UTF-8?q?=C3=A9l=C3=A9chargement=20multiligne=20[DS-3509]=20(#702)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - les liens de téléchargement étaient limités à une seul ligne avec une ellipse sur le text dépassant - correctif prenant en compte le retour à la ligne --- src/component/link/style/module/_download.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/component/link/style/module/_download.scss b/src/component/link/style/module/_download.scss index 6908fe4d0..248fd2a0a 100644 --- a/src/component/link/style/module/_download.scss +++ b/src/component/link/style/module/_download.scss @@ -13,15 +13,12 @@ } #{ns(link__detail)} { - @include absolute(7v, null, null, 0); + @include absolute(calc(100% + 1v), null, null, 0); @include text-style(xs); @include font-weight(regular); - max-width: 100%; white-space: nowrap; pointer-events: none; cursor: text; - overflow: hidden; - text-overflow: ellipsis; abbr { text-decoration: none; From 2d0e6d850012baa1b61788be0ca780168e630c45 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 16:48:43 +0200 Subject: [PATCH 10/23] =?UTF-8?q?=F0=9F=90=9B=20=20fix(toggle):=20retrait?= =?UTF-8?q?=20tap-highlight-color=20iOS=20[DS-3502]=20(#703)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Au clic sur le toggle sur iOS, l'effet de highlight est présent - Retrait de cet effet avec la propriété [-webkit-tap-highlight-color](https://developer.mozilla.org/fr/docs/Web/CSS/-webkit-tap-highlight-color) --- src/component/toggle/style/module/_default.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/component/toggle/style/module/_default.scss b/src/component/toggle/style/module/_default.scss index d68150b61..4e6bd8262 100644 --- a/src/component/toggle/style/module/_default.scss +++ b/src/component/toggle/style/module/_default.scss @@ -17,6 +17,7 @@ @include size(10v, 6v); @include absolute; opacity: 0; + -webkit-tap-highlight-color: transparent; &:checked { ~ #{ns(toggle__label)} { @@ -38,6 +39,7 @@ width: spacing.space(calc(100% - 10v)); min-height: spacing.space(6v); @include text-style(md); + -webkit-tap-highlight-color: transparent; &#{ns-attr(unchecked-label)}#{ns-attr(checked-label)} { @include padding-left(0); From dd516911fcde2e5e508a8ea011c4a4902c0aec8a Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 17:30:18 +0200 Subject: [PATCH 11/23] =?UTF-8?q?=F0=9F=90=9B=20fix(card,=20tile):=20corre?= =?UTF-8?q?ctif=20IE=2011=20[DS-3515]=20(#705)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - correctif sur les tuiles et card sur la version legacy pour éviter les bugs de dépassement de texte et placement des icônes --- src/component/card/style/_legacy.scss | 72 +++++++++++++++++-- src/component/tile/style/_legacy.scss | 68 +++++++++++++++++- src/component/tile/style/module/_default.scss | 19 ++--- .../tile/style/module/_download.scss | 2 +- 4 files changed, 140 insertions(+), 21 deletions(-) diff --git a/src/component/card/style/_legacy.scss b/src/component/card/style/_legacy.scss index 809904471..736b36030 100644 --- a/src/component/card/style/_legacy.scss +++ b/src/component/card/style/_legacy.scss @@ -7,10 +7,8 @@ @include legacy.is(ie11) { #{ns(card)} { - @include icon-legacy(arrow-right-line, md, before); - &--no-icon { - @include before(none); + @include after(none); } &__title, @@ -19,8 +17,14 @@ } &__title { + a { + @include icon-legacy(arrow-right-line, sm, after) { + background-color: transparent; + } + } + @include target-blank { - @include icon-size-legacy(md, after); + @include icon-legacy(external-link-line, sm, after); } } @@ -28,8 +32,64 @@ @include icon-size-legacy(sm, before); } - &--horizontal &__body { - flex-basis: 100%; + &--download { + #{ns(tile__title a)} { + @include icon-legacy(download-line, null, after); + } + } + + &#{ns(enlarge-link)} { + #{ns(card)}__title { + a { + text-decoration: none; + @include icon-size-legacy(md, after) { + background-color: transparent; + } + } + } + } + + @include respond-from(md) { + &--download, + &--horizontal, + &--horizontal-half, + &--horizontal-tier { + #{ns(card__body)} { + flex-basis: 100%; + } + } + } + } + + #{ns(card--sm)} { + &#{ns(enlarge-link)} { + #{ns(card)}__title { + a { + @include icon-size-legacy(sm, after); + } + } + } + + #{ns(card)}__title { + a { + @include icon-size-legacy(sm, after); + } + } + } + + #{ns(card--lg)} { + &#{ns(enlarge-link)} { + #{ns(card)}__title { + a { + @include icon-size-legacy(lg, after); + } + } + } + + #{ns(card)}__title { + a { + @include icon-size-legacy(md, after); + } } } } diff --git a/src/component/tile/style/_legacy.scss b/src/component/tile/style/_legacy.scss index cd2e17df5..1739c29e2 100644 --- a/src/component/tile/style/_legacy.scss +++ b/src/component/tile/style/_legacy.scss @@ -4,23 +4,87 @@ //// @use 'module/legacy'; +@use 'module/media-query'; @include legacy.is(ie11) { /** * Correctif de la largeur du texte dans la tuile */ #{ns(tile)} { - &__body, - &__body > * { + &--download, &--horizontal { + #{ns(tile)}__body { + flex-basis: 100%; + } + + &#{ns(tile--vertical\@md)} { + @include media-query.respond-from(md) { + #{ns(tile)}__body { + flex-basis: auto; + } + } + } + + &#{ns(tile--vertical\@lg)} { + @include media-query.respond-from(lg) { + #{ns(tile)}__body { + flex-basis: auto; + } + } + } + } + + &__body, &__body > * { max-width: 100%; } &__title { @include margin(0 0 2v); + max-width: 100%; + + a { + @include icon-legacy(arrow-right-line, sm, after); + } + + @include target-blank { + @include icon-legacy(external-link-line, sm, after); + } } &__desc { @include margin(0); + max-width: 100%; + } + + &__start, &__detail { + max-width: 100%; + } + + &--download { + #{ns(tile__title a)} { + @include icon-legacy(download-line, null, after); + } + } + + &#{ns(enlarge-link)} { + #{ns(tile)}__title { + a { + text-decoration: none; + + @include icon-size-legacy(md, after) { + background-color: transparent; + } + } + } + } + } + + #{ns(tile--sm)} { + #{ns(tile)} { + &__title { + a { + @include icon-size-legacy(sm, after); + } + } } } } diff --git a/src/component/tile/style/module/_default.scss b/src/component/tile/style/module/_default.scss index 526cf87dd..c7d66b301 100644 --- a/src/component/tile/style/module/_default.scss +++ b/src/component/tile/style/module/_default.scss @@ -53,11 +53,17 @@ &#{ns(enlarge-link)} { #{ns(tile)}__title { a { - @include icon-size(md, after) { + @include icon(arrow-right-line, md, after) { @include absolute(null, 8v, 9v); } } } + + &#{ns(tile--no-icon)} { + #{ns(tile__title a)} { + @include after(none); + } + } } @include title { @@ -75,8 +81,6 @@ } a { - @include icon(arrow-right-line, sm, after); - @include before { background-position: 0 100%; background-size: 100% spacing.space(1v); @@ -89,15 +93,6 @@ } } - &--no-icon, - &:not(#{ns(enlarge-link)}):not(#{ns(tile--download)}) { - #{ns(tile__title a)} { - &:not([target="_blank"]) { - @include after(none); - } - } - } - &__desc { @include text-style(md); flex: 1 1 auto; diff --git a/src/component/tile/style/module/_download.scss b/src/component/tile/style/module/_download.scss index 2a8475411..0afac3a41 100644 --- a/src/component/tile/style/module/_download.scss +++ b/src/component/tile/style/module/_download.scss @@ -3,7 +3,7 @@ /// @group tile //// -#{ns(tile--download)} { +#{ns(tile)}#{ns(tile--download)} { #{ns(tile__title a)} { @include icon(download-line, null, after); } From b83e9101e156305335fa712401dde41726aa1fa7 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 17:35:38 +0200 Subject: [PATCH 12/23] =?UTF-8?q?=E2=9C=A8=20feat(*):=20Ajout=20d'un=20met?= =?UTF-8?q?a=20tag=20iOS=20[DS-3507]=20(#707)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Sur iOS, les numéros de téléphone sont automatiquement transformés en lien - Entraîne un mauvais rendu dans le bloc fonctionnel de numéro de téléphone - Correction par l'ajout général du meta tag `` --- README.md | 6 ++++-- tool/example/example.ejs | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0d8519da6..2d6d891bb 100644 --- a/README.md +++ b/README.md @@ -94,8 +94,7 @@ Consulter la [documentation des paramètres d’affichage](https://www.systeme-d - - + @@ -104,6 +103,9 @@ Consulter la [documentation des paramètres d’affichage](https://www.systeme-d + + + Titre de la page - Nom du site diff --git a/tool/example/example.ejs b/tool/example/example.ejs index 1f7d3a4ab..8e443000c 100644 --- a/tool/example/example.ejs +++ b/tool/example/example.ejs @@ -4,7 +4,8 @@ - <%= title %> - Design System + + <%= title %> - Système de design <%- include('../../src/core/template/ejs/favicon/favicon.ejs', {favicon: {path: `${relativeRoot}dist/favicon/`}}); %> From eda62477458c18d3fc6faa48c08dfd9cc49cde05 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 17:38:24 +0200 Subject: [PATCH 13/23] =?UTF-8?q?=F0=9F=90=9B=20fix(transcription,=20conte?= =?UTF-8?q?nt):=20correctif=20title=20et=20label=20bouton=20Agrandir=20[DS?= =?UTF-8?q?-3512,=20DS-3501]=20(#708)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Retrait du title sur le bouton agrandir - Ajout label agrandir dans les exemples de content --- src/component/content/example/sample/media-default.ejs | 4 +++- src/component/transcription/template/ejs/transcription.ejs | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/component/content/example/sample/media-default.ejs b/src/component/content/example/sample/media-default.ejs index e9edeab98..f27a79204 100644 --- a/src/component/content/example/sample/media-default.ejs +++ b/src/component/content/example/sample/media-default.ejs @@ -5,7 +5,9 @@ content.id = content.id || uniqueId('media'); if (content.transcription === true) content.transcription = { id: uniqueId('transcription'), title: getText('modal.title', 'transcription'), - content: randomContent(['text', 'list']) + content: randomContent(['text', 'list']), + fullscreen: getText('button.fullscreen', 'transcription'), + fullscreenAriaLabel: getText('button.fullscreenAriaLabel', 'transcription'), }; %> diff --git a/src/component/transcription/template/ejs/transcription.ejs b/src/component/transcription/template/ejs/transcription.ejs index 765cf9c36..38230110a 100644 --- a/src/component/transcription/template/ejs/transcription.ejs +++ b/src/component/transcription/template/ejs/transcription.ejs @@ -41,7 +41,7 @@ let collapseId = prefix + '-transcription-collapse-' + transcription.id;
<%- include('../../../modal/template/ejs/modal.ejs', {modal: { ...modal, id: modalId }}) %> From bc00736195e9904ee79b1e98736ea7e415f6a925 Mon Sep 17 00:00:00 2001 From: "Baptiste.z" Date: Wed, 19 Jul 2023 17:42:27 +0200 Subject: [PATCH 14/23] =?UTF-8?q?=F0=9F=90=9B=20fix(tile,=20card):=20A11Y?= =?UTF-8?q?=20liens=20d=C3=A9sactiv=C3=A9s=20[DS-3511]=20(#709)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ajout des attributs `role="link"` et `aria-disabled=true` sur les version désactivées --- src/component/card/template/ejs/content.ejs | 7 ++++++- src/component/tile/template/ejs/content.ejs | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/component/card/template/ejs/content.ejs b/src/component/card/template/ejs/content.ejs index 9fd908ef7..fbc5a01da 100644 --- a/src/component/card/template/ejs/content.ejs +++ b/src/component/card/template/ejs/content.ejs @@ -43,7 +43,12 @@ if (content.assess === true) { } else if (typeof(content.assess) === 'string') { attributes[`data-${prefix}-assess-file`] = content.assess; } -if (content.disabled !== true) attributes.href = href; +if (content.disabled !== true) { + attributes.href = href; +} else { + attributes.role = 'link'; + attributes['aria-disabled'] = true; +} if (content.lang) attributes.hreflang = content.lang; if (content.downloadable === true) attributes.download = ''; if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable; diff --git a/src/component/tile/template/ejs/content.ejs b/src/component/tile/template/ejs/content.ejs index e03ab9e00..2681c8bbb 100644 --- a/src/component/tile/template/ejs/content.ejs +++ b/src/component/tile/template/ejs/content.ejs @@ -39,7 +39,12 @@ if (content.assess === true) { } else if (typeof(content.assess) === 'string') { attributes[`data-${prefix}-assess-file`] = content.assess; } -if (content.disabled !== true) attributes.href = href; +if (content.disabled !== true) { + attributes.href = href; +} else { + attributes.role = 'link'; + attributes['aria-disabled'] = true; +} if (content.lang) attributes.hreflang = content.lang; if (content.downloadable === true) attributes.download = ''; if (typeof(content.downloadable) === 'string') attributes.download = content.downloadable; From 69885babca19d1631bc83af3f9ff50577bb40c57 Mon Sep 17 00:00:00 2001 From: "Baptiste.z" Date: Wed, 19 Jul 2023 17:46:02 +0200 Subject: [PATCH 15/23] =?UTF-8?q?=F0=9F=90=9B=20fix(tile):=20correctif=20e?= =?UTF-8?q?spacements=20version=20d=C3=A9preci=C3=A9e=20[DS-3508]=20(#704)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - L'icône et le contenu se retrouvent superposés dans la version dépréciée, ce correctif rétablit l'espacement nécessaire --- src/component/tile/deprecated/style/_module.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/component/tile/deprecated/style/_module.scss b/src/component/tile/deprecated/style/_module.scss index d087a5a03..a72d6f499 100644 --- a/src/component/tile/deprecated/style/_module.scss +++ b/src/component/tile/deprecated/style/_module.scss @@ -14,6 +14,10 @@ } } + &__body > &__desc { + @include padding-bottom(10v); + } + &--horizontal { #{ns(tile__img)} { @include size(12v, 12v); From 5c1c0181ae18d426d927ee8ee855645f2e1a9e92 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 17:59:29 +0200 Subject: [PATCH 16/23] =?UTF-8?q?=F0=9F=93=9D=20doc(tooltip):=20retrait=20?= =?UTF-8?q?exemple=20texte=20[DS-3514]=20(#710)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - l'utilisation d'un tooltip sur un texte pose des problèmes de restitution - cet usage est déconseillé - retrait de l'exemple --- src/component/tooltip/example/index.ejs | 2 -- .../tooltip/example/sample/tooltip-text.ejs | 16 ---------------- 2 files changed, 18 deletions(-) delete mode 100644 src/component/tooltip/example/sample/tooltip-text.ejs diff --git a/src/component/tooltip/example/index.ejs b/src/component/tooltip/example/index.ejs index 22407897f..118519764 100755 --- a/src/component/tooltip/example/index.ejs +++ b/src/component/tooltip/example/index.ejs @@ -8,8 +8,6 @@ <%- sample(getText('sample.grid.right', 'tooltip'), './sample/tooltip-grid.ejs', {tooltip: {position: 'right'}}, true); %> -<%- sample(getText('sample.text', 'tooltip'), './sample/tooltip-text.ejs', {}, true); %> - <%- sample(getText('sample.list', 'tooltip'), './sample/tooltip-list.ejs', {}, true); %> <%- sample(getText('sample.table', 'tooltip'), './sample/tooltip-table.ejs', {}, true); %> diff --git a/src/component/tooltip/example/sample/tooltip-text.ejs b/src/component/tooltip/example/sample/tooltip-text.ejs deleted file mode 100644 index 6935f722f..000000000 --- a/src/component/tooltip/example/sample/tooltip-text.ejs +++ /dev/null @@ -1,16 +0,0 @@ -<% eval(include('../../../../core/index.ejs')); %> - -<% -let tooltip = locals.tooltip || {}; -let tooltipId = uniqueId('tooltip'); -let data = { - id: tooltipId, - content: lorem(), - ...tooltip -}; -let triggerText = tooltip.triggerText || getText('sample.example', 'tooltip'); -let tooltipTarget = `${triggerText}`; -let paragraphInsert = tooltipTarget + include('../sample/tooltip-default', {tooltip: data}); -%> - -<%- include('../../../../core/template/ejs/typography/paragraph', {paragraph: {content: lorem(paragraphInsert)} }); %> From 8c12277a979cabeaa3cb639c3d73eefde1bb6e8c Mon Sep 17 00:00:00 2001 From: lab9 Date: Wed, 19 Jul 2023 18:10:35 +0200 Subject: [PATCH 17/23] =?UTF-8?q?=F0=9F=90=9B=20fix(core):=20stabilisation?= =?UTF-8?q?=20disclosure=20[DS-3519]=20(#713)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - L'ouverture des paramètres d'affichage est par moment non réactive - L'élément est fermé avant même d'être ouvert à cause de boucle de déclenchement - Ajout de condition permettant de limiter les boucles --- src/core/script/disclosure/disclosures-group.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/core/script/disclosure/disclosures-group.js b/src/core/script/disclosure/disclosures-group.js index f86966b80..8282d532f 100644 --- a/src/core/script/disclosure/disclosures-group.js +++ b/src/core/script/disclosure/disclosures-group.js @@ -112,8 +112,9 @@ class DisclosuresGroup extends Instance { this._index = undefined; let index = defaultIndex; for (let i = 0; i < this.length; i++) { - if (index !== -1 && this.members[i].isDisclosed) { + if (this.members[i].isDisclosed) { index = i; + break; } } @@ -131,9 +132,9 @@ class DisclosuresGroup extends Instance { for (let i = 0; i < this.length; i++) { const member = this.members[i]; if (value === i) { - member.disclose(true); + if (!member.isDisclosed) member.disclose(true); } else { - member.conceal(true); + if (member.isDisclosed) member.conceal(true); } } this.apply(); From 20eac9b4ff95bb8e4a94635e4a0824f489c13da3 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 18:25:03 +0200 Subject: [PATCH 18/23] =?UTF-8?q?=E2=9C=A8=20feat(core,=20password):=20bou?= =?UTF-8?q?tons=20sp=C3=A9ciaux=20input=20Safari=20[DS-3510]=20(#711)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Dans les champs de type password, sur safari Mac, il y a une icône apportant des outils supplémentaire qui se superpose à l’icône des signalant la hauteur de casse - Déplacement des icônes natives pour qu'elles ne se superposent pas - Retrait de l'icône capslock native, privilégiant la nôtre --- src/component/password/style/_module.scss | 16 +++++++--------- src/component/password/style/_scheme.scss | 2 +- src/core/style/action/module/_input.scss | 9 +++++++++ 3 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/component/password/style/_module.scss b/src/component/password/style/_module.scss index fbc52d0dd..16453816a 100644 --- a/src/component/password/style/_module.scss +++ b/src/component/password/style/_module.scss @@ -8,22 +8,20 @@ @include set-text-margin(0 0 2v 0); #{ns-attr(capslock)} { + #{ns(password__input)} { + @include padding-right(12v); + } + @include before('', block) { - @include absolute(3v, 3v, null, null, 4v, 4v); + @include absolute(3v, 4v, null, null, 4v, 4v); pointer-events: none; } } - - :not(#{ns-attr(capslock)}) { - #{ns(password__input)} { - @include padding-right(4v); - } - } - + &__checkbox { @include absolute(0, 0); } - + &__input { @include margin-bottom(3v); diff --git a/src/component/password/style/_scheme.scss b/src/component/password/style/_scheme.scss index 668a92770..1f098a48b 100644 --- a/src/component/password/style/_scheme.scss +++ b/src/component/password/style/_scheme.scss @@ -14,7 +14,7 @@ #{selector.ns-attr(capslock)} { @include before { - @include color.data-uri-svg(default grey, (legacy: $legacy), $capslock-svg); + @include color.data-uri-svg(label grey, (legacy: $legacy), $capslock-svg); } } diff --git a/src/core/style/action/module/_input.scss b/src/core/style/action/module/_input.scss index e52a76304..e52c4aefb 100644 --- a/src/core/style/action/module/_input.scss +++ b/src/core/style/action/module/_input.scss @@ -4,6 +4,7 @@ //// @use 'module/reset'; +@use 'module/spacing'; input, select, @@ -27,3 +28,11 @@ input[type="checkbox"], input[type="radio"] { @include reset.appearance; } + +input::-webkit-contacts-auto-fill-button, +input::-webkit-credentials-auto-fill-button { + @include margin-left(4v); + @include margin-right(-1px); + @include size(5v, 5v); + mask-size: #{spacing.space(5v 5v)}; +} From c4caf742b31e1cac6b8038da47a57a9aba95e2fa Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 18:31:29 +0200 Subject: [PATCH 19/23] =?UTF-8?q?=F0=9F=90=9B=20fix(follow):=20orthographe?= =?UTF-8?q?=20message=20de=20confirmation=20[DS-3492]=20(#714)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/follow/example/data/newsletter-alert.json.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/follow/example/data/newsletter-alert.json.ejs b/src/component/follow/example/data/newsletter-alert.json.ejs index 0010e0212..99f003deb 100644 --- a/src/component/follow/example/data/newsletter-alert.json.ejs +++ b/src/component/follow/example/data/newsletter-alert.json.ejs @@ -6,7 +6,7 @@ data.newsletter = { alert: { id: uniqueId("newsletter-alert"), type: "success", - text: "Votre inscription à bien été prise en compte" + text: "Votre inscription a bien été prise en compte." } } %> From 8353930eaadfffa1a79510fb6b6dc0f4980f9646 Mon Sep 17 00:00:00 2001 From: Keryan SANIE Date: Wed, 19 Jul 2023 18:35:41 +0200 Subject: [PATCH 20/23] =?UTF-8?q?=F0=9F=90=9B=20fix(form):=20correctif=20f?= =?UTF-8?q?ocus=20des=20radios=20riches=20d=C3=A9pr=C3=A9ci=C3=A9s=20[DS-3?= =?UTF-8?q?489]=20(#715)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - corrige le décalage du focus sur les boutons radio en version dépréciée --- src/component/form/deprecated/style/_module.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/component/form/deprecated/style/_module.scss b/src/component/form/deprecated/style/_module.scss index 1ec8b86b9..5aba65557 100644 --- a/src/component/form/deprecated/style/_module.scss +++ b/src/component/form/deprecated/style/_module.scss @@ -69,10 +69,13 @@ label { @include padding(3v 0); + } + } - &::before { - @include margin-top(3v); - } + #{ns-group(radio)}:not(#{ns(radio-rich)}) input[type="radio"] + label, + #{ns-group(checkbox)} input[type="checkbox"] + label { + &::before { + top: #{space(3v)}; } } From 4ba332afe092c0b26e9fa67027904b442bf05ca4 Mon Sep 17 00:00:00 2001 From: lab9 Date: Wed, 19 Jul 2023 18:36:45 +0200 Subject: [PATCH 21/23] =?UTF-8?q?=F0=9F=90=9B=20fix(modal):=20retour=20de?= =?UTF-8?q?=20focus=20fermeture=20clavier=20[DS-3513]=20(#716)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Mise en place du retour du focus à la fermeture en pressant la touche ESC --- src/component/modal/script/modal/modal.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/component/modal/script/modal/modal.js b/src/component/modal/script/modal/modal.js index fe5f75fef..ef0e5cb2b 100644 --- a/src/component/modal/script/modal/modal.js +++ b/src/component/modal/script/modal/modal.js @@ -45,7 +45,10 @@ class Modal extends api.core.Disclosure { break; default: - this.conceal(); + if (this.isDisclosed) { + this.conceal(); + this.focus(); + } } } From 242d6ab41ef0dd3df49c685e66013c4d81a596cd Mon Sep 17 00:00:00 2001 From: "Baptiste.z" Date: Wed, 19 Jul 2023 18:39:51 +0200 Subject: [PATCH 22/23] =?UTF-8?q?=F0=9F=90=9B=20fix(form):=20correctif=20b?= =?UTF-8?q?arre=20=C3=A9tat=20iOS=20[DS-3505]=20(#712)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Sur iOS, la barre d'état d'erreur ou validation est discontinue - corrige le problème de manière générique --- src/component/form/deprecated/style/_module.scss | 1 + src/component/form/style/module/_fieldset.scss | 12 ++++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/component/form/deprecated/style/_module.scss b/src/component/form/deprecated/style/_module.scss index 5aba65557..94b55ec4c 100644 --- a/src/component/form/deprecated/style/_module.scss +++ b/src/component/form/deprecated/style/_module.scss @@ -84,6 +84,7 @@ & + #{ns(info-text)} { @include margin-top(0); @include margin-left(2v); + @include margin-bottom(4v); } } } diff --git a/src/component/form/style/module/_fieldset.scss b/src/component/form/style/module/_fieldset.scss index b1b35f92b..e9f0e648a 100644 --- a/src/component/form/style/module/_fieldset.scss +++ b/src/component/form/style/module/_fieldset.scss @@ -8,7 +8,7 @@ border: 0; &__legend { - @include margin-bottom(4v); + @include padding-bottom(4v); @include padding-x(3v); @include margin-x(-1v); @include text-style(md); @@ -26,10 +26,14 @@ } &--valid, - &--valid &__legend, &--error, + &--info { + background-repeat: no-repeat; + background-position: 0 spacing.space(-9v); + } + + &--valid &__legend, &--error &__legend, - &--info, &--info &__legend { background-repeat: no-repeat; background-position: 0 0; @@ -38,7 +42,7 @@ &--valid, &--error, &--info { - background-size: spacing.space(2px calc(100% - (4v))); + background-size: spacing.space(2px calc(100% + (5v))); } &--valid &__legend, From d3655ba8b4a04f1d4ba853db5063badc0b070f3d Mon Sep 17 00:00:00 2001 From: lab9 Date: Wed, 19 Jul 2023 19:10:04 +0200 Subject: [PATCH 23/23] chore(*): changelog 1.10.0 (#717) --- CHANGELOG.md | 106 +++++++++++++++++- package.json | 2 +- src/component/card/style/_legacy.scss | 4 +- .../form/style/module/_fieldset.scss | 12 +- src/component/form/style/module/_message.scss | 2 +- src/component/password/style/_module.scss | 6 +- src/component/tile/style/_legacy.scss | 10 +- src/component/tile/style/module/_default.scss | 2 +- 8 files changed, 120 insertions(+), 24 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b739f5052..92c2e236e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,111 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi ## v1.10 -### [1.10.0-rc.2](https://github.com/GouvernementFR/dsfr/compare/v1.9.3...1.10.0-rc.2) - 11 Juillet 2023 +### [1.10.0](https://github.com/GouvernementFR/dsfr/compare/v1.9.3...1.10.0) - 19 Juillet 2023 + +#### 🐛 fix(form): correctif barre état iOS [(#712)](https://github.com/GouvernementFR/dsfr/pull/712) +- Sur iOS, la barre d'état d'erreur ou validation est discontinue +- corrige le problème de manière générique + + +#### 🐛 fix(modal): retour de focus fermeture clavier [(#716)](https://github.com/GouvernementFR/dsfr/pull/716) +- Mise en place du retour du focus à la fermeture en pressant la touche ESC + + +#### 🐛 fix(form): correctif focus des radios riches dépréciés [(#715)](https://github.com/GouvernementFR/dsfr/pull/715) +- corrige le décalage du focus sur les boutons radio en version dépréciée + + +#### 🐛 fix(follow): orthographe message de confirmation [(#714)](https://github.com/GouvernementFR/dsfr/pull/714) + + +#### ✨ feat(core, password): boutons spéciaux input Safari [(#711)](https://github.com/GouvernementFR/dsfr/pull/711) +- Dans les champs de type password, sur safari Mac, il y a une icône apportant des outils supplémentaire qui se superpose à l’icône des signalant la hauteur de casse +- Déplacement des icônes natives pour qu'elles ne se superposent pas +- Retrait de l'icône capslock native, privilégiant la nôtre + + +#### 🐛 fix(core): stabilisation disclosure [(#713)](https://github.com/GouvernementFR/dsfr/pull/713) +- L'ouverture des paramètres d'affichage est par moment non réactive +- L'élément est fermé avant même d'être ouvert à cause de boucle de déclenchement +- Ajout de condition permettant de limiter les boucles + + +#### 📝 doc(tooltip): retrait exemple texte [(#710)](https://github.com/GouvernementFR/dsfr/pull/710) +- l'utilisation d'un tooltip sur un texte pose des problèmes de restitution +- cet usage est déconseillé +- retrait de l'exemple + + +#### 🐛 fix(tile): correctif espacements version dépreciée [(#704)](https://github.com/GouvernementFR/dsfr/pull/704) +- L'icône et le contenu se retrouvent superposés dans la version dépréciée, ce correctif rétablit l'espacement nécessaire + + +#### 🐛 fix(tile, card): A11Y liens désactivés [(#709)](https://github.com/GouvernementFR/dsfr/pull/709) +- Ajout des attributs `role="link"` et `aria-disabled=true` sur les version désactivées + + +#### 🐛 fix(transcription, content): correctif title et label bouton Agrandir [(#708)](https://github.com/GouvernementFR/dsfr/pull/708) +- Retrait du title sur le bouton agrandir +- Ajout label agrandir dans les exemples de content + + +#### ✨ feat(*): Ajout d'un meta tag iOS [(#707)](https://github.com/GouvernementFR/dsfr/pull/707) +- Sur iOS, les numéros de téléphone sont automatiquement transformés en lien +- Entraîne un mauvais rendu dans le bloc fonctionnel de numéro de téléphone +- Correction par l'ajout général du meta tag `` + + +#### 🐛 fix(card, tile): correctif IE 11 [(#705)](https://github.com/GouvernementFR/dsfr/pull/705) +- correctif sur les tuiles et card sur la version legacy pour éviter les bugs de dépassement de texte et placement des icônes + + +#### 🐛 fix(toggle): retrait tap-highlight-color iOS [(#703)](https://github.com/GouvernementFR/dsfr/pull/703) +- Au clic sur le toggle sur iOS, l'effet de highlight est présent +- Retrait de cet effet avec la propriété [-webkit-tap-highlight-color](https://developer.mozilla.org/fr/docs/Web/CSS/-webkit-tap-highlight-color) + + +#### 🐛 fix(link): correctif téléchargement multiligne [(#702)](https://github.com/GouvernementFR/dsfr/pull/702) +- les liens de téléchargement étaient limités à une seul ligne avec une ellipse sur le text dépassant +- correctif prenant en compte le retour à la ligne + + +#### 🐛 fix(download): graisse du titre des liens [(#701)](https://github.com/GouvernementFR/dsfr/pull/701) +- Passage des liens dépréciés en graisse regular + + +#### 🐛 fix(*): mise à jour des liens du readme [(#700)](https://github.com/GouvernementFR/dsfr/pull/700) +- Mise à jour des liens vers [https://www.systeme-de-design.gouv.fr](https://www.systeme-de-design.gouv.fr) dans le readme + + +#### 🐛 fix(modal): préviens décalage mobile [(#699)](https://github.com/GouvernementFR/dsfr/pull/699) +- l'ajout d'un padding à l'ouverture permet de se substituer au décalage créé potentiellement par la disparition de la scrollbar en desktop +- En mobile, la modale occupe 100% de la largeur, ce padding créé un espacement incorrect +- ajout d'une media query sur le breakpoint MD pour corriger le problème + + +#### 🐛 fix(header): correctif régression scroll horizontal [(#697)](https://github.com/GouvernementFR/dsfr/pull/697) +- La navigation du header créée un scroll horizontal dans la page +- l'ajout d'un max-width prévient le problème + + +#### 🐛 fix(password): correctif accessibilité des messages [(#694)](https://github.com/GouvernementFR/dsfr/pull/694) +- ajout sur les messages de validation et d'erreur de la composition du mot de passe d'un statut en after uniquement pour les lecteurs d'écrans +- BREAKING CHANGE : il est nécessaire d'ajouter les attributs `data-fr-valid`et `data-fr-error` avec les textes correspondants à l'état (respectivement, en français, "validé" et "en erreur" + + +#### 🐛 fix(sidemenu): correction de la couleur des liens du sidemenu [(#698)](https://github.com/GouvernementFR/dsfr/pull/698) +- Effet de bord du passage du bouton mobile en bleu, l'ensemble des boutons du sidemenu est passé en bleu. +- Ce correctif amène la spécificité nécessaire pour avoir les boutons et lien en `text default grey` + + +#### 🐛 fix(core): correctif sur KeyAction [(#696)](https://github.com/GouvernementFR/dsfr/pull/696) +- Corrige la régression sur l'écoute des interactions avec le clavier dû à l'évolution de la structure de la constante KeyCodes, non répercutée dans KeyAction + + +#### ✨ feat(colors): ajout des utilitaires de couleur flat [(#693)](https://github.com/GouvernementFR/dsfr/pull/693) +- Ajout des classes utilitaires pour le token background flat avec les variations de couleur d'accent + #### 🐛 fix(tooltip,modal): interaction globale et focus iOS [(#691)](https://github.com/GouvernementFR/dsfr/pull/691) - Correctif à la pression de la touche Escape sur la modale : si l'élément actif (focus) est un élément de formulaire ou un média, la modale n'est pas refermée pas pour permettre l'interaction native de l'élément actif diff --git a/package.json b/package.json index 83d7dfd7e..bae45fee3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gouvfr/dsfr", - "version": "1.10.0-rc.2", + "version": "1.10.0", "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/card/style/_legacy.scss b/src/component/card/style/_legacy.scss index 736b36030..43e8c9a16 100644 --- a/src/component/card/style/_legacy.scss +++ b/src/component/card/style/_legacy.scss @@ -69,7 +69,7 @@ } } } - + #{ns(card)}__title { a { @include icon-size-legacy(sm, after); @@ -85,7 +85,7 @@ } } } - + #{ns(card)}__title { a { @include icon-size-legacy(md, after); diff --git a/src/component/form/style/module/_fieldset.scss b/src/component/form/style/module/_fieldset.scss index e9f0e648a..d559d62ce 100644 --- a/src/component/form/style/module/_fieldset.scss +++ b/src/component/form/style/module/_fieldset.scss @@ -30,6 +30,7 @@ &--info { background-repeat: no-repeat; background-position: 0 spacing.space(-9v); + background-size: spacing.space(2px calc(100% + (5v))); } &--valid &__legend, @@ -37,17 +38,6 @@ &--info &__legend { background-repeat: no-repeat; background-position: 0 0; - } - - &--valid, - &--error, - &--info { - background-size: spacing.space(2px calc(100% + (5v))); - } - - &--valid &__legend, - &--error &__legend, - &--info &__legend { background-size: 2px 100%; } diff --git a/src/component/form/style/module/_message.scss b/src/component/form/style/module/_message.scss index 6915ada95..22d7d502f 100644 --- a/src/component/form/style/module/_message.scss +++ b/src/component/form/style/module/_message.scss @@ -10,8 +10,8 @@ } &:last-child { - @include margin-bottom(0); --comma: ". "; + @include margin-bottom(0); } &--error, diff --git a/src/component/password/style/_module.scss b/src/component/password/style/_module.scss index 16453816a..36f3af961 100644 --- a/src/component/password/style/_module.scss +++ b/src/component/password/style/_module.scss @@ -11,17 +11,17 @@ #{ns(password__input)} { @include padding-right(12v); } - + @include before('', block) { @include absolute(3v, 4v, null, null, 4v, 4v); pointer-events: none; } } - + &__checkbox { @include absolute(0, 0); } - + &__input { @include margin-bottom(3v); diff --git a/src/component/tile/style/_legacy.scss b/src/component/tile/style/_legacy.scss index 1739c29e2..bb7d0cfd8 100644 --- a/src/component/tile/style/_legacy.scss +++ b/src/component/tile/style/_legacy.scss @@ -11,7 +11,8 @@ * Correctif de la largeur du texte dans la tuile */ #{ns(tile)} { - &--download, &--horizontal { + &--download, + &--horizontal { #{ns(tile)}__body { flex-basis: 100%; } @@ -33,7 +34,8 @@ } } - &__body, &__body > * { + &__body, + &__body > * { max-width: 100%; } @@ -55,7 +57,8 @@ max-width: 100%; } - &__start, &__detail { + &__start, + &__detail { max-width: 100%; } @@ -69,7 +72,6 @@ #{ns(tile)}__title { a { text-decoration: none; - @include icon-size-legacy(md, after) { background-color: transparent; } diff --git a/src/component/tile/style/module/_default.scss b/src/component/tile/style/module/_default.scss index c7d66b301..8567b150e 100644 --- a/src/component/tile/style/module/_default.scss +++ b/src/component/tile/style/module/_default.scss @@ -58,7 +58,7 @@ } } } - + &#{ns(tile--no-icon)} { #{ns(tile__title a)} { @include after(none);