🐛 fix(table): corrige regressions sur les tableaux déprécies [DS-3804] (

#969) - déplace bordures des tableaux déprécies sur les thead et tbody - retire les selecteurs css :has
GouvernementFR · Jun 25, 2024 · 9ea13d5 · 9ea13d5
1 parent ba99b13
commit 9ea13d5
Show file tree

Hide file tree

Showing 16 changed files with 117 additions and 89 deletions.
diff --git a/src/component/table/deprecated/example/index.ejs b/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) %>

diff --git a/src/component/table/deprecated/style/_legacy.scss b/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;
 

diff --git a/src/component/table/deprecated/style/_scheme.scss b/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));
       }

diff --git a/src/component/table/deprecated/style/module/_default.scss b/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%;
+        }
       }
     }
   }

diff --git a/src/component/table/deprecated/style/module/_variants.scss b/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));

diff --git a/src/component/table/example/data/data-complex-tbody.json.ejs b/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'
     }

diff --git a/src/component/table/index.js b/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,

diff --git a/src/component/table/main.js b/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);

diff --git a/src/component/table/script/table/table-caption.js b/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})`);
   }
 }
 

diff --git a/src/component/table/script/table/table-selector.js b/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'),

diff --git a/src/component/table/script/table/table-wrapper.js b/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 };
diff --git a/src/component/table/script/table/table.js b/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);
   }
 }
 

diff --git a/src/component/table/style/_legacy.scss b/src/component/table/style/_legacy.scss
@@ -87,6 +87,7 @@
       &#{ns(table--caption-bottom)} {
         caption {
           @include relative;
+          @include margin-bottom(4v);
         }
       }
 

diff --git a/src/component/table/style/_scheme.scss b/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));
             }
           }