Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Table: active <tr> fix #37084

Merged
merged 12 commits into from Apr 26, 2023
Merged

Table: active <tr> fix #37084

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f58a2eb
Adding the custom cascade to make `.active` work on `:hover` and on `…
louismaximepiton Sep 9, 2022
98daef0
Prevent nesting backgrounds
louismaximepiton Sep 9, 2022
6a54eb3
Small typo
louismaximepiton Sep 9, 2022
5a77b10
.
louismaximepiton Sep 9, 2022
de60655
Adding some docs
louismaximepiton Sep 29, 2022
138566d
Match variable syntax
mdo Oct 30, 2022
a49574d
Merge branch 'main' into main-lmp-table-active-tr-fix
mdo Oct 30, 2022
69aebee
Merge remote-tracking branch 'upstream/main' into main-lmp-table-acti…
louismaximepiton Nov 7, 2022
d1c240b
.
louismaximepiton Nov 7, 2022
fb63989
Merge remote-tracking branch 'upstream/main' into main-lmp-table-acti…
louismaximepiton Nov 18, 2022
16207ad
Merge branch 'main' into main-lmp-table-active-tr-fix
louismaximepiton Mar 27, 2023
c20dbd5
Merge branch 'main' into main-lmp-table-active-tr-fix
mdo Apr 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
27 changes: 17 additions & 10 deletions scss/_tables.scss
View file
Open in desktop
Expand Up @@ -3,6 +3,12 @@
//

.table {
// Reset needed for nesting tables
--#{$prefix}table-color-type: initial;
--#{$prefix}table-bg-type: initial;
--#{$prefix}table-color-state: initial;
--#{$prefix}table-bg-state: initial;
// End of reset
--#{$prefix}table-color: #{$table-color};
--#{$prefix}table-bg: #{$table-bg};
--#{$prefix}table-border-color: #{$table-border-color};
Expand All @@ -16,7 +22,6 @@

width: 100%;
margin-bottom: $spacer;
color: var(--#{$prefix}table-color);
vertical-align: $table-cell-vertical-align;
border-color: var(--#{$prefix}table-border-color);

Expand All @@ -27,9 +32,11 @@
// stylelint-disable-next-line selector-max-universal
> :not(caption) > * > * {
padding: $table-cell-padding-y $table-cell-padding-x;
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
background-color: var(--#{$prefix}table-bg);
border-bottom-width: $table-border-width;
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-accent-bg);
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
}

> tbody {
Expand Down Expand Up @@ -104,16 +111,16 @@
// 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);
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}

// 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);
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
}
}

Expand All @@ -122,8 +129,8 @@
// The `.table-active` class can be added to highlight rows or cells

.table-active {
--#{$prefix}table-accent-bg: var(--#{$prefix}table-active-bg);
color: var(--#{$prefix}table-active-color);
--#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
}

// Hover effect
Expand All @@ -132,8 +139,8 @@

.table-hover {
> tbody > tr:hover > * {
--#{$prefix}table-accent-bg: var(--#{$prefix}table-hover-bg);
color: var(--#{$prefix}table-hover-color);
--#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
--#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
}
}

Expand Down
2 changes: 1 addition & 1 deletion scss/_variables.scss
View file
Open in desktop
Expand Up @@ -731,7 +731,7 @@ $table-cell-padding-x-sm: .25rem !default;
$table-cell-vertical-align: top !default;

$table-color: var(--#{$prefix}body-color) !default;
$table-bg: transparent !default;
$table-bg: var(--#{$prefix}body-bg) !default;
Copy link
Sponsor Contributor

@tkrotoff tkrotoff Jun 10, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a breaking change.

Table background has been transparent since 2012

Also table-primary & table-secondary are available but not table-tertiary, why?

@louismaximepiton

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey, thanks a lot for your feedback!

I think I changed the default background from transparent to var(--bs-body-bg) because the nesting tables was broken if I remember well. I'm not sure how to handle this. If you have any other idea please don't hesitate to add a PR.

For .table-tertiary, it doesn't exists yet since our components (buttons, list-group, ...) don't have such a variant. I think if it's done for one, it might be done on all sides at the same time.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirming the part regarding the table variants. It's mentioned in our Tables > Variants documentation:

Heads up! Because of the more complicated CSS used to generate our table variants, they most likely won’t see color mode adaptive styling until v6.

$table-accent-bg: transparent !default;

$table-th-font-weight: null !default;
Expand Down
6 changes: 3 additions & 3 deletions site/content/docs/5.3/content/tables.md
View file
Open in desktop
Expand Up @@ -227,8 +227,8 @@ Highlight a table row or cell by adding a `.table-active` class.
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-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.
- Then we add an inset box shadow on the table cells with `box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg--state, var(--#{$prefix}table-bg--type, var(--#{$prefix}table-accent-bg)));` to layer on top of any specified `background-color`. It uses custom cascade to override the `box-shadow`, regardless the CSS specificity. Because we use a huge spread and no blur, the color will be monotone. Since `--bs-table-accent-bg` is set to `transparent` by default, we don't have a default box shadow.
- When either `.table-striped`, `.table-striped-columns`, `.table-hover` or `.table-active` classes are added, either `--bs-table-bg--type` or `--bs-table-bg--state` (by default set to `initial`) are set to a semitransparent color (`--bs-table-striped-bg`, `--bs-table-active-bg` or `--bs-table-hover-bg`) to colorize the background and override default `--bs-table-accent-bg`.
- 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-primary` is darker while `.table-dark` has a lighter accent color.
- Text and border colors are generated the same way, and their colors are inherited by default.

Expand Down Expand Up @@ -427,7 +427,7 @@ Border styles, active styles, and table variants are not inherited by nested tab
</div>

```html
<table class="table table-striped">
<table class="table table-striped table-bordered">
<thead>
...
</thead>
Expand Down