From e7d5a0f1f07e93be39209b320987dd93c590ea76 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Tue, 19 Oct 2021 17:36:19 +0200 Subject: [PATCH 01/20] feat(tables): Adding striped rows to tables Signed-off-by: louismaximepiton --- scss/_tables.scss | 61 ++- scss/_variables.scss | 40 +- scss/mixins/_table-row.scss | 3 - scss/mixins/_table-variants.scss | 12 +- site/content/docs/5.2/content/tables.md | 547 ++++++++++++++++++++---- site/layouts/shortcodes/table.html | 22 +- 6 files changed, 578 insertions(+), 107 deletions(-) delete mode 100644 scss/mixins/_table-row.scss diff --git a/scss/_tables.scss b/scss/_tables.scss index bca34b16e4..810d820a1f 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -6,7 +6,11 @@ --#{$prefix}table-color: #{$table-color}; --#{$prefix}table-bg: #{$table-bg}; --#{$prefix}table-border-color: #{$table-border-color}; - // Boosted mod: no table-accent-bg + --#{$prefix}table-accent-bg: #{$table-accent-bg}; + --#{$prefix}table-striped-color: #{$table-striped-color}; + --#{$prefix}table-striped-bg: #{$table-striped-bg}; + --#{$prefix}table-striped-hover-color: #{$table-striped-color}; // Boosted mod + --#{$prefix}table-striped-hover-bg: #{$table-striped-hover-bg}; // Boosted mod --#{$prefix}table-active-color: #{$table-active-color}; --#{$prefix}table-active-bg: #{$table-active-bg}; --#{$prefix}table-hover-color: #{$table-hover-color}; @@ -48,12 +52,18 @@ > tbody { vertical-align: inherit; } + + > thead { + vertical-align: bottom; + } } .table-group-divider { border-top: ($table-border-width * 2) solid $table-group-separator-color; } +// Boosted mod : no table-group-divider. + // // Change placement of captions with a class // @@ -78,7 +88,19 @@ // Boosted mod: no .table-borderless -// Boosted mod: no .table-striped +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +// For rows +.table-striped { + > tbody > tr:nth-of-type(#{$table-striped-order}) > * { + --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); + color: var(--#{$prefix}table-striped-color); + } +} + +// Boosted mod : no .table-striped-columns // Active table // @@ -98,10 +120,43 @@ --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg); color: var(--#{$prefix}table-hover-color); } + + // Boosted mod + &.table-striped > tbody > tr:hover > * { + --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-hover-bg); + color: var(--#{$prefix}table-striped-hover-color); + } +} + +.table-height-sm { + max-height: $table-height-sm; + overflow: auto; +} + +.table-height-md { + max-height: $table-height-md; + overflow: auto; } +.table-height-lg { + max-height: $table-height-lg; + overflow: auto; +} + +.table-sticky > thead > tr { + position: sticky; + top: 0; + z-index: 2; + border-width: 0; -// Boosted mod: no table-row-variants + // Redraw the border-bottom, otherwise it doesn't stick. + > th { // stylelint-disable-line + $border-bottom-thead: subtract(100%, ($table-border-width * 2)); + background: linear-gradient(transparent 0%, transparent $border-bottom-thead, var(--#{$prefix}table-border-color) $border-bottom-thead, var(--#{$prefix}table-border-color) 100%); + background-color: var(--#{$prefix}table-bg); + } +} +// End mod // Table variants set the table cell backgrounds, border colors // and the colors of the striped, hovered & active tables diff --git a/scss/_variables.scss b/scss/_variables.scss index e3e8bb2afd..bba3c94c14 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -792,29 +792,47 @@ $table-line-height: 1.25 !default; // Boosted mod $table-color: var(--#{$prefix}body-color) !default; $table-bg: $body-bg !default; -// Boosted mod: no $table-accent-bg +$table-accent-bg: transparent !default; + +$table-height-sm: $spacer * 10 !default; // Boosted mod +$table-height-md: $spacer * 20 !default; // Boosted mod +$table-height-lg: $spacer * 30 !default; // Boosted mod $table-th-font-weight: null !default; -$table-active-color: $table-color !default; -$table-active-bg-factor: .1 !default; -$table-active-bg: rgba($black, $table-active-bg-factor) !default; +$table-striped-color: $table-color !default; +$table-striped-bg-factor: .065 !default; +$table-striped-bg: rgba($black, $table-striped-bg-factor) !default; +$table-striped-hover-bg-factor: .4 !default; // Boosted mod +$table-striped-hover-bg: rgba($black, $table-striped-hover-bg-factor) !default; // Boosted mod +$table-variant-striped-bg-factor: .2 !default; // Boosted mod +$table-variant-striped-hover-bg-factor: .87 !default; // Boosted mod + +$table-active-color: $table-color !default; +$table-active-bg-factor: .13 !default; +$table-active-bg: rgba($black, $table-active-bg-factor) !default; +$table-variant-active-bg-factor: .6 !default; // Boosted mod -$table-hover-color: $table-color !default; -$table-hover-bg-factor: .065 !default; -$table-hover-bg: rgba($black, $table-hover-bg-factor) !default; +$table-hover-color: $table-color !default; +$table-hover-bg-factor: .065 !default; +$table-hover-bg: rgba($black, $table-hover-bg-factor) !default; +$table-variant-hover-bg-factor: .2 !default; // Boosted mod -$table-border-factor: .4 !default; -$table-border-width: $border-width * .5 !default; // Boosted mod -$table-border-color: $gray-500 !default; // Boosted mod +$table-border-factor: .4 !default; +$table-border-width: $border-width * .5 !default; // Boosted mod +$table-border-color: $gray-500 !default; // Boosted mod -// Boosted mod: no $table-striped-* +$table-striped-order: odd !default; + +// Boosted mod: no $table-striped-columns $table-group-separator-color: currentcolor !default; $table-caption-color: var(--#{$boosted-prefix}caption-color, $black) !default; // Boosted mod $table-caption-color-dark: $white !default; // Boosted mod $table-caption-padding-y: .75rem !default; // Boosted mod + +// Boosted mod: no $table-bg-scale // scss-docs-end table-variables // scss-docs-start table-loop diff --git a/scss/mixins/_table-row.scss b/scss/mixins/_table-row.scss deleted file mode 100644 index 385803d5aa..0000000000 --- a/scss/mixins/_table-row.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Tables - -// Boosted mod: no table-row-variants diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss index c9b3b2a242..8ce7ea3251 100644 --- a/scss/mixins/_table-variants.scss +++ b/scss/mixins/_table-variants.scss @@ -1,15 +1,21 @@ -// Boosted mod: striped is not handled by table-variant() +// Boosted mod: Variants have a brand different :hover and :striped management // scss-docs-start table-variant @mixin table-variant($state, $background) { .table-#{$state} { $color: color-contrast(opaque($body-bg, $background)); - $hover-bg: mix($color, $background, percentage($table-hover-bg-factor)); - $active-bg: mix($color, $background, percentage($table-active-bg-factor)); + $hover-bg: mix($color, $background, percentage($table-variant-hover-bg-factor)); + $striped-bg: mix($color, $background, percentage($table-variant-striped-bg-factor)); + $striped-hover-bg: mix($color, $background, percentage($table-variant-striped-hover-bg-factor)); // Boosted mod + $active-bg: mix($color, $background, percentage($table-variant-active-bg-factor)); $border-color: mix($color, $background, percentage($table-border-factor)); --#{$prefix}table-color: #{$color}; --#{$prefix}table-bg: #{$background}; --#{$prefix}table-border-color: #{$border-color}; + --#{$prefix}table-striped-bg: #{$striped-bg}; + --#{$prefix}table-striped-color: #{color-contrast($striped-bg)}; + --#{$prefix}table-striped-hover-bg: #{$striped-hover-bg}; // Boosted mod + --#{$prefix}table-striped-hover-color: #{color-contrast($striped-hover-bg)}; // Boosted mod --#{$prefix}table-active-bg: #{$active-bg}; --#{$prefix}table-active-color: #{color-contrast($active-bg)}; --#{$prefix}table-hover-bg: #{$hover-bg}; diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 4d7bab4c76..fc9cab7421 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -12,7 +12,22 @@ Due to the widespread use of `` elements across third-party widgets like Using the most basic table markup, here's how `.table`-based tables look in Boosted. -{{< table class="table" simplified="false" >}} +{{< table class="table" simplified="false" aria="Boosted tables basic look - table with one level of column header" >}} + +## Accessibility + +For the table's accessibility, there are four main rules. + +The first rule is about keyboard users. To make it accessible for every users, add `tabindex="0"` attribute to the `div` tag or to the `table` tag at least. + +The second rule is to give a role to the table. To do it, add `role="region"` to the `div` tag. + +The third one is about the readability of the table itself. Add `scope="col"` or `scope="row"` attribute to the tags when needed. + +To complete the rules, if the `caption` isn't there or isn't enough to describe, add an `aria-label` attribute to describe the table. The `aria-label` should match the following pattern : `aria-label="Table's data description - Table's metadata description (e.g. : table with one level of column header)"`. +Otherwise, if the caption is enough add an `aria-labelledby="idCaption"` to describe the table. + +See [more about the tables structures](https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#structurer-les-tableaux-de-donnees). ## Variants @@ -20,6 +35,7 @@ Using the most basic table markup, here's how `.table`-based tables look in Boos Use contextual class to color tables, table rows or individual cells.
+
@@ -42,6 +58,7 @@ Use contextual class to color tables, table rows or individual cells.
+ {{< highlight html >}} @@ -62,19 +79,40 @@ Use contextual class to color tables, table rows or individual cells. ## Accented tables +### Striped rows + +Use `.table-striped` to add zebra-striping to any table row within the ``. + +{{< table class="table table-striped" aria="Bootstrap's developers - table with one level of row and column header" >}} + +These classes can also be added to table variants: + +{{< table class="table table-dark table-striped" aria="Bootstrap's developers - table with one level of row and column header" >}} + + + + + ### Hoverable rows Add `.table-hover` to enable a hover state on table rows within a ``. -{{< table class="table table-hover" >}} +{{< table class="table table-hover" aria="Bootstrap's developers - table with one level of row and column header" >}} + +{{< table class="table table-dark table-hover" aria="Bootstrap's developers - table with one level of row and column header" >}} + +These hoverable rows can also be combined with the striped rows variant: + +{{< table class="table table-striped table-hover" aria="Bootstrap's developers - table with one level of row and column header" >}} -{{< table class="table table-dark table-hover" >}} +{{< table class="table table-dark table-striped table-hover" aria="Bootstrap's developers - table with one level of row and column header" >}} ### Active tables Highlight a table row or cell by adding a `.table-active` class.
+
@@ -105,8 +143,10 @@ Highlight a table row or cell by adding a `.table-active` class.
+
```html +
... @@ -125,9 +165,11 @@ Highlight a table row or cell by adding a `.table-active` class.
+
```
+
@@ -158,8 +200,10 @@ Highlight a table row or cell by adding a `.table-active` class.
+
```html +
... @@ -178,15 +222,16 @@ Highlight a table row or cell by adding a `.table-active` class.
+
``` ## How do the variants and accented tables work? -For the accented tables ([hoverable rows](#hoverable-rows) and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): +For the accented tables (([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows) and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds. - Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow. -- When either `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. +- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, the `--bs-table-accent-bg` is set to a semitransparent color to colorize the background. - For each table variant, we generate a `--bs-table-accent-bg` color with the highest contrast depending on that color. For example, the accent color for `.table-dark` has a lighter accent color. - Text and border colors are generated the same way, and their colors are inherited by default. @@ -194,13 +239,17 @@ Behind the scenes it looks like this: {{< scss-docs name="table-variant" file="scss/mixins/_table-variants.scss" >}} + + ## Small tables Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half. -{{< table class="table table-sm" >}} +{{< table class="table table-sm" aria="Bootstrap's developers - table with one level of row and column header" >}} + +{{< table class="table table-dark table-sm" aria="Bootstrap's developers - table with one level of row and column header" >}} -{{< table class="table table-dark table-sm" >}} + ## Table group dividers @@ -243,7 +292,7 @@ Add a thicker border, darker between table groups—``, ``, and `< Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
-
+
@@ -278,7 +327,7 @@ Table cells of `` are always vertical aligned to the bottom. Table cells ```html -
+
@@ -308,7 +357,8 @@ Table cells of `` are always vertical aligned to the bottom. Table cells Border styles, active styles, and table variants are not inherited by nested tables.
-
+
+
@@ -326,7 +376,7 @@ Border styles, active styles, and table variants are not inherited by nested tab `s as direct children of a table, those `` will be ## Anatomy + + ### Captions A `
#
- +
@@ -363,9 +413,11 @@ Border styles, active styles, and table variants are not inherited by nested tab
Header
+ ```html - +
+
... @@ -373,7 +425,7 @@ Border styles, active styles, and table variants are not inherited by nested tab ... @@ -381,6 +433,7 @@ Border styles, active styles, and table variants are not inherited by nested tab ...
- +
...
+ ``` ## How nesting works @@ -391,80 +444,60 @@ Note that if you add `
` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. -{{< example >}} - - +
+
+
List of users
+ + {{< partial "table-content" >}} +
List of users
+ + + +```html +
+ + - - - - - - + ... - - - - - - - - - - - - - - - - - - + ...
List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{{< /example >}} +
+``` You can also put the `` on the bottom of the table with `.caption-bottom`. -{{< example >}} +
+
+ + + {{< partial "table-content" >}} +
+
+
+ +```html +
- + - - - - - - + ... - - - - - - - - - - - - - - - - - - + ...
List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{{< /example >}} +
+``` ## Responsive tables @@ -480,8 +513,8 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. -{{< example >}} -
+
+
@@ -537,10 +570,10 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
-{{< /example >}} +
```html -
+
...
@@ -557,7 +590,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{ range $.Site.Data.breakpoints }} {{ if not (eq . "xs") }}
-
+
@@ -618,7 +651,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< tables.inline >}} {{- range $.Site.Data.breakpoints -}} {{- if not (eq . "xs") }} -
+
...
@@ -628,6 +661,357 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< /tables.inline >}} {{< /highlight >}} +## Sizing + +### Sizes + +Use `.table-height-{sm|md|lg}` on the container of the table to limit the height of the table. Up to the limited height, the table will overflow its content. Add the attribute `tabindex="0"` for the accessibility on all browsers. + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
+
+
+ +```html +
+ + ... +
+
+
+ + ... +
+
+
+ + ... +
+
+``` + +### Sticky thead + +Add `.table-sticky` to the table element in order to have the first row sticking to the top of the table. The sticky effect has no effect on a non-scrollable table. + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
+
+
+ +```html +
+ + ... +
+
+``` + +Works also with variants : + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
+
+
+ +```html +
+ + ... +
+
+``` + ## Rich content tables ### Row selection @@ -639,7 +1023,7 @@ Add a [`.form-check` div]({{< docsref "/forms/checks-radios#checks" >}}) within The selection behavior isn't implemented yet. This feature will be delivered with [#410]({{< param repo >}}/issues/410) as an example. {{< /callout >}} -
+
@@ -653,7 +1037,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit - + @@ -775,7 +1159,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit ```html -
+
Column header Column headerColumn header Column header Column header
@@ -803,10 +1187,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit - - - - + ... ... @@ -837,7 +1218,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit Use SVG to display thumbnails or icons in your table data cell elements. -
+
Cell textCell textCell textCell text
@@ -1037,7 +1418,7 @@ Use SVG to display thumbnails or icons in your table data cell elements. ``` -
+
diff --git a/site/layouts/shortcodes/table.html b/site/layouts/shortcodes/table.html index a98b5eb899..7f3c6b5ecf 100644 --- a/site/layouts/shortcodes/table.html +++ b/site/layouts/shortcodes/table.html @@ -8,9 +8,13 @@ {{- $class := .Get "class" -}} {{- $simplified := .Get "simplified" | default true -}} +{{- $tabindex := .Get "tabindex" | default 0 -}} +{{- $aria := .Get "aria" | default "" -}} {{- $table_attributes := "" -}} {{- $table_content := " ...\n" -}} +{{- $table_tabindex := " tabindex=\"0\"" -}} +{{- $table_aria := "" -}} {{- with $class -}} {{- $table_attributes = printf ` class="%s"` . -}} @@ -20,12 +24,22 @@ {{- $table_content = partialCached "table-content" . -}} {{- end -}} -{{- $table := printf "\n%s
" $table_attributes $table_content -}} +{{- with $tabindex -}} + {{- $table_tabindex = printf ` tabindex="%i"` . -}} +{{- end -}} + +{{- with $aria -}} + {{- $table_aria = printf ` aria-label="%s"` . -}} +{{- end -}} + +{{- $table := printf "
\n\n%s
\n" $table_tabindex $table_aria $table_attributes $table_content -}}
- - {{ partialCached "table-content" . }} - +
+ + {{ partialCached "table-content" . }} + +
{{- highlight $table "html" "" -}} From 5d93c430b2d4a766bc8d41a87114c38620b5ca07 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 27 Apr 2022 14:28:42 +0200 Subject: [PATCH 02/20] Adding striped columns to tables --- scss/_tables.scss | 8 ++++++++ scss/_variables.scss | 3 +-- site/content/docs/5.2/content/tables.md | 8 +++++++- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index 810d820a1f..3b15d32da2 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -100,6 +100,14 @@ } } +// For columns +.table-striped-columns { + > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) { + --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-bg); + color: var(--#{$prefix}table-striped-color); + } +} + // Boosted mod : no .table-striped-columns // Active table diff --git a/scss/_variables.scss b/scss/_variables.scss index bba3c94c14..5612304206 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -823,8 +823,7 @@ $table-border-width: $border-width * .5 !default; // Boosted $table-border-color: $gray-500 !default; // Boosted mod $table-striped-order: odd !default; - -// Boosted mod: no $table-striped-columns +$table-striped-columns-order: even !default; $table-group-separator-color: currentcolor !default; diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index fc9cab7421..9c30556ea0 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -85,11 +85,17 @@ Use `.table-striped` to add zebra-striping to any table row within the `` {{< table class="table table-striped" aria="Bootstrap's developers - table with one level of row and column header" >}} +### Striped columns + +Use .table-striped-columns to add zebra-striping to any table column. + +{{< table class="table table-striped-columns" aria="Bootstrap's developers - table with one level of row and column header" >}} + These classes can also be added to table variants: {{< table class="table table-dark table-striped" aria="Bootstrap's developers - table with one level of row and column header" >}} - +{{< table class="table table-dark table-striped-columns" aria="Bootstrap's developers - table with one level of row and column header" >}} From b6255bf6ccee7f18c89f4ff1a13e247f7965bc10 Mon Sep 17 00:00:00 2001 From: Isabelle Chanclou Date: Tue, 3 May 2022 17:02:55 +0200 Subject: [PATCH 03/20] Add accessibility to Table group dividers example Signed-off-by: Isabelle Chanclou --- site/content/docs/5.2/content/tables.md | 110 ++++++++++++------------ 1 file changed, 56 insertions(+), 54 deletions(-) diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 9c30556ea0..9df19e0778 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -118,7 +118,7 @@ These hoverable rows can also be combined with the striped rows variant: Highlight a table row or cell by adding a `.table-active` class.
-
+
@@ -262,35 +262,37 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` Add a thicker border, darker between table groups—``, ``, and ``—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time). {{< example >}} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
+
{{< /example >}} ## Vertical alignment @@ -363,7 +365,7 @@ Table cells of `` are always vertical aligned to the bottom. Table cells Border styles, active styles, and table variants are not inherited by nested tables.
-
+
@@ -422,7 +424,7 @@ Border styles, active styles, and table variants are not inherited by nested tab ```html -
+
... @@ -457,7 +459,7 @@ Note that if you add ``s as direct children of a table, those `` will be A `
` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
-
+
{{< partial "table-content" >}} @@ -466,7 +468,7 @@ A ``s as direct children of a table, those `` will be A ` + {{ partialCached "table-content" . }} +
List of users` functions like a heading for a table. It helps users with screen r ```html -
+
@@ -483,7 +485,7 @@ A ``, ``, and `< Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `
List of users ` functions like a heading for a table. It helps users with screen r You can also put the `` on the bottom of the table with `.caption-bottom`.
-
+
{{< partial "table-content" >}} @@ -492,7 +494,7 @@ You can also put the ``, ``, and ``—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time). {{< example >}} -
-
` on the bottom of the table with `.caption-botto ```html -
+
@@ -520,7 +522,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
-
+
@@ -579,7 +581,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl ```html -
+
...
@@ -596,7 +598,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{ range $.Site.Data.breakpoints }} {{ if not (eq . "xs") }}
-
+
@@ -657,7 +659,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< tables.inline >}} {{- range $.Site.Data.breakpoints -}} {{- if not (eq . "xs") }} -
+
...
@@ -674,7 +676,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab Use `.table-height-{sm|md|lg}` on the container of the table to limit the height of the table. Up to the limited height, the table will overflow its content. Add the attribute `tabindex="0"` for the accessibility on all browsers.
-
+
@@ -720,7 +722,7 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height
-
+
@@ -790,7 +792,7 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height
-
+
@@ -885,17 +887,17 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height ```html -
+
...
-
+
...
-
+
...
@@ -907,7 +909,7 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height Add `.table-sticky` to the table element in order to have the first row sticking to the top of the table. The sticky effect has no effect on a non-scrollable table.
-
+
@@ -954,7 +956,7 @@ Add `.table-sticky` to the table element in order to have the first row sticking ```html -
+
...
@@ -964,7 +966,7 @@ Add `.table-sticky` to the table element in order to have the first row sticking Works also with variants :
-
+
@@ -1011,7 +1013,7 @@ Works also with variants : ```html -
+
...
@@ -1029,7 +1031,7 @@ Add a [`.form-check` div]({{< docsref "/forms/checks-radios#checks" >}}) within The selection behavior isn't implemented yet. This feature will be delivered with [#410]({{< param repo >}}/issues/410) as an example. {{< /callout >}} -
+
@@ -1165,7 +1167,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit ```html -
+
@@ -1224,7 +1226,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit Use SVG to display thumbnails or icons in your table data cell elements. -
+
@@ -1424,7 +1426,7 @@ Use SVG to display thumbnails or icons in your table data cell elements. ``` -
+
From 3eaac4873d5ff359639ea139143bfa53485a44ac Mon Sep 17 00:00:00 2001 From: Isabelle Chanclou Date: Wed, 4 May 2022 09:14:17 +0200 Subject: [PATCH 04/20] Wording modifications Signed-off-by: Isabelle Chanclou --- site/content/docs/5.2/content/tables.md | 50 ++++++++++++------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 9df19e0778..903f796d64 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -16,16 +16,16 @@ Using the most basic table markup, here's how `.table`-based tables look in Boos ## Accessibility -For the table's accessibility, there are four main rules. +To make a table accessible, you should respect these four main rules: -The first rule is about keyboard users. To make it accessible for every users, add `tabindex="0"` attribute to the `div` tag or to the `table` tag at least. +- add a `tabindex="0"` attribute to the `div` tag or to the `table` tag at least to make a table accessible by keyboard navigation. It will add a tabulation to this element on which to stop when navigating using the keyboard tab key. -The second rule is to give a role to the table. To do it, add `role="region"` to the `div` tag. +- add a `role="region"` attribute to the `div` tag to give a role to the table. -The third one is about the readability of the table itself. Add `scope="col"` or `scope="row"` attribute to the tags when needed. +- add a `scope="col"` or `scope="row"` attribute to the tags when needed to make the content of table readable by screen readers -To complete the rules, if the `caption` isn't there or isn't enough to describe, add an `aria-label` attribute to describe the table. The `aria-label` should match the following pattern : `aria-label="Table's data description - Table's metadata description (e.g. : table with one level of column header)"`. -Otherwise, if the caption is enough add an `aria-labelledby="idCaption"` to describe the table. +- if the table doesn't have a `caption` or if the caption is not enough informative to describe the table, add an `aria-label` attribute to describe the table content. The `aria-label` should match the following pattern: `aria-label="Description of table data - Description of table metadata (e.g.: table with one level of column header)"`. +At the opposite, if the caption is precise enough, add instead an `aria-labelledby="idCaption"` to describe the table. See [more about the tables structures](https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#structurer-les-tableaux-de-donnees). @@ -522,7 +522,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
-
+
@@ -581,7 +581,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl ```html -
+
...
@@ -598,7 +598,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{ range $.Site.Data.breakpoints }} {{ if not (eq . "xs") }}
-
+
@@ -659,7 +659,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< tables.inline >}} {{- range $.Site.Data.breakpoints -}} {{- if not (eq . "xs") }} -
+
...
@@ -673,10 +673,10 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab ### Sizes -Use `.table-height-{sm|md|lg}` on the container of the table to limit the height of the table. Up to the limited height, the table will overflow its content. Add the attribute `tabindex="0"` for the accessibility on all browsers. +Use `.table-height-{sm|md|lg}` on the container of the table to limit the height of the table. Up to the limited height, the table will overflow its content. Add the `tabindex="0"` attribute for the accessibility on all browsers.
-
+
@@ -722,7 +722,7 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height
-
+
@@ -792,7 +792,7 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height
-
+
@@ -887,17 +887,17 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height ```html -
+
...
-
+
...
-
+
...
@@ -909,7 +909,7 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height Add `.table-sticky` to the table element in order to have the first row sticking to the top of the table. The sticky effect has no effect on a non-scrollable table.
-
+
@@ -956,7 +956,7 @@ Add `.table-sticky` to the table element in order to have the first row sticking ```html -
+
...
@@ -966,7 +966,7 @@ Add `.table-sticky` to the table element in order to have the first row sticking Works also with variants :
-
+
@@ -1013,7 +1013,7 @@ Works also with variants : ```html -
+
...
@@ -1031,7 +1031,7 @@ Add a [`.form-check` div]({{< docsref "/forms/checks-radios#checks" >}}) within The selection behavior isn't implemented yet. This feature will be delivered with [#410]({{< param repo >}}/issues/410) as an example. {{< /callout >}} -
+
@@ -1167,7 +1167,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit ```html -
+
@@ -1226,7 +1226,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit Use SVG to display thumbnails or icons in your table data cell elements. -
+
@@ -1426,7 +1426,7 @@ Use SVG to display thumbnails or icons in your table data cell elements. ``` -
+
From fa6a8ff78fa0569105c847bd932d714ae57f9ef8 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 4 Jul 2022 15:47:29 +0200 Subject: [PATCH 05/20] a11y concerns --- site/content/docs/5.2/content/tables.md | 417 ++++++++++++------------ site/layouts/shortcodes/table.html | 29 +- 2 files changed, 224 insertions(+), 222 deletions(-) diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 903f796d64..dacc12b0bd 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -12,20 +12,17 @@ Due to the widespread use of `
` elements across third-party widgets like Using the most basic table markup, here's how `.table`-based tables look in Boosted. -{{< table class="table" simplified="false" aria="Boosted tables basic look - table with one level of column header" >}} +{{< table class="table" simplified="false" caption="Boosted tables basic look" >}} ## Accessibility -To make a table accessible, you should respect these four main rules: +To make a table accessible, you should respect these three main rules: -- add a `tabindex="0"` attribute to the `div` tag or to the `table` tag at least to make a table accessible by keyboard navigation. It will add a tabulation to this element on which to stop when navigating using the keyboard tab key. - -- add a `role="region"` attribute to the `div` tag to give a role to the table. +- If the table is an important one, add a `role="region"` attribute to help screen readers. - add a `scope="col"` or `scope="row"` attribute to the tags when needed to make the content of table readable by screen readers -- if the table doesn't have a `caption` or if the caption is not enough informative to describe the table, add an `aria-label` attribute to describe the table content. The `aria-label` should match the following pattern: `aria-label="Description of table data - Description of table metadata (e.g.: table with one level of column header)"`. -At the opposite, if the caption is precise enough, add instead an `aria-labelledby="idCaption"` to describe the table. +- add a ``. -{{< table class="table table-striped" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-striped" caption="Boosted striped rows table" >}} ### Striped columns Use .table-striped-columns to add zebra-striping to any table column. -{{< table class="table table-striped-columns" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-striped-columns" caption="Boosted striped columns table" >}} These classes can also be added to table variants: -{{< table class="table table-dark table-striped" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-dark table-striped" caption="Boosted dark striped rows table" >}} -{{< table class="table table-dark table-striped-columns" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-dark table-striped-columns" caption="Boosted dark striped columns table" >}} @@ -103,23 +99,23 @@ These classes can also be added to table variants: Add `.table-hover` to enable a hover state on table rows within a ``. -{{< table class="table table-hover" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-hover" caption="Boosted hoverable table" >}} -{{< table class="table table-dark table-hover" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-dark table-hover" caption="Boosted hoverable dark table" >}} These hoverable rows can also be combined with the striped rows variant: -{{< table class="table table-striped table-hover" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-striped table-hover" caption="Boosted hoverable striped table" >}} -{{< table class="table table-dark table-striped table-hover" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-dark table-striped table-hover" caption="Boosted hoverable dark striped table" >}} ### Active tables Highlight a table row or cell by adding a `.table-active` class.
-
` on each table. If the table doesn't have a caption or if the caption is not enough informative to describe the table, add an `aria-label` attribute to describe the table content. The `aria-label` should match the following pattern: `aria-label="Description of table data - Description of table metadata (e.g.: table with one level of column header)"`. The metadata are mandatory for complex tables. See [more about the tables structures](https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#structurer-les-tableaux-de-donnees). @@ -35,8 +32,8 @@ See [more about the tables structures](https://a11y-guidelines.orange.com/fr/web Use contextual class to color tables, table rows or individual cells.
-
+ @@ -58,7 +55,6 @@ Use contextual class to color tables, table rows or individual cells.
Class
-
{{< highlight html >}} @@ -83,19 +79,19 @@ Use contextual class to color tables, table rows or individual cells. Use `.table-striped` to add zebra-striping to any table row within the `
+ @@ -149,11 +145,10 @@ Highlight a table row or cell by adding a `.table-active` class.
#
-
```html -
+ ... @@ -171,12 +166,11 @@ Highlight a table row or cell by adding a `.table-active` class.
-
```
-
+ @@ -206,11 +200,10 @@ Highlight a table row or cell by adding a `.table-active` class.
#
-
```html -
+ ... @@ -228,7 +221,6 @@ Highlight a table row or cell by adding a `.table-active` class.
-
``` ## How do the variants and accented tables work? @@ -251,9 +243,9 @@ Behind the scenes it looks like this: Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half. -{{< table class="table table-sm" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-sm" caption="Boosted small table" >}} -{{< table class="table table-dark table-sm" aria="Bootstrap's developers - table with one level of row and column header" >}} +{{< table class="table table-dark table-sm" caption="Boosted dark small table" >}} @@ -262,37 +254,36 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` Add a thicker border, darker between table groups—`
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
{{< /example >}} ## Vertical alignment @@ -300,8 +291,9 @@ Add a thicker border, darker between table groups—`
` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
-
+
+ @@ -335,8 +327,9 @@ Table cells of `` are always vertical aligned to the bottom. Table cells ```html -
+
Heading 1
+ ... @@ -365,67 +358,67 @@ Table cells of `` are always vertical aligned to the bottom. Table cells Border styles, active styles, and table variants are not inherited by nested tables.
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle
1MarkOtto@mdo
- - - - - - - - - - - - - - - - - - - - - - - - - -
HeaderHeaderHeader
AFirstLast
BFirstLast
CFirstLast
-
3Larrythe Bird@twitter
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
#FirstLastHandle
1MarkOtto@mdo
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
AFirstLast
BFirstLast
CFirstLast
+
3Larrythe Bird@twitter
```html -
+ ... @@ -433,7 +426,8 @@ Border styles, active styles, and table variants are not inherited by nested tab ... @@ -441,7 +435,6 @@ Border styles, active styles, and table variants are not inherited by nested tab ...
- +
+ ...
-
``` ## How nesting works @@ -459,18 +452,15 @@ Note that if you add `
` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
-
- - - {{< partial "table-content" >}} -
List of users
-
+ + + {{< partial "table-content" >}} +
List of users
```html -
- + ... @@ -478,25 +468,21 @@ A `
List of usersList of users ` functions like a heading for a table. It helps users with screen r ...
-
``` You can also put the `` on the bottom of the table with `.caption-bottom`.
-
- - - {{< partial "table-content" >}} -
-
+ + + {{< partial "table-content" >}} +
List of users
```html -
- + ... @@ -504,7 +490,6 @@ You can also put the `
List of users ` on the bottom of the table with `.caption-botto ...
-
``` ## Responsive tables @@ -522,8 +507,9 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
-
+
+ @@ -581,8 +567,9 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl ```html -
+
#
+ ...
@@ -598,8 +585,9 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{ range $.Site.Data.breakpoints }} {{ if not (eq . "xs") }}
-
+
+ @@ -659,8 +647,9 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< tables.inline >}} {{- range $.Site.Data.breakpoints -}} {{- if not (eq . "xs") }} -
+
#
+ ...
@@ -673,11 +662,12 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab ### Sizes -Use `.table-height-{sm|md|lg}` on the container of the table to limit the height of the table. Up to the limited height, the table will overflow its content. Add the `tabindex="0"` attribute for the accessibility on all browsers. +Use `.table-height-{sm|md|lg}` on the container of the table to limit the height of the table. Up to the limited height, the table will overflow its content.
-
+
+ @@ -722,8 +712,9 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height
-
+
Header
+ @@ -792,8 +783,9 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height
-
+
Header
+ @@ -887,18 +879,21 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height ```html -
+
Header
+ ...
-
+
+ ...
-
+
+ ...
@@ -909,8 +904,9 @@ Use `.table-height-{sm|md|lg}` on the container of the table to limit the height Add `.table-sticky` to the table element in order to have the first row sticking to the top of the table. The sticky effect has no effect on a non-scrollable table.
-
+
+ @@ -956,8 +952,9 @@ Add `.table-sticky` to the table element in order to have the first row sticking ```html -
+
Header
+ ...
@@ -966,8 +963,9 @@ Add `.table-sticky` to the table element in order to have the first row sticking Works also with variants :
-
+
+ @@ -1013,8 +1011,9 @@ Works also with variants : ```html -
+
Header
+ ...
@@ -1031,8 +1030,9 @@ Add a [`.form-check` div]({{< docsref "/forms/checks-radios#checks" >}}) within The selection behavior isn't implemented yet. This feature will be delivered with [#410]({{< param repo >}}/issues/410) as an example. {{< /callout >}} -
+
+
@@ -1167,67 +1167,67 @@ The selection behavior isn't implemented yet. This feature will be delivered wit ```html -
- - - - - - - - - - - - - - ... - - ... - - - - - - - - ... - ... - ... - ... - ... - -
-
- - -
- 		Column headerColumn headerColumn headerColumn header
-
- - -
-
-
- - -
- 		Cell textCell textCell textCell text
-
+ + + + + + + + + + + + + + + ... + + ... + + + + + + + + ... + ... + ... + ... + ... + +
+
+ + +
+ 		Column headerColumn headerColumn headerColumn header
+
+ + +
+
+
+ + +
+ 		Cell textCell textCell textCell text
``` ### With icons or thumbnails Use SVG to display thumbnails or icons in your table data cell elements. -
+
+
@@ -1426,8 +1426,9 @@ Use SVG to display thumbnails or icons in your table data cell elements. ``` -
+
+ diff --git a/site/layouts/shortcodes/table.html b/site/layouts/shortcodes/table.html index 7f3c6b5ecf..34a926e531 100644 --- a/site/layouts/shortcodes/table.html +++ b/site/layouts/shortcodes/table.html @@ -4,17 +4,19 @@ `args` are optional and can be one of the following: * class: any class(es) to be added to the `table` - default "" * simplified: show a simplified version in the examples - default `true` + * caption: content of the `caption` - default "" + * caption_hide: if the caption should be shown or not - default `true` */ -}} {{- $class := .Get "class" -}} {{- $simplified := .Get "simplified" | default true -}} -{{- $tabindex := .Get "tabindex" | default 0 -}} -{{- $aria := .Get "aria" | default "" -}} +{{- $caption_hide := .Get "caption_hide" | default true -}} +{{- $caption := .Get "caption" | default "" -}} {{- $table_attributes := "" -}} {{- $table_content := " ...\n" -}} -{{- $table_tabindex := " tabindex=\"0\"" -}} -{{- $table_aria := "" -}} +{{- $table_caption_attributes := "" -}} +{{- $table_caption := "..." -}} {{- with $class -}} {{- $table_attributes = printf ` class="%s"` . -}} @@ -24,22 +26,21 @@ {{- $table_content = partialCached "table-content" . -}} {{- end -}} -{{- with $tabindex -}} - {{- $table_tabindex = printf ` tabindex="%i"` . -}} +{{- with $caption -}} + {{- $table_caption = printf `%s` . -}} {{- end -}} -{{- with $aria -}} - {{- $table_aria = printf ` aria-label="%s"` . -}} +{{- if eq $caption_hide true -}} + {{- $table_caption_attributes = printf ` class="visually-hidden"` -}} {{- end -}} -{{- $table := printf "
\n\n%s
Column header
\n
" $table_tabindex $table_aria $table_attributes $table_content -}} +{{- $table := printf "\n\n %s\n%s
\n" $table_attributes $table_caption_attributes $table_caption $table_content -}}
-
- - {{ partialCached "table-content" . }} -
-
+ +
{{- highlight $table "html" "" -}} From 96aa25001e38f2cd61be500164168e21cfbfb7a2 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 10 Aug 2022 14:19:52 +0200 Subject: [PATCH 06/20] change to be closer to Bootstrap' branch --- scss/_tables.scss | 24 +- scss/_variables.scss | 4 - site/content/docs/5.2/content/tables.md | 423 ++++-------------------- 3 files changed, 66 insertions(+), 385 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index 3b15d32da2..76e5c48600 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -40,7 +40,7 @@ box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg); } - > thead > tr { + > thead:not(.thead-sticky) > tr { border-bottom-width: $table-border-width * 2; } @@ -136,29 +136,13 @@ } } -.table-height-sm { - max-height: $table-height-sm; - overflow: auto; -} - -.table-height-md { - max-height: $table-height-md; - overflow: auto; -} - -.table-height-lg { - max-height: $table-height-lg; - overflow: auto; -} - -.table-sticky > thead > tr { +.thead-sticky { position: sticky; top: 0; - z-index: 2; - border-width: 0; + z-index: 5; // Redraw the border-bottom, otherwise it doesn't stick. - > th { // stylelint-disable-line + > * > th { $border-bottom-thead: subtract(100%, ($table-border-width * 2)); background: linear-gradient(transparent 0%, transparent $border-bottom-thead, var(--#{$prefix}table-border-color) $border-bottom-thead, var(--#{$prefix}table-border-color) 100%); background-color: var(--#{$prefix}table-bg); diff --git a/scss/_variables.scss b/scss/_variables.scss index 5612304206..0158d0ff84 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -794,10 +794,6 @@ $table-color: var(--#{$prefix}body-color) !default; $table-bg: $body-bg !default; $table-accent-bg: transparent !default; -$table-height-sm: $spacer * 10 !default; // Boosted mod -$table-height-md: $spacer * 20 !default; // Boosted mod -$table-height-lg: $spacer * 30 !default; // Boosted mod - $table-th-font-weight: null !default; $table-striped-color: $table-color !default; diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index dacc12b0bd..4f09cef36c 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -492,6 +492,68 @@ You can also put the `
` on the bottom of the table with `.caption-botto
``` +## Sticky table headers + +Add `.thead-sticky` to the table element in order to have the first row sticking to the top of the table. The sticky effect has no effect on a non-scrollable table. + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
+
+
+ +```html +
+ + + ... + ... +
+
+``` + ## Responsive tables Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`. @@ -658,367 +720,6 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{< /tables.inline >}} {{< /highlight >}} -## Sizing - -### Sizes - -Use `.table-height-{sm|md|lg}` on the container of the table to limit the height of the table. Up to the limited height, the table will overflow its content. - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
-
-
- -```html -
- - - ... -
-
-
- - - ... -
-
-
- - - ... -
-
-``` - -### Sticky thead - -Add `.table-sticky` to the table element in order to have the first row sticking to the top of the table. The sticky effect has no effect on a non-scrollable table. - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
-
-
- -```html -
- - - ... -
-
-``` - -Works also with variants : - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HeaderHeaderHeaderHeader
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
CellCellCellCell
-
-
- -```html -
- - - ... -
-
-``` - ## Rich content tables ### Row selection From 5ea4cdb817f019a85ba56955bb8ed43c5c4db163 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 16 Nov 2022 15:13:50 +0100 Subject: [PATCH 07/20] Add migration guide --- site/content/docs/5.2/content/tables.md | 2 +- site/content/docs/5.2/migration.md | 26 +++++++++++++++++++++++++ 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index d9930f2298..8877d4b043 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -748,7 +748,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit Column header Column header - Column header + Column header Column header diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index a695061e74..832e89528f 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -29,6 +29,14 @@ If you need more details about the changes, please refer to the [v5.2.2 release] +
  • EN
    • ``` +### Content + +- **Tables** + - Warning Every table now has a caption with `.visually-hidden` on it. Please reflect this modification into your websites. + - New Tables now fully support striped rows and columns. + - New Tables now fully support branded hover on every tables. + - New Tables now fully support sticky `` using `.thead-sticky` on ``. + ### Forms - Warning All forms examples have been modified to add a `.mt-2` to all submit buttons in order to always have 30px between the last form control and the button. Please reflect this modification into your websites. @@ -48,6 +56,11 @@ If you need more details about the changes, please refer to the [v5.2.2 release] New CSS variables:
    • --bs-btn-letter-spacing
      • +
    • --bs-table-accent-bg
      • +
    • --bs-table-striped-color
      • +
    • --bs-table-striped-bg
      • +
    • --bs-table-striped-hover-color
      • +
    • --bs-table-striped-hover-bg
    @@ -57,6 +70,19 @@ If you need more details about the changes, please refer to the [v5.2.2 release]
  • $btn-letter-spacing
  • $btn-letter-spacing-lg
  • $btn-letter-spacing-sm
    • +
  • $table-accent-bg
    • +
  • $table-striped-color
    • +
  • $table-striped-bg-factor
    • +
  • $table-striped-bg
    • +
  • $table-striped-hover-bg-factor
    • +
  • $table-striped-hover-bg
    • +
  • $table-striped-bg
    • +
  • $table-variant-striped-hover-bg-factor
    • +
  • $table-variant-striped-hover-bg
    • +
  • $table-variant-active-bg-factor
    • +
  • $table-variant-hover-bg-factor
    • +
  • $table-striped-order
    • +
  • $table-striped-columns-order
    • From 8fbcf0deee194b40d0128db4cdeca73e5379f449 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 21 Nov 2022 12:29:02 +0100 Subject: [PATCH 08/20] Fix npm run docs --- site/content/docs/5.2/migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index 1646b5a6cb..6478a15c8c 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -29,7 +29,7 @@ If you need more details about the changes, please refer to the [v5.2.2 release] +
  • EN
    • ``` -### Content +### Contents - **Tables** - Warning Every table now has a caption with `.visually-hidden` on it. Please reflect this modification into your websites. From ab774f17e1a3debe0855d55498dab0628af90af1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 21 Nov 2022 12:56:21 +0100 Subject: [PATCH 09/20] Split Boosted mod comment for readability --- scss/_tables.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scss/_tables.scss b/scss/_tables.scss index 76e5c48600..2adbd469c5 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -134,8 +134,10 @@ --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-hover-bg); color: var(--#{$prefix}table-striped-hover-color); } + // End mod } +// Boosted mod .thead-sticky { position: sticky; top: 0; From ccb59ea5aabe01716985767a9c70652fabc31c8e Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 21 Nov 2022 16:33:21 +0100 Subject: [PATCH 10/20] fix(review) --- scss/_tables.scss | 23 +-------- scss/_variables.scss | 7 +-- scss/mixins/_table-variants.scss | 6 +-- site/content/docs/5.2/content/tables.md | 68 ++----------------------- site/content/docs/5.2/migration.md | 1 + site/layouts/shortcodes/table.html | 8 +-- 6 files changed, 15 insertions(+), 98 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index 2adbd469c5..20408788c8 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -9,7 +9,7 @@ --#{$prefix}table-accent-bg: #{$table-accent-bg}; --#{$prefix}table-striped-color: #{$table-striped-color}; --#{$prefix}table-striped-bg: #{$table-striped-bg}; - --#{$prefix}table-striped-hover-color: #{$table-striped-color}; // Boosted mod + --#{$prefix}table-striped-hover-color: #{$table-striped-hover-color}; // Boosted mod --#{$prefix}table-striped-hover-bg: #{$table-striped-hover-bg}; // Boosted mod --#{$prefix}table-active-color: #{$table-active-color}; --#{$prefix}table-active-bg: #{$table-active-bg}; @@ -40,7 +40,7 @@ box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg); } - > thead:not(.thead-sticky) > tr { + > thead > tr { border-bottom-width: $table-border-width * 2; } @@ -62,8 +62,6 @@ border-top: ($table-border-width * 2) solid $table-group-separator-color; } -// Boosted mod : no table-group-divider. - // // Change placement of captions with a class // @@ -108,8 +106,6 @@ } } -// Boosted mod : no .table-striped-columns - // Active table // // The `.table-active` class can be added to highlight rows or cells @@ -137,21 +133,6 @@ // End mod } -// Boosted mod -.thead-sticky { - position: sticky; - top: 0; - z-index: 5; - - // Redraw the border-bottom, otherwise it doesn't stick. - > * > th { - $border-bottom-thead: subtract(100%, ($table-border-width * 2)); - background: linear-gradient(transparent 0%, transparent $border-bottom-thead, var(--#{$prefix}table-border-color) $border-bottom-thead, var(--#{$prefix}table-border-color) 100%); - background-color: var(--#{$prefix}table-bg); - } -} -// End mod - // Table variants set the table cell backgrounds, border colors // and the colors of the striped, hovered & active tables diff --git a/scss/_variables.scss b/scss/_variables.scss index c676b0ec34..a069946766 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -803,22 +803,23 @@ $table-th-font-weight: null !default; $table-striped-color: $table-color !default; $table-striped-bg-factor: .065 !default; $table-striped-bg: rgba($black, $table-striped-bg-factor) !default; +$table-striped-hover-color: $table-color !default; // Boosted mod $table-striped-hover-bg-factor: .4 !default; // Boosted mod $table-striped-hover-bg: rgba($black, $table-striped-hover-bg-factor) !default; // Boosted mod $table-variant-striped-bg-factor: .2 !default; // Boosted mod $table-variant-striped-hover-bg-factor: .87 !default; // Boosted mod $table-active-color: $table-color !default; -$table-active-bg-factor: .13 !default; +$table-active-bg-factor: .13 !default; // Boosted mod $table-active-bg: rgba($black, $table-active-bg-factor) !default; $table-variant-active-bg-factor: .6 !default; // Boosted mod $table-hover-color: $table-color !default; -$table-hover-bg-factor: .065 !default; +$table-hover-bg-factor: .065 !default; // Boosted mod $table-hover-bg: rgba($black, $table-hover-bg-factor) !default; $table-variant-hover-bg-factor: .2 !default; // Boosted mod -$table-border-factor: .4 !default; +$table-border-factor: .4 !default; // Boosted mod $table-border-width: $border-width * .5 !default; // Boosted mod $table-border-color: $gray-500 !default; // Boosted mod diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss index 9b897f27cb..a8ee1cea57 100644 --- a/scss/mixins/_table-variants.scss +++ b/scss/mixins/_table-variants.scss @@ -3,10 +3,10 @@ @mixin table-variant($state, $background) { .table-#{$state} { $color: color-contrast(opaque($body-bg, $background)); - $hover-bg: mix($color, $background, percentage($table-variant-hover-bg-factor)); - $striped-bg: mix($color, $background, percentage($table-variant-striped-bg-factor)); + $hover-bg: mix($color, $background, percentage($table-variant-hover-bg-factor));// Boosted mod + $striped-bg: mix($color, $background, percentage($table-variant-striped-bg-factor)); // Boosted mod $striped-hover-bg: mix($color, $background, percentage($table-variant-striped-hover-bg-factor)); // Boosted mod - $active-bg: mix($color, $background, percentage($table-variant-active-bg-factor)); + $active-bg: mix($color, $background, percentage($table-variant-active-bg-factor)); // Boosted mod $table-border-color: mix($color, $background, percentage($table-border-factor)); --#{$prefix}table-color: #{$color}; diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 8877d4b043..fee58857d3 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -22,11 +22,11 @@ To make a table accessible, you should respect these three main rules: - If the table is an important one, add a `role="region"` attribute to help screen readers. -- add a `scope="col"` or `scope="row"` attribute to the tags when needed to make the content of table readable by screen readers +- add a `scope="col"` or `scope="row"` attribute to the tags when needed to make the content of table readable by screen readers. -- add a `` on each table. If the table doesn't have a caption or if the caption is not enough informative to describe the table, add an `aria-label` attribute to describe the table content. The `aria-label` should match the following pattern: `aria-label="Description of table data - Description of table metadata (e.g.: table with one level of column header)"`. The metadata are mandatory for complex tables. +- add a `` on each table. If the table doesn't have a caption or if the caption is not enough informative to describe the table, add an `aria-label` attribute to describe the table content. The `aria-label` should match the following pattern: `aria-label="Description of table data - Description of table metadata (e.g.: table with one level of column header)"`. The metadata is mandatory for complex tables. -See [more about the tables structures](https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#structurer-les-tableaux-de-donnees). +See [more information about the tables structures](https://a11y-guidelines.orange.com/en/web/develop/textual-content/#structuring-data-tables). ## Variants @@ -494,68 +494,6 @@ You can also put the `` on the bottom of the table with `.caption-botto ``` -## Sticky table headers - -Add `.thead-sticky` to the table element in order to have the first row sticking to the top of the table. The sticky effect has no effect on a non-scrollable table. - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    HeaderHeaderHeaderHeader
    CellCellCellCell
    CellCellCellCell
    CellCellCellCell
    CellCellCellCell
    CellCellCellCell
    -
    -
    - -```html -
    - - - ... - ... -
    -
    -``` - ## Responsive tables Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`. diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index 6478a15c8c..98249c7b63 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -75,6 +75,7 @@ If you need more details about the changes, please refer to the [v5.2.2 release]
  • $table-striped-color
  • $table-striped-bg-factor
  • $table-striped-bg
    • +
  • $table-striped-hover-color
  • $table-striped-hover-bg-factor
  • $table-striped-hover-bg
  • $table-striped-bg
    • diff --git a/site/layouts/shortcodes/table.html b/site/layouts/shortcodes/table.html index 34a926e531..4d30eca775 100644 --- a/site/layouts/shortcodes/table.html +++ b/site/layouts/shortcodes/table.html @@ -5,12 +5,10 @@ * class: any class(es) to be added to the `table` - default "" * simplified: show a simplified version in the examples - default `true` * caption: content of the `caption` - default "" - * caption_hide: if the caption should be shown or not - default `true` */ -}} {{- $class := .Get "class" -}} {{- $simplified := .Get "simplified" | default true -}} -{{- $caption_hide := .Get "caption_hide" | default true -}} {{- $caption := .Get "caption" | default "" -}} {{- $table_attributes := "" -}} @@ -30,15 +28,13 @@ {{- $table_caption = printf `%s` . -}} {{- end -}} -{{- if eq $caption_hide true -}} - {{- $table_caption_attributes = printf ` class="visually-hidden"` -}} -{{- end -}} +{{- $table_caption_attributes = printf ` class="visually-hidden"` -}} {{- $table := printf "\n\n %s\n%s\n" $table_attributes $table_caption_attributes $table_caption $table_content -}}
    -
    From 67226ea0b511e0fc24e3bf8867ec5e19253cbdc2 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 19 Dec 2022 10:37:23 +0100 Subject: [PATCH 11/20] . --- site/content/docs/5.2/migration.md | 44 +++++++++++++++--------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index be8c38790a..43b8722766 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -71,6 +71,14 @@ If you need more details about the changes, please refer to the [v5.2.3 release] + Review ``` +### Contents + +- **Tables** + - Warning Every table now has a caption with `.visually-hidden` on it. Please reflect this modification into your websites. + - New Tables now fully support striped rows and columns. + - New Tables now fully support branded hover on every tables. + - New Tables now fully support sticky `` using `.thead-sticky` on ``. + ### Forms - New Form helpers icon buttons will help you to provide extra help information with the `.form-helper` utility class. @@ -126,6 +134,20 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
  • $helper-icon
  • $input-border-radius-sm
  • $input-font-size-sm
    • +
  • $table-accent-bg
    • +
  • $table-striped-color
    • +
  • $table-striped-bg-factor
    • +
  • $table-striped-bg
    • +
  • $table-striped-hover-color
    • +
  • $table-striped-hover-bg-factor
    • +
  • $table-striped-hover-bg
    • +
  • $table-striped-bg
    • +
  • $table-variant-striped-hover-bg-factor
    • +
  • $table-variant-striped-hover-bg
    • +
  • $table-variant-active-bg-factor
    • +
  • $table-variant-hover-bg-factor
    • +
  • $table-striped-order
    • +
  • $table-striped-columns-order
    • @@ -149,14 +171,6 @@ If you need more details about the changes, please refer to the [v5.2.2 release] +
  • EN
    • ``` -### Contents - -- **Tables** - - Warning Every table now has a caption with `.visually-hidden` on it. Please reflect this modification into your websites. - - New Tables now fully support striped rows and columns. - - New Tables now fully support branded hover on every tables. - - New Tables now fully support sticky `` using `.thead-sticky` on ``. - ### Forms - Warning All forms examples have been modified to add a `.mt-2` to all submit buttons in order to always have 30px between the last form control and the button. Please reflect this modification into your websites. @@ -192,20 +206,6 @@ If you need more details about the changes, please refer to the [v5.2.2 release]
  • $btn-letter-spacing-lg
  • $btn-letter-spacing-sm
  • $form-feedback-line-height
    • -
  • $table-accent-bg
    • -
  • $table-striped-color
    • -
  • $table-striped-bg-factor
    • -
  • $table-striped-bg
    • -
  • $table-striped-hover-color
    • -
  • $table-striped-hover-bg-factor
    • -
  • $table-striped-hover-bg
    • -
  • $table-striped-bg
    • -
  • $table-variant-striped-hover-bg-factor
    • -
  • $table-variant-striped-hover-bg
    • -
  • $table-variant-active-bg-factor
    • -
  • $table-variant-hover-bg-factor
    • -
  • $table-striped-order
    • -
  • $table-striped-columns-order
    • From 64eb954e19875f867ed4f8f8989673e6fdc720ce Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 20 Dec 2022 10:41:19 +0100 Subject: [PATCH 12/20] fix(review) --- scss/_variables.scss | 4 ++-- site/content/docs/5.2/content/tables.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 4f5286af1d..356ada6d9e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -808,10 +808,10 @@ $table-striped-hover-color: $table-color !default; // Boosted mod $table-striped-hover-bg-factor: .4 !default; // Boosted mod $table-striped-hover-bg: rgba($black, $table-striped-hover-bg-factor) !default; // Boosted mod $table-variant-striped-bg-factor: .2 !default; // Boosted mod -$table-variant-striped-hover-bg-factor: .87 !default; // Boosted mod +$table-variant-striped-hover-bg-factor: .865 !default; // Boosted mod $table-active-color: $table-color !default; -$table-active-bg-factor: .13 !default; // Boosted mod +$table-active-bg-factor: .135 !default; // Boosted mod $table-active-bg: rgba($black, $table-active-bg-factor) !default; $table-variant-active-bg-factor: .6 !default; // Boosted mod diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index f9eeae8ac9..2d14b6338a 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -360,7 +360,7 @@ Table cells of `` are always vertical aligned to the bottom. Table cells Border styles, active styles, and table variants are not inherited by nested tables.
    - +
    From bef51abd00fb46c363306b174441473bfdad66e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 20 Dec 2022 12:57:29 +0100 Subject: [PATCH 13/20] Fix bundlewatch --- .bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index acaafafc1e..fadc83aa75 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -30,7 +30,7 @@ }, { "path": "./dist/css/boosted.min.css", - "maxSize": "35.75 kB" + "maxSize": "36.0 kB" }, { "path": "./dist/js/boosted.bundle.js", From 4c6f5e98700578af81fa28425f070df912af7c01 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 20 Dec 2022 18:14:58 +0100 Subject: [PATCH 14/20] fix(review) --- scss/_tables.scss | 8 +++--- scss/_variables.scss | 35 +++++++++++++------------ scss/mixins/_table-variants.scss | 2 +- site/content/docs/5.2/content/tables.md | 22 ++++++---------- site/content/docs/5.2/migration.md | 22 +++++++--------- site/layouts/shortcodes/table.html | 12 ++++----- 6 files changed, 47 insertions(+), 54 deletions(-) diff --git a/scss/_tables.scss b/scss/_tables.scss index e4bd95b61b..335a1efb25 100644 --- a/scss/_tables.scss +++ b/scss/_tables.scss @@ -34,14 +34,14 @@ // Another advantage is that this generates less code and makes the selector less specific making it easier to override. // stylelint-disable-next-line selector-max-universal > :not(caption) > * > * { - padding: $table-cell-padding-y $table-cell-padding-x add($table-cell-padding-y, 1px); // Boosted mod - line-height: $table-line-height; // Boosted mod + padding: $table-cell-padding-y $table-cell-padding-x add($table-cell-padding-y, 1px); + line-height: $table-line-height; background-color: var(--#{$prefix}table-bg); box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg); } > thead > tr { - border-bottom-width: $table-border-width * 2; + border-bottom-width: calc($table-border-width * 2); // stylelint-disable-line function-disallowed-list } > tbody > th { @@ -67,7 +67,7 @@ } .table-group-divider { - border-top: ($table-border-width * 2) solid $table-group-separator-color; + border-top: calc($table-border-width * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list } // diff --git a/scss/_variables.scss b/scss/_variables.scss index 356ada6d9e..3e6a8dbaf2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -787,22 +787,22 @@ $mark-bg-dark: $white !default; // Boosted mod // Customizes the `.table` component with basic values, each used across all table variations. // scss-docs-start table-variables -$table-cell-padding-y: .875rem !default; -$table-cell-padding-x: $spacer * .5 !default; -$table-cell-padding-y-sm: .5625rem !default; -$table-cell-padding-x-sm: $table-cell-padding-x !default; +$table-cell-padding-y: .875rem !default; // Boosted mod +$table-cell-padding-x: $spacer * .5 !default; // Boosted mod +$table-cell-padding-y-sm: .5625rem !default; // Boosted mod +$table-cell-padding-x-sm: $table-cell-padding-x !default; // Boosted mod -$table-cell-vertical-align: top !default; -$table-line-height: 1.25 !default; // Boosted mod +$table-cell-vertical-align: top !default; +$table-line-height: 1.25 !default; // Boosted mod -$table-color: var(--#{$prefix}body-color) !default; -$table-bg: $body-bg !default; -$table-accent-bg: transparent !default; +$table-color: var(--#{$prefix}body-color) !default; +$table-bg: $body-bg !default; // Boosted mod +$table-accent-bg: transparent !default; -$table-th-font-weight: null !default; +$table-th-font-weight: null !default; $table-striped-color: $table-color !default; -$table-striped-bg-factor: .065 !default; +$table-striped-bg-factor: .065 !default; // Boosted mod $table-striped-bg: rgba($black, $table-striped-bg-factor) !default; $table-striped-hover-color: $table-color !default; // Boosted mod $table-striped-hover-bg-factor: .4 !default; // Boosted mod @@ -821,17 +821,18 @@ $table-hover-bg: rgba($black, $table-hover-bg-factor) !de $table-variant-hover-bg-factor: .2 !default; // Boosted mod $table-border-factor: .4 !default; // Boosted mod -$table-border-width: $border-width * .5 !default; // Boosted mod -$table-border-color: $gray-500 !default; // Boosted mod +/* stylelint-disable-next-line function-disallowed-list */ +$table-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // Boosted mod +$table-border-color: var(--#{$prefix}border-color-translucent) !default; // Boosted mod $table-striped-order: odd !default; $table-striped-columns-order: even !default; -$table-group-separator-color: currentcolor !default; +$table-group-separator-color: currentcolor !default; -$table-caption-color: var(--#{$boosted-prefix}caption-color, $black) !default; // Boosted mod -$table-caption-color-dark: $white !default; // Boosted mod -$table-caption-padding-y: .75rem !default; // Boosted mod +$table-caption-color: var(--#{$boosted-prefix}caption-color, $black) !default; // Boosted mod +$table-caption-color-dark: $white !default; // Boosted mod +$table-caption-padding-y: .75rem !default; // Boosted mod // Boosted mod: no $table-bg-scale // scss-docs-end table-variables diff --git a/scss/mixins/_table-variants.scss b/scss/mixins/_table-variants.scss index a8ee1cea57..029875f7d5 100644 --- a/scss/mixins/_table-variants.scss +++ b/scss/mixins/_table-variants.scss @@ -1,4 +1,4 @@ -// Boosted mod: Variants have a brand different :hover and :striped management +// Boosted mod: Variants have a different hover and striped management // scss-docs-start table-variant @mixin table-variant($state, $background) { .table-#{$state} { diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 2d14b6338a..1be062cb7e 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -21,9 +21,7 @@ Using the most basic table markup, here's how `.table`-based tables look in Boos To make a table accessible, you should respect these three main rules: - If the table is an important one, add a `role="region"` attribute to help screen readers. - - add a `scope="col"` or `scope="row"` attribute to the tags when needed to make the content of table readable by screen readers. - - add a `
    ` on each table. If the table doesn't have a caption or if the caption is not enough informative to describe the table, add an `aria-label` attribute to describe the table content. The `aria-label` should match the following pattern: `aria-label="Description of table data - Description of table metadata (e.g.: table with one level of column header)"`. The metadata is mandatory for complex tables. See [more information about the tables structures](https://a11y-guidelines.orange.com/en/web/develop/textual-content/#structuring-data-tables). @@ -150,7 +148,7 @@ Highlight a table row or cell by adding a `.table-active` class. ```html - + ... ... @@ -205,7 +203,7 @@ Highlight a table row or cell by adding a `.table-active` class. ```html
    - + ... ... @@ -227,7 +225,7 @@ Highlight a table row or cell by adding a `.table-active` class. ## How do the variants and accented tables work? -For the accented tables (([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows) and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): +For the accented tables ([striped rows](#striped-rows), [striped columns](#striped-columns), [hoverable rows](#hoverable-rows) and [active tables](#active-tables)), we used some techniques to make these effects work for all our [table variants](#variants): - We start by setting the background of a table cell with the `--bs-table-bg` custom property. All table variants then set that custom property to colorize the table cells. This way, we don't get into trouble if semi-transparent colors are used as table backgrounds. - Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);` to layer on top of any specified `background-color`. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is unset by default, we don't have a default box shadow. @@ -249,8 +247,6 @@ Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` {{< table class="table table-dark table-sm" caption="Boosted dark small table" >}} - - ## Table group dividers Add a thicker border, darker between table groups—``, ``, and ``—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time). @@ -331,7 +327,7 @@ Table cells of `` are always vertical aligned to the bottom. Table cells ```html
    - + ... ... @@ -420,7 +416,7 @@ Border styles, active styles, and table variants are not inherited by nested tab ```html
    - + ... ... @@ -429,7 +425,6 @@ Border styles, active styles, and table variants are not inherited by nested tab @@ -462,7 +457,7 @@ A ` + {{- with $caption -}}{{- end -}} {{ partialCached "table-content" . }}
    - ...
    ` functions like a heading for a table. It helps users with screen r ```html - + ... ... @@ -484,7 +479,7 @@ You can also put the `
    List of users` on the bottom of the table with `.caption-botto ```html - + ... ... @@ -571,7 +566,6 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl ```html
    List of users
    - ...
    @@ -810,7 +804,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit ```html
    - + ... ` using `.thead-sticky` on ``. + - Tables now fully support branded hover on every tables. ### Forms @@ -115,8 +114,8 @@ If you need more details about the changes, please refer to the [v5.2.3 release] New CSS variables:
    • --bs-table-accent-bg
      • -
    • --bs-table-striped-color
    • --bs-table-striped-bg
      • +
    • --bs-table-striped-color
    • --bs-table-striped-hover-color
    • --bs-table-striped-hover-bg
    @@ -135,19 +134,18 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
  • $input-border-radius-sm
  • $input-font-size-sm
  • $table-accent-bg
    • -
  • $table-striped-color
    • -
  • $table-striped-bg-factor
  • $table-striped-bg
    • -
  • $table-striped-hover-color
    • -
  • $table-striped-hover-bg-factor
    • +
  • $table-striped-bg-factor
    • +
  • $table-striped-color
    • +
  • $table-striped-columns-order
  • $table-striped-hover-bg
    • -
  • $table-striped-bg
    • -
  • $table-variant-striped-hover-bg-factor
    • -
  • $table-variant-striped-hover-bg
    • +
  • $table-striped-hover-bg-factor
    • +
  • $table-striped-hover-color
    • +
  • $table-striped-order
  • $table-variant-active-bg-factor
  • $table-variant-hover-bg-factor
    • -
  • $table-striped-order
    • -
  • $table-striped-columns-order
    • +
  • $table-variant-striped-hover-bg
    • +
  • $table-variant-striped-hover-bg-factor
    • diff --git a/site/layouts/shortcodes/table.html b/site/layouts/shortcodes/table.html index 4d30eca775..dfa817b7ea 100644 --- a/site/layouts/shortcodes/table.html +++ b/site/layouts/shortcodes/table.html @@ -2,14 +2,14 @@ Usage: `table [args]` `args` are optional and can be one of the following: - * class: any class(es) to be added to the `table` - default "" + * class: any class(es) to be added to the `table` * simplified: show a simplified version in the examples - default `true` - * caption: content of the `caption` - default "" + * caption: content of the `caption` */ -}} {{- $class := .Get "class" -}} {{- $simplified := .Get "simplified" | default true -}} -{{- $caption := .Get "caption" | default "" -}} +{{- $caption := .Get "caption" -}} {{- $table_attributes := "" -}} {{- $table_content := " ...\n" -}} @@ -25,16 +25,16 @@ {{- end -}} {{- with $caption -}} - {{- $table_caption = printf `%s` . -}} + {{- $table_caption = printf `` . -}} {{- end -}} {{- $table_caption_attributes = printf ` class="visually-hidden"` -}} -{{- $table := printf "\n\n %s\n%s
    diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index 43b8722766..2487daa11f 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -76,8 +76,7 @@ If you need more details about the changes, please refer to the [v5.2.3 release] - **Tables** - Warning Every table now has a caption with `.visually-hidden` on it. Please reflect this modification into your websites. - New Tables now fully support striped rows and columns. - - New Tables now fully support branded hover on every tables. - - New Tables now fully support sticky `
    \n" $table_attributes $table_caption_attributes $table_caption $table_content -}} +{{- $table := printf "\n\n %s\n%s
    \n" $table_attributes $table_caption $table_content -}}
    -
    From 5c331d5b579aeb17f3b1ea6fd90f0df5f648cc67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 21 Dec 2022 09:01:17 +0100 Subject: [PATCH 15/20] Minor change in migration note --- site/content/docs/5.2/migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index 2487daa11f..2b4adb2bcd 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -75,8 +75,8 @@ If you need more details about the changes, please refer to the [v5.2.3 release] - **Tables** - Warning Every table now has a caption with `.visually-hidden` on it. Please reflect this modification into your websites. + - New Tables now fully support striped rows and columns. - - Tables now fully support branded hover on every tables. ### Forms From d20a9fd80262fdde6c7e0203c98a5a96e1f897fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 21 Dec 2022 09:02:10 +0100 Subject: [PATCH 16/20] Minor change in migration note --- site/content/docs/5.2/migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index 2b4adb2bcd..6537221fd9 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -116,8 +116,8 @@ If you need more details about the changes, please refer to the [v5.2.3 release]
  • --bs-table-accent-bg
  • --bs-table-striped-bg
  • --bs-table-striped-color
    • -
  • --bs-table-striped-hover-color
  • --bs-table-striped-hover-bg
    • +
  • --bs-table-striped-hover-color
    • From 1a23eb7a9b08466ca15c0b633f24f8951e12aa49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 21 Dec 2022 09:05:20 +0100 Subject: [PATCH 17/20] Fix bundlewatch --- .bundlewatch.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index fadc83aa75..1191b0862d 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -18,7 +18,7 @@ }, { "path": "./dist/css/boosted-utilities.css", - "maxSize": "8.5 kB" + "maxSize": "8.75 kB" }, { "path": "./dist/css/boosted-utilities.min.css", From 7fca5f6df4f444342c3d7f672ef13b256b5dd199 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 21 Dec 2022 09:29:04 +0100 Subject: [PATCH 18/20] . --- site/content/docs/5.2/content/tables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 1be062cb7e..8e9e78c107 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -415,7 +415,7 @@ Border styles, active styles, and table variants are not inherited by nested tab ```html - +
    ... ... From bf32e8904e274526a22dbdf0af355be48f791083 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 21 Dec 2022 10:30:21 +0100 Subject: [PATCH 19/20] fix(review) --- site/layouts/shortcodes/table.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/site/layouts/shortcodes/table.html b/site/layouts/shortcodes/table.html index dfa817b7ea..a29c8f0059 100644 --- a/site/layouts/shortcodes/table.html +++ b/site/layouts/shortcodes/table.html @@ -14,7 +14,7 @@ {{- $table_attributes := "" -}} {{- $table_content := " ...\n" -}} {{- $table_caption_attributes := "" -}} -{{- $table_caption := "..." -}} +{{- $table_caption := "" -}} {{- with $class -}} {{- $table_attributes = printf ` class="%s"` . -}} @@ -22,15 +22,15 @@ {{- if eq $simplified "false" -}} {{- $table_content = partialCached "table-content" . -}} -{{- end -}} -{{- with $caption -}} - {{- $table_caption = printf `` . -}} + {{- with $caption -}} + {{- $table_caption = printf ` %s` . "\n" -}} + {{- end -}} {{- end -}} {{- $table_caption_attributes = printf ` class="visually-hidden"` -}} -{{- $table := printf "\n\n %s\n%s
    \n" $table_attributes $table_caption $table_content -}} +{{- $table := printf "\n\n%s%s
    \n" $table_attributes $table_caption $table_content -}}
    From b5095310d0bc356462de22f8416c4ee03bbea4ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 21 Dec 2022 10:45:06 +0100 Subject: [PATCH 20/20] Remove useless caption --- site/content/docs/5.2/content/tables.md | 1 - 1 file changed, 1 deletion(-) diff --git a/site/content/docs/5.2/content/tables.md b/site/content/docs/5.2/content/tables.md index 8e9e78c107..a61f49fc66 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -645,7 +645,6 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab {{- if not (eq . "xs") }}
    - ...