🐛 fix(*): corrections diverses [DS-3641] (#833)

- Ajout de la balise meta `format detection` pour désactiver le style automatique des url, date, email, et tél sur IOS - Passage des tag/badge en taille md sur les cartes md - augmentation de la marge au dessus du message d'erreur sur checkbox, input, select (16px) - correction d'une régression de la couleur de bordure des checkbox en erreur/succès - augmentation de la marge droite de l'image du composant citation - alignement de la valeur sur le curseur double quand tout à gauche - augmentation de l'épaisseur du stepper à 8px - passage du token de couleur des liens du menu latéral en $text-action-high-grey - passage en bleu du bouton d'ouverture du sélecteur de langue en mobile - alignement des chevrons du fil d'arianne - correction du token des tags cliquables désactivés
GouvernementFR · Nov 28, 2023 · a91ca4d · a91ca4d
1 parent 6a1a625
commit a91ca4d
Show file tree

Hide file tree

Showing 20 changed files with 71 additions and 60 deletions.
diff --git a/src/analytics/standalone/example/index.ejs b/src/analytics/standalone/example/index.ejs
@@ -3,6 +3,7 @@
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+ <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
  <title>Analytics standalone</title>
  <link href="../component/connect/connect.standalone.css" rel="stylesheet" />
  <script>

diff --git a/src/component/badge/example/index.ejs b/src/component/badge/example/index.ejs
@@ -1,32 +1,32 @@
 <% const sample = getSample(include); %>
 
-<%- sample('badge seul', './sample/badge-default', {}, true); %>
+<%- sample('Badge seul', './sample/badge-default', {}, true); %>
 
 <p>Il est conseillé d'ajouter une balise span avec la classe fr-ellipsis à l'interieur du badge pour que celui ci reste sur une seule ligne, avec le texte coupé par des points de suspensions.</p>
-<%- sample('badge sur une seule ligne - ellipsis', './sample/badge-ellipsis', {}, true); %>
+<%- sample('Badge sur une seule ligne - ellipsis', './sample/badge-ellipsis', {}, true); %>
 
-<%- sample('badge - succès', './sample/badge-default', {badge: {type: 'success'}}, true); %>
-<%- sample('badge - succès sans icone', './sample/badge-default', {badge: {type: 'success', icon: false}}, true); %>
-<%- sample('badge - erreur', './sample/badge-default', {badge: {type: 'error'}}, true); %>
-<%- sample('badge - erreur sans icone', './sample/badge-default', {badge: {type: 'error', icon: false}}, true); %>
-<%- sample('badge - information', './sample/badge-default', {badge: {type: 'info'}}, true); %>
-<%- sample('badge - information sans icone', './sample/badge-default', {badge: {type: 'info', icon: false}}, true); %>
-<%- sample('badge - avertissement', './sample/badge-default', {badge: {type: 'warning'}}, true); %>
-<%- sample('badge - avertissement sans icone', './sample/badge-default', {badge: {type: 'warning', icon: false}}, true); %>
-<%- sample('badge - nouveauté', './sample/badge-default', {badge: {type: 'new'}}, true); %>
-<%- sample('badge - nouveauté sans icone', './sample/badge-default', {badge: {type: 'new', icon: false}}, true); %>
+<%- sample('Badge - succès', './sample/badge-default', {badge: {type: 'success'}}, true); %>
+<%- sample('Badge - succès sans icone', './sample/badge-default', {badge: {type: 'success', icon: false}}, true); %>
+<%- sample('Badge - erreur', './sample/badge-default', {badge: {type: 'error'}}, true); %>
+<%- sample('Badge - erreur sans icone', './sample/badge-default', {badge: {type: 'error', icon: false}}, true); %>
+<%- sample('Badge - information', './sample/badge-default', {badge: {type: 'info'}}, true); %>
+<%- sample('Badge - information sans icone', './sample/badge-default', {badge: {type: 'info', icon: false}}, true); %>
+<%- sample('Badge - avertissement', './sample/badge-default', {badge: {type: 'warning'}}, true); %>
+<%- sample('Badge - avertissement sans icone', './sample/badge-default', {badge: {type: 'warning', icon: false}}, true); %>
+<%- sample('Badge - nouveauté', './sample/badge-default', {badge: {type: 'new'}}, true); %>
+<%- sample('Badge - nouveauté sans icone', './sample/badge-default', {badge: {type: 'new', icon: false}}, true); %>
 
-<%- sample('badge - personnalisé green-menthe', './sample/badge-default', {badge: {accent: 'green-menthe'}}, true); %>
-<%- sample('badge - personnalisé orange-terre-battue', './sample/badge-default', {badge: {accent: 'orange-terre-battue'}}, true); %>
-<%- sample('badge - personnalisé purple-glycine', './sample/badge-default', {badge: {accent: 'purple-glycine'}}, true); %>
+<%- sample('Badge - personnalisé green-menthe', './sample/badge-default', {badge: {accent: 'green-menthe'}}, true); %>
+<%- sample('Badge - personnalisé orange-terre-battue', './sample/badge-default', {badge: {accent: 'orange-terre-battue'}}, true); %>
+<%- sample('Badge - personnalisé purple-glycine', './sample/badge-default', {badge: {accent: 'purple-glycine'}}, true); %>
 
-<%- sample('badge taille SM', './sample/badge-sm', {}, true); %>
-<%- sample('badge SM - succès', './sample/badge-sm', {badge: {type: 'success'}}, true); %>
-<%- sample('badge SM - erreur', './sample/badge-sm', {badge: {type: 'error'}}, true); %>
-<%- sample('badge SM - information', './sample/badge-sm', {badge: {type: 'info'}}, true); %>
-<%- sample('badge SM - avertissement', './sample/badge-sm', {badge: {type: 'warning'}}, true); %>
-<%- sample('badge SM - nouveauté', './sample/badge-sm', {badge: {type: 'new'}}, true); %>
-<%- sample('badge SM - personnalisé purple-glycine', './sample/badge-sm', {badge: {accent: 'purple-glycine'}}, true); %>
+<%- sample('Badge taille SM', './sample/badge-sm', {}, true); %>
+<%- sample('Badge SM - succès', './sample/badge-sm', {badge: {type: 'success'}}, true); %>
+<%- sample('Badge SM - erreur', './sample/badge-sm', {badge: {type: 'error'}}, true); %>
+<%- sample('Badge SM - information', './sample/badge-sm', {badge: {type: 'info'}}, true); %>
+<%- sample('Badge SM - avertissement', './sample/badge-sm', {badge: {type: 'warning'}}, true); %>
+<%- sample('Badge SM - nouveauté', './sample/badge-sm', {badge: {type: 'new'}}, true); %>
+<%- sample('Badge SM - personnalisé purple-glycine', './sample/badge-sm', {badge: {accent: 'purple-glycine'}}, true); %>
 
 <%- section('Groupe de badges', 'Lorsque que l\'on a plus d\'un badge, il convient d\'utiliser un groupe de badges. <br>La taille de tous les badges peut être définie au niveau du groupe.') %>
 

diff --git a/src/component/breadcrumb/style/_module.scss b/src/component/breadcrumb/style/_module.scss
@@ -68,7 +68,7 @@ un padding de 4px et une marge négative en compensation sont mis en place afin
  &:not(:first-child) {
  @include icon(arrow-right-s-line, sm, before) {
  @include margin-x(1v);
- vertical-align: calc((1.05rem - var(--icon-size)) * 0.5);
+ vertical-align: -0.0625em;
  }
  }
  }

diff --git a/src/component/card/example/download/sample/sample-lang.ejs b/src/component/card/example/download/sample/sample-lang.ejs
@@ -1,4 +1,3 @@
 <% const sample = getSample(include); %>
 
-<%- section('Fichier d\'une autre langue', 'Si la langue du fichier à télécharger est différente de celle de la page courante, il est nécéssaire d\'ajouter l\'attribut <b>hreflang</b> avec comme valeur le code langue (ex: hreflang="en") sur le lien. L’attribut prend pour valeur le code langue selon la norme ISO 639-1 (<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1" target="_blank">Liste des codes ISO 639-1</a>).<br> Il faut aussi <b>ajouter le nom de la langue dans les détails</b> (sauf remplissage automatique en js)', 0) %>
-<%- sample('', './card-download', {card: { content : { lang: 'en', details: [{ label: 'PDF - 1,3 Mo - Anglais', position: 'end'}] } }}, true, '../../sample/card-layout', {col: {md:8, lg:6}}) %>
+<%- sample('Fichier d\'une autre langue', './card-download', {card: { content : { lang: 'en', details: [{ label: 'PDF - 1,3 Mo - Anglais', position: 'end'}] } }}, true, '../../sample/card-layout', {desc: 'Si la langue du fichier à télécharger est différente de celle de la page courante, il est nécéssaire d\'ajouter l\'attribut <b>hreflang</b> avec comme valeur le code langue (ex: hreflang="en") sur le lien. L’attribut prend pour valeur le code langue selon la norme ISO 639-1 (<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1" target="_blank">Liste des codes ISO 639-1</a>).<br> Il faut aussi <b>ajouter le nom de la langue dans les détails</b> (sauf remplissage automatique en js)', col: {md:8, lg:6}}) %>
diff --git a/src/component/card/style/module/_content.scss b/src/component/card/style/module/_content.scss
@@ -8,7 +8,6 @@
  order: 1;
  @include display-flex(column);
  @include padding(8v);
- @include nest-tag(sm);
  @include height(100%);
  }
 

diff --git a/src/component/card/style/module/_lg.scss b/src/component/card/style/module/_lg.scss
@@ -5,7 +5,6 @@
 
 #{ns(card)} {
  &--lg &__content {
- @include nest-tag(md);
  @include padding(10v);
  }
 

diff --git a/src/component/card/style/module/_sm.scss b/src/component/card/style/module/_sm.scss
@@ -6,10 +6,12 @@
 #{ns(card)} {
  &--sm &__header {
  @include nest-badge(sm);
+ @include nest-tag(sm);
  }
 
  &--sm &__content {
  @include nest-badge(sm);
+ @include nest-tag(sm);
  @include padding(6v);
  }
 

diff --git a/src/component/checkbox/style/_module.scss b/src/component/checkbox/style/_module.scss
@@ -75,7 +75,7 @@
 
  #{selector.ns(message)} {
  &:first-child {
- @include margin-top(2v);
+ @include margin-top(4v);
  }
  }
 }
diff --git a/src/component/checkbox/style/_scheme.scss b/src/component/checkbox/style/_scheme.scss
@@ -46,11 +46,14 @@
  }
 
  &--error {
- input[type="checkbox"] + label {
- @include color.text(default error, (legacy:$legacy));
+ input[type="checkbox"],
+ input[type="checkbox"]:checked {
+ & + label {
+ @include color.text(default error, (legacy:$legacy));
 
- @include before {
- @include color.background-image(border plain error, (), checkbox-background-image());
+ @include before {
+ @include color.background-image(border plain error, (), checkbox-background-image());
+ }
  }
  }
 
@@ -60,11 +63,14 @@
  }
 
  &--valid {
- input[type="checkbox"] + label {
- @include color.text(default success, (legacy:$legacy));
+ input[type="checkbox"],
+ input[type="checkbox"]:checked {
+ & + label {
+ @include color.text(default success, (legacy:$legacy));
 
- @include before {
- @include color.background-image(border plain success, (), checkbox-background-image());
+ @include before {
+ @include color.background-image(border plain success, (), checkbox-background-image());
+ }
  }
  }
 

diff --git a/src/component/input/input-base/style/_module.scss b/src/component/input/input-base/style/_module.scss
@@ -90,7 +90,7 @@
 
  #{ns(message)} {
  &:first-child {
- @include margin-top(2v);
+ @include margin-top(4v);
  }
  }
 

diff --git a/src/component/main.js b/src/component/main.js
@@ -3,7 +3,6 @@ import './accordion/main.js';
 import './button/main.js';
 import './card/main.js';
 import './segmented/main.js';
-import './range/main.js';
 import './breadcrumb/main.js';
 import './tooltip/main.js';
 import './toggle/main.js';
@@ -16,6 +15,7 @@ import './table/main.js';
 import './tag/main.js';
 import './transcription/main.js';
 import './tile/main.js';
+import './range/main.js';
 import './header/main.js';
 import './display/main.js';
 export default api;
diff --git a/src/component/quote/style/_module.scss b/src/component/quote/style/_module.scss
@@ -27,7 +27,7 @@
 
  &--column {
  @include display-flex(column, flex-start, center);
- @include margin-left(52v, md);
+ @include margin-left(54v, md);
 
  @include respond-from(md) {
  @include min-height(52v);
@@ -72,7 +72,7 @@
 
  &__author {
  @include font-weight(bold);
- @include text-style(sm);
+ @include text-style(md);
  @include set-text-margin(0 0 1v);
  }
 
@@ -89,22 +89,21 @@
  }
 
  @include respond-from(md) {
- @include absolute(50%,null,null,-52v,46v,46v);
+ @include absolute(50%,null,null,-54v,46v,46v);
  @include margin-top(-23v);
  }
  }
 
  cite {
- @include text-style(xs);
  font-style: italic;
  }
 
  figcaption {
  @include disable-list-style;
- @include text-style(xs);
 
  #{ns(quote)}__source {
  @include display-flex(row,null,flex-start,wrap);
+ @include text-style(xs);
 
  li {
  display: inline-block;

diff --git a/src/component/range/style/_module.scss b/src/component/range/style/_module.scss
@@ -95,7 +95,7 @@
 
  &#{selector.ns-group(range)}--double {
  output {
- @include min-width(12v);
+ @include min-width(calc(var(--thumb-size) * 2));
  }
 
  &#{selector.ns-attr(js-range)} input[type=range] {

diff --git a/src/component/select/style/_module.scss b/src/component/select/style/_module.scss
@@ -23,7 +23,7 @@
 
  #{ns(message)} {
  &:first-child {
- @include margin-top(2v);
+ @include margin-top(4v);
  }
  }
 

diff --git a/src/component/sidemenu/style/_scheme.scss b/src/component/sidemenu/style/_scheme.scss
@@ -31,7 +31,7 @@
  @include list-item {
  #{ns(sidemenu__link)},
  #{ns(sidemenu__btn)} {
- @include color.text(default grey, (legacy:$legacy));
+ @include color.text(action-high grey, (legacy: $legacy));
  }
 
  @include before {

diff --git a/src/component/stepper/style/_module.scss b/src/component/stepper/style/_module.scss
@@ -37,13 +37,14 @@
  @include hide-last-step-detail();
 
  &__steps {
- --default-outer: calc((100% + 6px) / var(--steps));
- --default-inner: calc(var(--default-outer) - 6px);
- --active-outer: calc((100% + 6px) / var(--current-step));
- --active-inner: calc(var(--active-outer) - 6px);
- @include size(100%, 6px);
+ --stepper-size: #{spacing.space(2v)};
+ --default-outer: calc((100% + var(--stepper-size)) / var(--steps));
+ --default-inner: calc(var(--default-outer) - var(--stepper-size));
+ --active-outer: calc((100% + var(--stepper-size)) / var(--current-step));
+ --active-inner: calc(var(--active-outer) - var(--stepper-size));
+ @include size(100%, var(--stepper-size));
  background-repeat: no-repeat;
- background-size: calc((100% + 6px) * var(--current-step) / var(--steps) - 6px) 100%, 100% 100%;
+ background-size: calc((100% + var(--stepper-size)) * var(--current-step) / var(--steps) - var(--stepper-size)) 100%, 100% 100%;
  background-position: 0 0, 0 0;
  @include stepper-build();
  }

diff --git a/src/component/tag/style/_scheme.scss b/src/component/tag/style/_scheme.scss
@@ -67,7 +67,14 @@
  }
  }
 
- @include disabled.selector((can-be-link: true), (legacy: $legacy, text: true, background: true));
+ @include disabled.selector((), (legacy: $legacy, text: true, background: true));
+ }
+ }
+
+ a:not([href]) {
+ &#{ns(tag)} {
+ @include color.text(disabled grey, (legacy: $legacy));
+ @include color.background(disabled grey, (legacy: $legacy));
  }
  }
 

diff --git a/src/component/translate/style/_scheme.scss b/src/component/translate/style/_scheme.scss
@@ -9,11 +9,9 @@
  #{ns(translate)} {
  #{ns(translate)}__btn {
  &[aria-expanded="true"] {
- @include respond-from(lg) {
- @include color.text(active blue-france, (legacy: $legacy));
- @include color.background(open blue-france, (legacy: $legacy));
- @include hover-tint;
- }
+ @include color.text(active blue-france, (legacy: $legacy));
+ @include color.background(open blue-france, (legacy: $legacy));
+ @include hover-tint;
  }
  }
 

diff --git a/tool/example/example.ejs b/tool/example/example.ejs
@@ -4,7 +4,7 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <meta name="format-detection" content="telephone=no">
+ <meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">
  <title><%= title %> - Système de design</title>
 
  <%- include('../../src/core/template/ejs/favicon/favicon.ejs', {favicon: {path: `${relativeRoot}dist/favicon/`}}); %>

diff --git a/tool/example/heading.ejs b/tool/example/heading.ejs
@@ -3,7 +3,7 @@
  const classes = [prefix + '-icon-arrow-left-line', prefix + '-link--icon-left'];
  if (id !== 'analytics') classes.push(prefix + '-link');
  %>
- <a <%- includeClasses(classes) %> href="../">Retour</a>
+ <p><a <%- includeClasses(classes) %> href="../">Retour</a></p>
  <h1><%= title %> <%= locals.id ? `(${id})` : '' %></h1>
  <% if (locals.description) { %>
  <p><%- description.replace(/(?:\r\n|\r|\n)/g, '<br/>') %></p>