diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index acaafafc1e..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", @@ -30,7 +30,7 @@ }, { "path": "./dist/css/boosted.min.css", - "maxSize": "35.75 kB" + "maxSize": "36.0 kB" }, { "path": "./dist/js/boosted.bundle.js", diff --git a/scss/_tables.scss b/scss/_tables.scss index 3f80b529fe..335a1efb25 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-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}; --#{$prefix}table-hover-color: #{$table-hover-color}; @@ -30,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 { @@ -49,6 +53,10 @@ vertical-align: inherit; } + > thead { + vertical-align: bottom; + } + // Boosted mod // When using checkboxes in the first column, force width to ensure correct spacing on this column &.has-checkbox tr > :first-child { @@ -59,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 } // @@ -86,7 +94,25 @@ // 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); + } +} + +// 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); + } +} // Active table // @@ -106,10 +132,14 @@ --#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg); color: var(--#{$prefix}table-hover-color); } -} - -// Boosted mod: no table-row-variants + // Boosted mod + &.table-striped > tbody > tr:hover > * { + --#{$prefix}table-accent-bg: var(--#{$prefix}table-striped-hover-bg); + color: var(--#{$prefix}table-striped-hover-color); + } + // 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 cf058683cb..3e6a8dbaf2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -787,39 +787,54 @@ $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-vertical-align: top !default; -$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-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-hover-color: $table-color !default; -$table-hover-bg-factor: .065 !default; -$table-hover-bg: rgba($black, $table-hover-bg-factor) !default; - -$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-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-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-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-striped-color: $table-color !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 +$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: .865 !default; // Boosted mod + +$table-active-color: $table-color !default; +$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 + +$table-hover-color: $table-color !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; // 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-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 0765f9c726..029875f7d5 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 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));// 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)); // Boosted mod $table-border-color: mix($color, $background, percentage($table-border-factor)); --#{$prefix}table-color: #{$color}; --#{$prefix}table-bg: #{$background}; --#{$prefix}table-border-color: #{$table-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 7de7cb096e..a61f49fc66 100644 --- a/site/content/docs/5.2/content/tables.md +++ b/site/content/docs/5.2/content/tables.md @@ -14,7 +14,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" >}} +{{< table class="table" simplified="false" caption="Boosted tables basic look" >}} + +## Accessibility + +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). ## Variants @@ -23,6 +33,7 @@ Use contextual class to color tables, table rows or individual cells.
+ @@ -64,13 +75,39 @@ 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" 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" caption="Boosted striped columns table" >}} + +These classes can also be added to table variants: + +{{< table class="table table-dark table-striped" caption="Boosted dark striped rows table" >}} + +{{< table class="table table-dark table-striped-columns" caption="Boosted dark striped columns table" >}} + + + ### 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" caption="Boosted hoverable table" >}} + +{{< table class="table table-dark table-hover" caption="Boosted hoverable dark table" >}} -{{< table class="table table-dark table-hover" >}} +These hoverable rows can also be combined with the striped rows variant: + +{{< table class="table table-striped table-hover" caption="Boosted hoverable striped table" >}} + +{{< table class="table table-dark table-striped table-hover" caption="Boosted hoverable dark striped table" >}} ### Active tables @@ -78,6 +115,7 @@ Highlight a table row or cell by adding a `.table-active` class.
Class
+ @@ -110,6 +148,7 @@ Highlight a table row or cell by adding a `.table-active` class. ```html
#
+ ... ... @@ -131,6 +170,7 @@ Highlight a table row or cell by adding a `.table-active` class.
+ @@ -163,6 +203,7 @@ Highlight a table row or cell by adding a `.table-active` class. ```html
#
+ ... ... @@ -184,11 +225,11 @@ 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. @@ -196,13 +237,15 @@ 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" caption="Boosted small table" >}} -{{< table class="table table-dark table-sm" >}} +{{< table class="table table-dark table-sm" caption="Boosted dark small table" >}} ## Table group dividers @@ -210,6 +253,7 @@ Add a thicker border, darker between table groups—``, ``, and `< {{< example >}}
+ @@ -247,6 +291,7 @@ Table cells of `` are always vertical aligned to the bottom. Table cells
#
+ @@ -282,6 +327,7 @@ Table cells of `` are always vertical aligned to the bottom. Table cells ```html
Heading 1
+ ... ... @@ -310,64 +356,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 - +
+ ... ... @@ -393,80 +442,52 @@ Note that if you add ``s as direct children of a table, those `` will be ## Anatomy + + ### Captions 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. -{{< example >}} - - +
+
List of users
+ + {{< partial "table-content" >}} +
List of users
+ + +```html + + ... - - - - - - + ... - - - - - - - - - - - - - - - - - - + ...
#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" >}} +
List of users
+
+ +```html - + ... - - - - - - + ... - - - - - - - - - - - - - - - - - - + ...
List of users
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
-{{< /example >}} +``` ## Responsive tables @@ -482,9 +503,10 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content Across every breakpoint, use `.table-responsive` for horizontally scrolling tables. -{{< example >}} -
+
+
+ @@ -539,7 +561,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
#
-{{< /example >}} +
```html
@@ -561,6 +583,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
+ @@ -643,6 +666,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit
#
+
@@ -779,6 +803,7 @@ The selection behavior isn't implemented yet. This feature will be delivered wit ```html
+ ... {{- end -}} {{ partialCached "table-content" . }}
@@ -841,6 +866,7 @@ Use SVG to display thumbnails or icons in your table data cell elements.
+
@@ -1041,6 +1067,7 @@ Use SVG to display thumbnails or icons in your table data cell elements.
+ diff --git a/site/content/docs/5.2/migration.md b/site/content/docs/5.2/migration.md index ac8bb4b423..6537221fd9 100644 --- a/site/content/docs/5.2/migration.md +++ b/site/content/docs/5.2/migration.md @@ -71,6 +71,13 @@ 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. + ### Forms - New Form helpers icon buttons will help you to provide extra help information with the `.form-helper` utility class. @@ -103,6 +110,17 @@ If you need more details about the changes, please refer to the [v5.2.3 release] ### CSS and Sass variables +-
+ New CSS variables: +
    +
  • --bs-table-accent-bg
    • +
  • --bs-table-striped-bg
    • +
  • --bs-table-striped-color
    • +
  • --bs-table-striped-hover-bg
    • +
  • --bs-table-striped-hover-color
    • +
+
+ -
New Sass variables:
    @@ -115,6 +133,19 @@ 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-bg
    • +
  • $table-striped-bg-factor
    • +
  • $table-striped-color
    • +
  • $table-striped-columns-order
    • +
  • $table-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-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 a98b5eb899..a29c8f0059 100644 --- a/site/layouts/shortcodes/table.html +++ b/site/layouts/shortcodes/table.html @@ -2,15 +2,19 @@ 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` */ -}} {{- $class := .Get "class" -}} {{- $simplified := .Get "simplified" | default true -}} +{{- $caption := .Get "caption" -}} {{- $table_attributes := "" -}} {{- $table_content := " ...\n" -}} +{{- $table_caption_attributes := "" -}} +{{- $table_caption := "" -}} {{- with $class -}} {{- $table_attributes = printf ` class="%s"` . -}} @@ -18,12 +22,19 @@ {{- if eq $simplified "false" -}} {{- $table_content = partialCached "table-content" . -}} + + {{- with $caption -}} + {{- $table_caption = printf ` %s` . "\n" -}} + {{- end -}} {{- end -}} -{{- $table := printf "\n%s
Column header
" $table_attributes $table_content -}} +{{- $table_caption_attributes = printf ` class="visually-hidden"` -}} + +{{- $table := printf "\n\n%s%s
\n" $table_attributes $table_caption $table_content -}}
+ {{- with $caption -}}