✨ feat(table) : Mise à jour des exemples [DS-3742] (#949)

- correction legacy - mise à jour de l'icone twitter
GouvernementFR · Jun 17, 2024 · bd6f146 · bd6f146
1 parent 05b3e3c
commit bd6f146
Show file tree

Hide file tree

Showing 15 changed files with 110 additions and 199 deletions.
diff --git a/src/component/table/.package.yml b/src/component/table/.package.yml
@@ -8,7 +8,6 @@ style:
 script:
  - core
  - checkbox
- - tooltip
 example:
  style:
  - alert
@@ -23,3 +22,5 @@ example:
  - tag
  - toggle
  - tooltip
+ script:
+ - tooltip
diff --git a/src/component/table/deprecated/style/_scheme.scss b/src/component/table/deprecated/style/_scheme.scss
@@ -8,7 +8,9 @@
 @mixin _deprecated-table-scheme($legacy: false) {
  #{ns(table)} {
  & > table {
- @include color.background-image((border default grey) (border default grey) (border default grey) (border default grey), (legacy: $legacy));
+ @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));
@@ -32,7 +34,9 @@
 
  @include color.accentuate {
  & > table {
- @include color.background-image((border default accent) (border default accent) (border default accent) (border default accent), (legacy: $legacy));
+ @include after {
+ @include color.background-image((border default accent) (border default accent) (border default accent) (border default accent), (legacy: $legacy));
+ }
 
  thead {
  @include color.background-image(border plain accent, (legacy: $legacy));

diff --git a/src/component/table/deprecated/style/module/_default.scss b/src/component/table/deprecated/style/module/_default.scss
@@ -24,13 +24,6 @@
  overflow: auto;
  border-spacing: 0;
 
- @include padding(1px);
- @include margin(-1px);
-
- background-size: 100% 1px, 1px 100%, 1px 100%, 100% 1px;
- background-repeat: no-repeat, no-repeat, no-repeat;
- background-position: 0 100%, 0 0, 100% 0, 100% 0;
-
  td,
  th {
  text-align: left;
@@ -59,4 +52,17 @@
  }
  }
  }
+
+ &#{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;
+ }
+ }
+ }
 }
diff --git a/src/component/table/deprecated/style/module/_variants.scss b/src/component/table/deprecated/style/module/_variants.scss
@@ -40,6 +40,12 @@
 
  &#{ns-attr(js-table, true)} {
  & > table {
+ &::after {
+ bottom: 0;
+ top: auto;
+ @include height(100%);
+ }
+
  caption {
  @include absolute(100%, 0, 0, 0);
  @include margin-top(4v);

diff --git a/src/component/table/example/data/data-complex-thead.json.ejs b/src/component/table/example/data/data-complex-thead.json.ejs
@@ -3,6 +3,7 @@ const thead = [
  [
  {
  attributes: {
+ role: 'columnheader',
  rowspan: 2
  },
  classes: [`${prefix}-cell--fixed`],

diff --git a/src/component/table/example/data/data-simple.json.ejs b/src/component/table/example/data/data-simple.json.ejs
@@ -1,5 +1,6 @@
 <%
 const table = locals.table || {};
+
 const dataLorem = JSON.parse(include('../data/data-lorem.json.ejs', { table: table.table }));
 
 const thead = dataLorem.thead;
@@ -30,6 +31,8 @@ if (table.selectable) {
  tbodies.forEach((tbody) => {
  tbody.forEach((row, index) => {
  row.unshift({
+ markup: 'th',
+ attributes: {scope: 'row'},
  classes: [`${prefix}-cell--fixed`],
  content: getCheckbox({id: `${uniqueId('table-select-checkbox')}--${index}`, label: `${getText('data.cell.action.selectRow', 'table')} ${index + 1}`, attributes: {name: 'row-select'}})
  });
@@ -41,7 +44,7 @@ if (table.doubleEntry) {
  thead.forEach((row) => {
  row.unshift({
  attributes: {
- scope: 'row'
+ role: 'columnheader'
  },
  classes: [`${prefix}-cell--fixed`],
  content: getSrOnlyCell(getText('data.cell.doubleEntry', 'table'))

diff --git a/src/component/table/script/table/table-selector.js b/src/component/table/script/table/table-selector.js
@@ -5,7 +5,7 @@ export const TableSelector = {
  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'),
- ELEMENT: [`${api.internals.ns.selector('table')}:not(${api.internals.ns.selector('table--no-scroll')}) table`, `${api.internals.ns.selector('table')} ${api.internals.ns.selector('table__container')}`],
+ ELEMENT: [`${api.internals.ns.selector('table')}:not(${api.internals.ns.selector('table--no-scroll')}) table`],
  CAPTION: `${api.internals.ns.selector('table')} table caption`,
  ROW: `${api.internals.ns.selector('table')} tbody tr`,
  COL: `${api.internals.ns.selector('table')} thead th`

diff --git a/src/component/table/style/_legacy.scss b/src/component/table/style/_legacy.scss
@@ -32,6 +32,12 @@
  background-image: none;
  }
 
+ th[role='columnheader'] {
+ background-size: 1px 100%;
+ background-repeat: no-repeat;
+ background-position: 100% 0;
+ }
+
  &:first-child {
  th {
  @include color.border(contrast grey, (legacy: true, important: false, side: 'top'));
@@ -50,26 +56,20 @@
  tr {
  background-image: none;
 
- th,
- td {
- background-image: none;
- @include color.border(contrast grey, (legacy: true, important: false, side: 'bottom'));
- }
-
  &[aria-selected=true] {
  @include after(none);
 
  th,
  td {
- border-top: 2px solid;
- border-bottom: 2px solid;
+ border-top: 2px solid #{color.$blue-france};
+ border-bottom: 2px solid #{color.$blue-france};
 
  &:first-child {
- border-left: 2px solid;
+ border-left: 2px solid #{color.$blue-france};
  }
 
  &:last-child {
- border-right: 2px solid;
+ border-right: 2px solid #{color.$blue-france};
  }
  }
  }

diff --git a/src/component/table/style/_module.scss b/src/component/table/style/_module.scss
@@ -8,5 +8,4 @@
 @import 'module/footer';
 @import 'module/sm';
 @import 'module/lg';
-@import 'module/shadow';
 @import 'module/variants';
diff --git a/src/component/table/style/_scheme.scss b/src/component/table/style/_scheme.scss
@@ -15,11 +15,19 @@
 
  &__content {
  table {
+ caption {
+ @include color.text(title grey, (legacy:$legacy));
+ }
+
  thead {
  th {
  @include color.background(alt grey, (legacy: $legacy));
  @include color.background-image((border plain grey) (border contrast grey), (legacy: $legacy));
 
+ &[role='columnheader'] {
+ @include color.background-image((border plain grey) (border plain grey), (legacy: $legacy));
+ }
+
  &:last-child {
  @include color.background(alt grey, (legacy: $legacy));
  @include color.background-image((border plain grey), (legacy: $legacy));
@@ -36,33 +44,14 @@
  }
  }
 
- th,
  td {
  @include color.background-image((border contrast grey) (border contrast grey), (legacy: $legacy));
  @include color.background(default grey, (legacy: $legacy));
  }
 
  th {
  @include color.background(alt grey, (legacy: $legacy));
- @include color.background-image((border contrast grey) (border contrast grey), (legacy: $legacy));
- }
- }
- }
- }
-
- &__shadow--left {
- #{ns(table__content)} {
- #{ns(cell--fixed)} {
- @include color.background-image((border contrast grey) (border plain grey), (legacy: $legacy));
-
- &[scope='col'] {
- @include color.background-image((border plain grey) (border plain grey), (legacy: $legacy));
- }
- }
-
- thead {
- #{ns(cell--fixed)} {
- @include color.background-image((border plain grey) (border plain grey), (legacy: $legacy));
+ @include color.background-image((border contrast grey) (border plain grey), (legacy: $legacy));
  }
  }
  }

diff --git a/src/component/table/style/module/_default.scss b/src/component/table/style/module/_default.scss
@@ -18,15 +18,6 @@
  @include margin-bottom(10v);
  @include margin-top(4v);
 
- &__wrapper {
- @include after {
- background-position: 0 0, 100% 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;
- @include z-index(over);
- }
- }
-
  &__container {
  overflow: auto;
  @include padding-top(var(--table-offset));
@@ -37,6 +28,35 @@
  &--fixed {
  position: sticky;
  left: 0;
+ @include z-index(over);
+
+ #{ns(checkbox-group)} {
+ & + * {
+ @include margin-left(2v);
+ }
+
+ #{ns(label)} {
+ color: transparent;
+ @include size(0);
+ pointer-events: none;
+
+ @include preference.forced-colors {
+ opacity: 0;
+ }
+
+ &::before {
+ left: spacing.space(-5v);
+ }
+ }
+
+ input[type="checkbox"] {
+ left: spacing.space(1v);
+ }
+ }
+
+ @include preference.forced-colors {
+ outline: 1px solid;
+ }
  }
 
  &--center {
@@ -129,10 +149,22 @@
 
  th {
  @include font-weight(bold);
+
+ &[role='columnheader'] {
+ background-size: 100% 1px, 1px 100%;
+ background-repeat: no-repeat, no-repeat;
+ background-position: 0 100%, 100% 0;
+ }
  }
  }
 
  tbody {
+ th {
+ background-size: 100% 1px, 1px 100%;
+ background-repeat: no-repeat, no-repeat;
+ background-position: 0 100%, 100% 0;
+ }
+
  tr:first-child[aria-selected=true]:has(+ tr:not([aria-selected=true])),
  tr:not([aria-selected=true]) + tr:last-child[aria-selected=true],
  tr:not([aria-selected=true]) + tr[aria-selected=true]:has(+ tr:not([aria-selected=true])) {
@@ -220,36 +252,6 @@
  }
  }
  }
-
- #{ns(cell--fixed)} {
- #{ns(checkbox-group)} {
- & + * {
- @include margin-left(2v);
- }
-
- #{ns(label)} {
- color: transparent;
- @include size(0);
- pointer-events: none;
-
- @include preference.forced-colors {
- opacity: 0;
- }
-
- &::before {
- left: spacing.space(-5v);
- }
- }
-
- input[type="checkbox"] {
- left: spacing.space(1v);
- }
- }
-
- @include preference.forced-colors {
- outline: 1px solid;
- }
- }
  }
 
  caption {
@@ -279,8 +281,10 @@
 
  @include after('', block) {
  @include absolute(var(--table-offset), null, null, 0, 100%, calc(100% - var(--table-offset)));
- background-position: 0 0, 0 100%, 100% 100%, 100% 0;
+ @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;
  }
  }

diff --git a/src/component/table/style/module/_shadow.scss b/src/component/table/style/module/_shadow.scss
diff --git a/src/component/tooltip/.package.yml b/src/component/tooltip/.package.yml
@@ -13,3 +13,5 @@ example:
  - share
  - input
  - table
+ script:
+ - table