🔖 chore(*): DSFR v1.12.1

CHANGELOG.md

@@ -12,8 +12,29 @@ Pour plus d’informations : [Voir la documentation](https://www.systeme-de-desi
 
 ## v1.12
 
+### [v1.12.1](https://github.com/GouvernementFR/dsfr/compare/v1.12.0...v1.12.1) - 25 Juin 2024
+
+#### 🐛 fix(artwork): correction pictogrammes firefox et Chrome156 [(#971)](https://github.com/GouvernementFR/dsfr/pull/971)
+- changement structurel des svg d'artwork
+  - corrige la régression apportée par la nouvelle version de chrome qui ne supporte plus la surchage de colorisation sur le svg si le path ciblé est déja coloré dans le svg
+  - le path ciblé est déja coloré dans le svg
+- corrige l'accentuation des pictogrammes sur firefox
+  - mise en place d'un script permettant de transformer les anciens pictogrammes vers la nouvelle structure
+  - `yarn pictogram-converter -p [chemin/picto]`
+
+
+#### 🐛 fix(table): corrige regressions sur les tableaux déprécies [(#969)](https://github.com/GouvernementFR/dsfr/pull/969)
+- déplace bordures des tableaux déprécies sur les thead et tbody
+- retire les selecteurs css :has
+
+
+
 ### [v1.12.0](https://github.com/GouvernementFR/dsfr/compare/v1.11.2...v1.12.0) - 19 Juin 2024
 
+#### ⬆️ chore(dependencies): met a jour les dépendances npm et correction lint [(#961)](https://github.com/GouvernementFR/dsfr/pull/961)
+- mise à jour dépendances npm
+
+
 #### 🐛 fix(*): correctifs pages d'exemple et icone bandeau d'alerte [(#948)](https://github.com/GouvernementFR/dsfr/pull/948)
 - correction icone bandeau d'alerte
 - corrections de libellés dans les pages d'exemples

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gouvfr/dsfr",
-  "version": "1.12.0",
+  "version": "1.12.1",
   "description": "Système de Design de l'Etat - DSFR",
   "repository": "git@github.com:GouvernementFR/dsfr.git",
   "author": "Service d'Information du Gouvernement <maxime.beaugrand@pm.gouv.fr>",
@@ -20,6 +20,7 @@
     "deploy": "node tool/tool.js deploy",
     "standalone": "node tool/tool.js standalone",
     "changelog": "node tool/tool.js changelog",
+    "pictogram-converter": "node tool/tool.js pictogram-converter",
     "serve": "browser-sync start --server --port 8080 --startPath example/"
   },
   "files": [

src/component/table/deprecated/example/index.ejs

@@ -6,12 +6,12 @@ let dataNoScroll = { caption: 'Titre du tableau (caption) non scrollable', noScr
 let dataLayoutFixed = { caption: 'Titre du tableau (caption) fixé', layout: "fixed", col: 3};
 let dataNoCaption = { caption: 'Titre du tableau (caption) caché', noCaption: true, col: 6};
 let dataCaptionBottom = { caption: 'Titre du tableau (caption) en bas', captionBottom: true, col: 6};
-
-// @TODO: revoir les grilles avec layout
 %>
 
 <%- sample('Tableau par défaut', './sample/table-default', {table:data}, true) %>
 
+<%- sample('Tableau minimal', './sample/table-default', {table: { caption: 'Titre du tableau (caption)', col: 2, row: 3}}, true) %>
+
 <%- sample('Tableau avec bordure', './sample/table-default', {table:dataBordered}, true) %>
 
 <%- sample('Tableau non scrollable', './sample/table-default', {table:dataNoScroll}, true) %>

src/component/table/deprecated/style/_legacy.scss

@@ -11,11 +11,13 @@
     @include before(none);
 
     & > table {
-      background-image: none;
-
       thead {
         background-image: none;
 
+        @include after {
+          background-image: none;
+        }
+
         tr {
           &:first-child {
             th {
@@ -32,6 +34,10 @@
       }
 
       tbody {
+        @include after {
+          background-image: none;
+        }
+
         tr {
           background-image: none;
 

src/component/table/deprecated/style/_scheme.scss

@@ -8,17 +8,19 @@
 @mixin _deprecated-table-scheme($legacy: false) {
   #{ns(table)} {
     & > table {
-      @include after {
-        @include color.background-image((border contrast grey) (border contrast grey) (border contrast grey) (border contrast grey), (legacy:$legacy));
-      }
-
       caption {
         @include color.text(title grey, (legacy: $legacy));
       }
 
+      thead,
+      tbody {
+        @include after {
+          @include color.background-image((border contrast grey) (border contrast grey) (border contrast grey), (legacy:$legacy));
+        }
+      }
+
       thead {
         @include color.background-image(border plain grey, (legacy: $legacy));
-
         @include color.background(alt grey, (legacy: $legacy));
         @include color.text(title grey, (legacy: $legacy));
       }

src/component/table/deprecated/style/module/_default.scss

@@ -4,14 +4,12 @@
 ////
 
 #{ns(table)} {
+  @include padding-top(var(--table-offset));
+
   @include before('', block) {
     @include size(100%, 0);
   }
 
-  &:not(:has(#{ns(table__container)})) {
-    @include padding-top(var(--table-offset));
-  }
-
   &:not(#{ns(table--no-scroll)}) {
     & > table {
       width: 100%;
@@ -47,21 +45,38 @@
       td,
       th {
         font-weight: font-weight(bold);
-        @include padding-bottom(3.5v); // 0.5v for the box shadow
+        @include padding-bottom(3.5v);
         @include padding-bottom(4.5v, md);
       }
     }
   }
 
   &#{ns-attr(js-table, true)} {
     & > table {
-      @include after('', block) {
-        @include absolute(var(--table-offset), null, null, 0, 100%, calc(100% - var(--table-offset)));
-        @include z-index(over);
-        background-position: 0 0, 0 0, 100% 100%, 0 100%;
-        background-size: 100% 1px, 1px 100%, 1px 100%, 100% 1px;
-        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
-        pointer-events: none;
+      thead,
+      tbody {
+        @include relative;
+
+        @include after('', block) {
+          @include absolute(0, null, null, 0, 100%, 100%);
+          @include z-index(over);
+          background-repeat: no-repeat, no-repeat, no-repeat;
+          pointer-events: none;
+        }
+      }
+
+      thead {
+        @include after {
+          background-position: 0 0, 0 0, 100% 100%;
+          background-size: 100% 1px, 1px 100%, 1px 100%;
+        }
+      }
+
+      tbody {
+        @include after {
+          background-position: 0 0, 0 100%, 100% 0;
+          background-size: 1px 100%, 100% 1px, 1px 100%;
+        }
       }
     }
   }

src/component/table/deprecated/style/module/_variants.scss

@@ -22,11 +22,8 @@
   * Fixe le caption en bas du tableau
   */
   &--caption-bottom {
-    &:not(:has(#{ns(table__container)})) {
-      @include padding-top(0);
-      @include margin-bottom(0);
-      @include margin-top(4v);
-    }
+    @include padding-top(0);
+    @include margin-top(4v);
 
     & > table {
       @include margin-bottom(calc(var(--table-offset) + 11v));

src/component/table/example/data/data-complex-tbody.json.ejs

@@ -29,7 +29,7 @@ const tbody = [
     },
     {
       attributes: {
-        headers: 'complex-row-0 complex-thead-0-col-4 complex-thead-1-col-5'
+        headers: 'complex-row-0 complex-thead-0-col-4 complex-thead-1-col-4'
       },
       content: 'EPS'
     }
@@ -38,7 +38,7 @@ const tbody = [
     {
       attributes: {
         colspan: 5,
-        headers: 'complex-row-1 complex-thead-0-col-1 complex-thead-0-col-2 complex-thead-0-col-3 complex-thead-0-col-4 complex-thead-1-col-1 complex-thead-1-col-2 complex-thead-1-col-3 complex-thead-1-col-4 complex-thead-1-col-5'
+        headers: 'complex-row-1 complex-thead-0-col-1 complex-thead-0-col-2 complex-thead-0-col-3 complex-thead-0-col-4 complex-thead-1-col-1 complex-thead-1-col-2 complex-thead-1-col-3 complex-thead-1-col-4 complex-thead-1-col-4'
       },
       content: 'Etude dirigée<br><i>Exemple de colspan sur toute la ligne</i>'
     }
@@ -71,7 +71,7 @@ const tbody = [
     },
     {
       attributes: {
-        headers: 'complex-row-2 complex-thead-0-col-4 complex-thead-1-col-5'
+        headers: 'complex-row-2 complex-thead-0-col-4 complex-thead-1-col-4'
       },
       content: 'Sciences'
     }
@@ -97,7 +97,7 @@ const tbody = [
     },
     {
       attributes: {
-        headers: 'complex-row-3 complex-thead-0-col-4 complex-thead-1-col-5'
+        headers: 'complex-row-3 complex-thead-0-col-4 complex-thead-1-col-4'
       },
       content: 'Physique - Chimie'
     }
@@ -124,7 +124,7 @@ const tbody = [
     },
     {
       attributes: {
-        headers: 'complex-row-4 complex-thead-0-col-4 complex-thead-1-col-5'
+        headers: 'complex-row-4 complex-thead-0-col-4 complex-thead-1-col-4'
       },
       content: 'LV2'
     }

src/component/table/index.js

@@ -1,12 +1,14 @@
 import api from './api.js';
 import { Table } from './script/table/table.js';
+import { TableWrapper } from './script/table/table-wrapper.js';
 import { TableElement } from './script/table/table-element.js';
 import { TableSelector } from './script/table/table-selector.js';
 import { TableCaption } from './script/table/table-caption.js';
 import { TableRow } from './script/table/table-row.js';
 
 api.table = {
   Table: Table,
+  TableWrapper: TableWrapper,
   TableElement: TableElement,
   TableCaption: TableCaption,
   TableSelector: TableSelector,

src/component/table/main.js

@@ -1,6 +1,7 @@
 import api from './index.js';
 
 api.internals.register(api.table.TableSelector.TABLE, api.table.Table);
+api.internals.register(api.table.TableSelector.TABLE_WRAPPER, api.table.TableWrapper);
 api.internals.register(api.table.TableSelector.ELEMENT, api.table.TableElement);
 api.internals.register(api.table.TableSelector.CAPTION, api.table.TableCaption);
 api.internals.register(api.table.TableSelector.ROW, api.table.TableRow);

src/component/table/script/table/table-caption.js

@@ -1,6 +1,7 @@
 import api from '../../api.js';
 import { TableEmission } from './table-emission.js';
 
+const PADDING = '1rem'; // padding de 4v sur le caption
 class TableCaption extends api.core.Instance {
   static get instanceClassName () {
     return 'TableCaption';
@@ -15,7 +16,7 @@ class TableCaption extends api.core.Instance {
     const height = this.getRect().height;
     if (this.height === height) return;
     this.height = height;
-    this.ascend(TableEmission.CAPTION_HEIGHT, height);
+    this.ascend(TableEmission.CAPTION_HEIGHT, `calc(${height}px + ${PADDING})`);
   }
 }
 

src/component/table/script/table/table-selector.js

@@ -2,6 +2,7 @@ import api from '../../api.js';
 
 export const TableSelector = {
   TABLE: api.internals.ns.selector('table'),
+  TABLE_WRAPPER: [`${api.internals.ns.selector('table')} ${api.internals.ns.selector('table__wrapper')}`],
   SHADOW: api.internals.ns.selector('table__shadow'),
   SHADOW_LEFT: api.internals.ns.selector('table__shadow--left'),
   SHADOW_RIGHT: api.internals.ns.selector('table__shadow--right'),

src/component/table/script/table/table-wrapper.js

@@ -0,0 +1,19 @@
+import api from '../../api.js';
+import { TableEmission } from './table-emission.js';
+
+class TableWrapper extends api.core.Instance {
+  static get instanceClassName () {
+    return 'TableWrapper';
+  }
+
+  init () {
+    this.addAscent(TableEmission.CAPTION_HEIGHT, this.setCaptionHeight.bind(this));
+  }
+
+  setCaptionHeight (value) {
+    requestAnimationFrame(() => this.ascend(TableEmission.CAPTION_HEIGHT, 0));
+    this.setProperty('--table-offset', value);
+  }
+}
+
+export { TableWrapper };

src/component/table/script/table/table.js

@@ -1,20 +1,17 @@
 import api from '../../api.js';
 import { TableEmission } from './table-emission.js';
 
-const PADDING = '1rem'; // padding de 4v sur le caption
-
 class Table extends api.core.Instance {
   static get instanceClassName () {
     return 'Table';
   }
 
   init () {
-    this.rowsHeaderWidth = [];
     this.addAscent(TableEmission.CAPTION_HEIGHT, this.setCaptionHeight.bind(this));
   }
 
   setCaptionHeight (value) {
-    this.setProperty('--table-offset', `calc(${value}px + ${PADDING})`);
+    this.setProperty('--table-offset', value);
   }
 }
 

src/component/table/style/_legacy.scss

@@ -87,6 +87,7 @@
       &#{ns(table--caption-bottom)} {
         caption {
           @include relative;
+          @include margin-bottom(4v);
         }
       }
 

src/component/table/style/_scheme.scss

@@ -37,10 +37,8 @@
 
         tbody {
           tr {
-            &[aria-selected=true] {
-              &::after {
-                @include color.background-image((border action-high blue-france) (border action-high blue-france) (border action-high blue-france) (border action-high blue-france), (legacy: $legacy));
-              }
+            @include after {
+              @include color.background-image((border action-high blue-france) (border action-high blue-france) (border action-high blue-france) (border action-high blue-france), (legacy: $legacy));
             }
           }