De-dupe .table-dark, add new border color utilities, and update table docs by mdo · Pull Request #30342 · twbs/bootstrap

mdo · 2020-03-05T20:59:25Z

Alternative to #30193. This ended up being a couple changes in one, hence the length title, but the two are connected.

De-duped .table-dark

Rather than deviate from the $theme-colors pattern we have elsewhere, this PR removes the .table-dark for changing the background, color, and border of a .table. Instead, this can be accomplished through all utilities.

Also removes thead-dark/thead-light modifiers for utilities.

New border-color utils

To support the utilities-driven approach for replacing .table-dark, I've added a few new border-color utilities. These are a subset of our available grays, but I do believe they provide an improved set of options without including all the grays (and thus duplicating $gray-900 and $dark options). The new options have been added to the borders utilities docs page.

New background-color utils

To match the border utilities, I've added one tint lighter for two gray backgrounds (didn't add $gray-100 as it's the same as $light). This way you can choose from additional gray backgrounds and still have a slight contrast in the border colors. Definitely interested in thoughts on this.

Updated table docs

This also obviously updates the examples in the tables docs to reflect the new dark table approach, but also clarifies how inheritance comes into play with the table styles and the table borders. It also adds a new multiple <tbody> example and tweaks a few other bits and pieces.

https://deploy-preview-30342--twbs-bootstrap.netlify.com/docs/4.3/content/tables/

Closes #28480, fixes #27879, nullifies #30046, fixes #28160, and fixes #24529.

mdo · 2020-03-05T21:46:35Z

For next steps, I'm wondering if we also remove the .table-* variants and opt for all background, border, and color variations... Might be pushing it too much.

acshef · 2020-03-05T22:58:22Z

@mdo, if you remove the .table-* variants, will there still be the "fainter" colored backgrounds available in v5? It's always been tempting to use them outside of a <table> or .alert, but it's been semantically irksome to use .card.table-primary for something that's not a table.

mdo · 2020-03-06T04:47:13Z

Yeah we could perhaps ditch those and create a broader suite of utilities. It was a huge ask awhile back to have light and dark background options. Might be a v6 thing.

site/content/docs/4.3/content/tables.md

MartijnCuppens · 2020-03-06T06:43:49Z

site/content/docs/4.3/content/tables.md

+And also works with table color classes:
+
+{{< example >}}
+<table class="table table-striped">


This table looks pretty ugly 😄

Yeah I know lol... remove it? Find a better example?

site/content/docs/4.3/content/tables.md

scss/_utilities.scss

MartijnCuppens · 2020-03-07T13:11:26Z

Wow, the linear-background() hack is a genius move!

tmorehouse · 2020-03-08T01:47:35Z

One may even want to add in a .table-hover-light modifier that uses a light translucent gradient rgba($white, .075) instead of rgba($black, .075), when users have dark (almost black) background color. It would just add two more generated CSS rules (assuming targets the td and th of tbody) and one new SASS variable

scss/_tables.scss

mdo · 2020-03-08T22:45:52Z

Rebased and recombobulated the commits here in case we want to pull out the border and background utility changes.

CSS doesn't allow inheriting `border-color` on td/th elements when using shorthand notation (e.g., `border: 1px solid #eee`). By separating the values, and disabling clean-css on these rulesets, we allow a single utility class on the `.table` to color our entire table's borders.

- New background-colors: gray-500, gray-700, and black - New border-colors: gray-400, gray-600, and black Note that the border colors are all one shade darker than the backgrounds so that they maintain some contrast.

ysds · 2020-03-09T01:07:30Z

Can we use the unset to nested tables if dropping IE11 in v5?

MartijnCuppens · 2020-03-09T20:58:02Z

Can we use the unset to nested tables if dropping IE11 in v5?

We could, but I guess CSS specificity will be a PITA

ysds · 2020-03-09T23:30:14Z

We could, but I guess CSS specificity will be a PITA

Oh I forgot that..

MartijnCuppens · 2020-03-10T21:36:04Z

CSS custom properties on the other hand... https://codepen.io/MartijnCuppens/pen/eYNVmzp

@mdo, we probably better switch to a CSS custom properties approach which will help us out with the nesting issues.

tmorehouse · 2020-03-10T21:49:27Z

@MartijnCuppens Intereting idea.

One might have to be careful which the CSS variable names.. perhaps --table-bg-color... if similar variable names were used for other things (such as input group background colors, alert background colors, etc) when they are nested inside a table.

MartijnCuppens · 2020-03-10T21:53:03Z

@tmorehouse, of course. That was just a quick demo 😉

mdo · 2020-03-20T16:03:19Z

So I need to circle back around to this and check in on some things around inheritance and nesting. I don't think mixing the CSS vars and Sass makes sense necessarily? Maybe I'm missing something there.

MartijnCuppens · 2020-03-24T09:03:10Z

I'm working on an alternative solution, will open another PR soon.

stgm · 2020-11-25T21:37:25Z

Has the use of linear-gradient been performance-tested in some way? I have an example where this makes Safari rendering extremely slow when scrolling. Removing the gradient helps, but obviously kills my striping. If this wasn't expected, I can have a look at creating an example and posting an issue.

MartijnCuppens · 2020-11-25T22:40:04Z

If this wasn't expected, I can have a look at creating an example and posting an issue.

Please do if there are any performance issue

mdo added css v5 no-backport-to-v4 labels Mar 5, 2020

mdo requested a review from a team as a code owner March 5, 2020 20:59

mdo mentioned this pull request Mar 5, 2020

Remove .table-dark as table variant #30193

Closed

This was referenced Mar 6, 2020

Table child elements (thead, tbody, tfoot, tr, td, th) should inherit parent background color #29244

Closed

Contextual table classes apply tr class instead of td class to individual cells #29290

Closed

MartijnCuppens reviewed Mar 6, 2020

View reviewed changes

site/content/docs/4.3/content/tables.md Outdated Show resolved Hide resolved

MartijnCuppens reviewed Mar 6, 2020

View reviewed changes

site/content/docs/4.3/content/tables.md Show resolved Hide resolved

MartijnCuppens reviewed Mar 6, 2020

View reviewed changes

scss/_utilities.scss Outdated Show resolved Hide resolved

This was referenced Mar 6, 2020

Set background hover color for each table color variant #30046

Closed

Suggestion for .table-hover #28160

Closed

Inconsistant .table-active color #24529

Closed

mdo force-pushed the dark-tables branch from 6987026 to d4a6a1c Compare March 6, 2020 16:55

This comment has been minimized.

Sign in to view

tmorehouse reviewed Mar 8, 2020

View reviewed changes

scss/_tables.scss Show resolved Hide resolved

mdo force-pushed the dark-tables branch 2 times, most recently from e27c8bc to 1397d31 Compare March 8, 2020 22:43

mdo added 4 commits March 8, 2020 15:51

Drop .table-dark, .thead-dark, and .thead-light for utility classes

2e27d39

Add new .bg-* and .border-* color utilities

a23b79a

- New background-colors: gray-500, gray-700, and black - New border-colors: gray-400, gray-600, and black Note that the border colors are all one shade darker than the backgrounds so that they maintain some contrast.

Update table docs to reflect all the changes

438c09a

mdo force-pushed the dark-tables branch from 1397d31 to 438c09a Compare March 8, 2020 22:51

tmorehouse mentioned this pull request Mar 20, 2020

CSS minification can interfere with table border inheritance #30429

Closed

MartijnCuppens added the on-hold label Mar 24, 2020

MartijnCuppens mentioned this pull request Mar 26, 2020

Prevent nested tables style leaks #30466

Merged

5 tasks

ffoodd mentioned this pull request Mar 31, 2020

Use black and white as color-contrast fallback colors #30468

Merged

mdo mentioned this pull request Apr 10, 2020

Bump $dark to $gray-900 #30550

Merged

MartijnCuppens closed this in #30466 Apr 24, 2020

MartijnCuppens deleted the dark-tables branch April 26, 2020 10:02

MartijnCuppens removed the v5 label Apr 26, 2020

stgm mentioned this pull request Nov 26, 2020

Linear gradients slow down (large) table rendering by a lot #32266

Closed

Uh oh!

Conversation

mdo commented Mar 5, 2020 • edited by MartijnCuppens Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

De-duped .table-dark

New border-color utils

New background-color utils

Updated table docs

Uh oh!

mdo commented Mar 5, 2020

Uh oh!

acshef commented Mar 5, 2020

Uh oh!

mdo commented Mar 6, 2020

Uh oh!

Uh oh!

MartijnCuppens Mar 6, 2020

Choose a reason for hiding this comment

Uh oh!

mdo Mar 6, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MartijnCuppens commented Mar 7, 2020

Uh oh!

This comment has been minimized.

tmorehouse commented Mar 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

mdo commented Mar 8, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ysds commented Mar 9, 2020

Uh oh!

MartijnCuppens commented Mar 9, 2020

Uh oh!

ysds commented Mar 9, 2020

Uh oh!

MartijnCuppens commented Mar 10, 2020

Uh oh!

tmorehouse commented Mar 10, 2020

Uh oh!

MartijnCuppens commented Mar 10, 2020

Uh oh!

mdo commented Mar 20, 2020

Uh oh!

MartijnCuppens commented Mar 24, 2020

Uh oh!

stgm commented Nov 25, 2020

Uh oh!

MartijnCuppens commented Nov 25, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

mdo commented Mar 5, 2020 •

edited by MartijnCuppens

Loading

tmorehouse commented Mar 8, 2020 •

edited

Loading

mdo commented Mar 8, 2020 •

edited

Loading