Skip to content
Permalink
Browse files

fix(tables): ensure row variant `active` (class `table-active`) takes…

… precedence over other row variants (addresses #3008) (#4127)
  • Loading branch information...
tmorehouse committed Sep 19, 2019
1 parent f079fcf commit fdb8bb60f4c92cbc1dc742d3e0e4fdeb609bd3cb
Showing with 45 additions and 4 deletions.
  1. +5 −3 src/components/table/README.md
  2. +40 −1 src/components/table/_table.scss
@@ -1532,10 +1532,12 @@ example).

The `selected-variant` can be any of the
[standard (or custom) bootstrap base color variants](/docs/reference/color-variants), or the special
[table `active` variant](/docs/reference/color-variants#table-variants).
[table `active` variant](/docs/reference/color-variants#table-variants) which takes precedence over
any specific row or cell variants.

For accessibility reasons (specifically for color blind users), it is highly recommended to always
provide some other visual means of conveying that a row is selected, as shown in the example below.
For accessibility reasons (specifically for color blind users, or users with color contrast issues),
it is highly recommended to always provide some other visual means of conveying that a row is
selected, such as shown in the example below.

```html
<template>
@@ -35,14 +35,53 @@
}
}

// Re-declare `table-active` class here so that it can take
// precedence over row variants when used on selectable rows
// Class can only be applied to rows and not individual cells
> tbody > .table-active {
&,
> th,
> td {
background-color: $table-active-bg;
}
}

// Add special hover styling for `table-active` row variant
&.table-hover > tbody > tr.table-active:hover {
td,
th {
color: $table-hover-color;
// `$table-hover-bg` default is a very transparent black
// We overlay it over the background color to achieve the
// same color effect while keeping the background solid
background-image: linear-gradient($table-hover-bg, $table-hover-bg);
background-repeat: no-repeat;
}
}

// Add in missing `bg-active` class for table tbody rows
// Bootstrap v4.3 is missing this for dark tables
// `bg-active` class cannot be applied to individual cells
> tbody > .bg-active {
&,
> th,
> td {
background-color: $table-dark-active-bg;
// Important is needed to override the standard `bg-variants`
// as the also use `!important`
background-color: $table-dark-active-bg !important;
}
}

// Add special hover styling for `bg-active` row variant (dark tables)
&.table-hover.table-dark > tbody > tr.bg-active:hover {
td,
th {
color: $table-dark-hover-color;
// `$table-dark-hover-bg` default is a very transparent white
// We overlay it over the background color to achieve the
// same color effect while keeping the background solid
background-image: linear-gradient($table-dark-hover-bg, $table-dark-hover-bg);
background-repeat: no-repeat;
}
}
}

0 comments on commit fdb8bb6

Please sign in to comment.
You can’t perform that action at this time.