Skip to content

Commit 2138284

Browse files
mlaursenmlaursen
authored
fix(table): table border color uses hex values to fix chrome colSpan rendering issue (#982)
The table borders no longer use the `rmd-divider` mixin and colors due to a weird rendering issue with `colSpan` on tables. The workaround for this issue is to use a non-rgba value so the table now has new hex values for this: - `$rmd-table-light-border-color: #e0e0e0 !default` - `$rmd-table-dark-border-color: #2f2f2f !default` - `$rmd-table-border-color: if($rmd-light-theme, $rmd-table-light-border-color, $rmd-table-dark-border-color) !default` This also added a new `--rmd-table-border-color` CSS variable to configure this and should automatically update if you use the `rmd-theme-light/rmd-theme-dark` mixins.
1 parent 34f88fa commit 2138284

6 files changed

Lines changed: 151 additions & 33 deletions

File tree

‎packages/documentation/src/constants/sassdoc/divider.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ const sassdoc: PackageSassDoc = {
5050
packageName: "card",
5151
},
5252
{ name: "rmd-divider", type: "mixin", packageName: "divider" },
53+
{ name: "rmd-table-row", type: "mixin", packageName: "table" },
5354
],
5455
requires: [
5556
{ name: "rmd-theme-get-var", type: "function", packageName: "theme" },
@@ -184,7 +185,6 @@ const sassdoc: PackageSassDoc = {
184185
source: "packages/divider/src/_mixins.scss#L50-L56",
185186
usedBy: [
186187
{ name: "react-md-layout", type: "mixin", packageName: "layout" },
187-
{ name: "rmd-table-row", type: "mixin", packageName: "table" },
188188
],
189189
requires: [
190190
{ name: "rmd-divider-theme", type: "mixin", packageName: "divider" },

‎packages/documentation/src/constants/sassdoc/table.ts‎

Lines changed: 74 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@ const sassdoc: PackageSassDoc = {
4343
description:
4444
"This function is used to get one of the table's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current `$rmd-table-theme-values`\n\nThis function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.",
4545
source: "packages/table/src/_functions.scss#L32-L39",
46-
usedBy: [{ name: "rmd-table", type: "mixin", packageName: "table" }],
46+
usedBy: [
47+
{ name: "rmd-table", type: "mixin", packageName: "table" },
48+
{ name: "rmd-table-row", type: "mixin", packageName: "table" },
49+
],
4750
requires: [
4851
{ name: "rmd-theme-get-var", type: "function", packageName: "theme" },
4952
{
@@ -143,6 +146,8 @@ const sassdoc: PackageSassDoc = {
143146
{ name: "rmd-table", type: "mixin", packageName: "table" },
144147
{ name: "rmd-thead", type: "mixin", packageName: "table" },
145148
{ name: "rmd-table-cell", type: "mixin", packageName: "table" },
149+
{ name: "rmd-theme-light", type: "mixin", packageName: "theme" },
150+
{ name: "rmd-theme-dark", type: "mixin", packageName: "theme" },
146151
],
147152
requires: [
148153
{
@@ -341,11 +346,16 @@ const sassdoc: PackageSassDoc = {
341346
name: "rmd-table-row",
342347
description:
343348
"Creates the styles for the `<tr>` element.\n\nNote: The base class actually has no styles.\n",
344-
source: "packages/table/src/_mixins.scss#L260-L299",
349+
source: "packages/table/src/_mixins.scss#L260-L300",
345350
usedBy: [{ name: "react-md-table", type: "mixin", packageName: "table" }],
346351
requires: [
347352
{ name: "rmd-table-theme", type: "mixin", packageName: "table" },
348-
{ name: "rmd-divider-border", type: "mixin", packageName: "divider" },
353+
{
354+
name: "rmd-divider-theme-var",
355+
type: "function",
356+
packageName: "divider",
357+
},
358+
{ name: "rmd-table-theme-var", type: "function", packageName: "table" },
349359
{
350360
name: "rmd-transition-standard-time",
351361
type: "variable",
@@ -355,13 +365,13 @@ const sassdoc: PackageSassDoc = {
355365
packageName: "table",
356366
code: "@mixin rmd-table-row { … }",
357367
sourceCode:
358-
"@mixin rmd-table-row {\n &--selected {\n @include rmd-table-theme(background-color, selected-color);\n\n .rmd-table-cell--sticky-cell::after {\n @include rmd-table-theme(background-color, selected-color);\n }\n }\n\n &--clickable:hover {\n cursor: pointer;\n }\n\n &--bordered {\n @include rmd-divider-border(bottom);\n\n // this is actually pretty nice since it'll also NOT create a border on the\n // header row (which we want)\n &:last-child {\n border-bottom-width: 0;\n }\n }\n\n &--hoverable {\n @include rmd-utils-mouse-only {\n @include rmd-transition(standard);\n\n transition: background-color $rmd-transition-standard-time;\n\n &:hover {\n @include rmd-table-theme(background-color, hover-color);\n\n // see the `.rmd-table-cell--sticky` selector for more info :/\n .rmd-table-cell--sticky-cell::after {\n @include rmd-table-theme(background-color, hover-color);\n }\n }\n }\n }\n}\n",
368+
"@mixin rmd-table-row {\n &--selected {\n @include rmd-table-theme(background-color, selected-color);\n\n .rmd-table-cell--sticky-cell::after {\n @include rmd-table-theme(background-color, selected-color);\n }\n }\n\n &--clickable:hover {\n cursor: pointer;\n }\n\n &--bordered {\n border-bottom: rmd-divider-theme-var(size) solid\n rmd-table-theme-var(border-color);\n\n // this is actually pretty nice since it'll also NOT create a border on the\n // header row (which we want)\n &:last-child {\n border-bottom-width: 0;\n }\n }\n\n &--hoverable {\n @include rmd-utils-mouse-only {\n @include rmd-transition(standard);\n\n transition: background-color $rmd-transition-standard-time;\n\n &:hover {\n @include rmd-table-theme(background-color, hover-color);\n\n // see the `.rmd-table-cell--sticky` selector for more info :/\n .rmd-table-cell--sticky-cell::after {\n @include rmd-table-theme(background-color, hover-color);\n }\n }\n }\n }\n}\n",
359369
type: "mixin",
360370
},
361371
"react-md-table": {
362372
name: "react-md-table",
363373
description: "Creates all the styles for the table package.\n",
364-
source: "packages/table/src/_mixins.scss#L302-L328",
374+
source: "packages/table/src/_mixins.scss#L303-L329",
365375
usedBy: [{ name: "react-md-utils", type: "mixin", packageName: "utils" }],
366376
requires: [
367377
{
@@ -389,11 +399,50 @@ const sassdoc: PackageSassDoc = {
389399
},
390400
},
391401
variables: {
402+
"rmd-table-light-border-color": {
403+
name: "rmd-table-light-border-color",
404+
description:
405+
"The border color to use for tables due to a chrome rendering bug when the `colSpan` is used on a table. This will be applied when using the light theme.\n\nNote: this value is _close_ to the divider default value of `rgba($rmd-black-base, 0.12)`",
406+
source: "packages/table/src/_variables.scss#L17",
407+
since: "2.3.2",
408+
usedBy: [
409+
{ name: "rmd-theme-light", type: "mixin", packageName: "theme" },
410+
],
411+
packageName: "table",
412+
type: "Color",
413+
value: "#e0e0e0",
414+
overridable: true,
415+
},
416+
"rmd-table-dark-border-color": {
417+
name: "rmd-table-dark-border-color",
418+
description:
419+
"The border color to use for tables due to a chrome rendering bug when the `colSpan` is used on a table. This will be applied when using the dark theme.\n\nNote: this value is _close_ to the divider default value of `rgba($rmd-white-base, 0.12)`",
420+
source: "packages/table/src/_variables.scss#L28",
421+
since: "2.3.2",
422+
usedBy: [{ name: "rmd-theme-dark", type: "mixin", packageName: "theme" }],
423+
packageName: "table",
424+
type: "Color",
425+
value: "#2f2f2f",
426+
overridable: true,
427+
},
428+
"rmd-table-border-color": {
429+
name: "rmd-table-border-color",
430+
description:
431+
"The border color to use for tables due to a chrome rendering bug when the `colSpan` is used on a table.",
432+
source: "packages/table/src/_variables.scss#L35-L39",
433+
since: "2.3.2",
434+
packageName: "table",
435+
type: "Color",
436+
value:
437+
"if(\n $rmd-theme-light,\n $rmd-table-light-border-color,\n $rmd-table-dark-border-color\n)",
438+
compiled: "#e0e0e0",
439+
overridable: true,
440+
},
392441
"rmd-table-cell-horizontal-padding": {
393442
name: "rmd-table-cell-horizontal-padding",
394443
description:
395444
"The amount of padding to apply to the left and right of each `<td>` and `<th>` in a table.\n",
396-
source: "packages/table/src/_variables.scss#L11",
445+
source: "packages/table/src/_variables.scss#L44",
397446
packageName: "table",
398447
type: "Number",
399448
value: "1rem",
@@ -403,7 +452,7 @@ const sassdoc: PackageSassDoc = {
403452
name: "rmd-table-cell-vertical-padding",
404453
description:
405454
'The amount of padding to apply to the top or bottom for each `<th>` and `<th>` in a table when the cell\'s alignment is set to `"top"` or `"bottom"`.',
406-
source: "packages/table/src/_variables.scss#L17",
455+
source: "packages/table/src/_variables.scss#L50",
407456
packageName: "table",
408457
type: "Number",
409458
value: "0.375rem",
@@ -413,7 +462,7 @@ const sassdoc: PackageSassDoc = {
413462
name: "rmd-table-cell-sticky-position",
414463
description:
415464
"The default position to use for a sticky cell that appears within the `<tbody>` in all tables. This is mostly used if you want to have a custom `<th>` that describes an entire row and should always be visible.\n\nIf you want to update a specific table, you should use the `rmd-table-theme-update-var` mixin for the `sticky-cell` value.",
416-
source: "packages/table/src/_variables.scss#L27",
465+
source: "packages/table/src/_variables.scss#L60",
417466
packageName: "table",
418467
type: "Number",
419468
value: "0",
@@ -423,7 +472,7 @@ const sassdoc: PackageSassDoc = {
423472
name: "rmd-table-cell-sticky-z-index",
424473
description:
425474
"The z-index to apply to all sticky cells within a table. This value doesn't matter too much, but it should just be greater than 1 if you have checkbox cells so that the header will cover the checkboxes.",
426-
source: "packages/table/src/_variables.scss#L34",
475+
source: "packages/table/src/_variables.scss#L67",
427476
usedBy: [{ name: "rmd-table-cell", type: "mixin", packageName: "table" }],
428477
packageName: "table",
429478
type: "Number",
@@ -433,7 +482,7 @@ const sassdoc: PackageSassDoc = {
433482
"rmd-table-cell-height": {
434483
name: "rmd-table-cell-height",
435484
description: "The minimum height for each `<td>`.\n",
436-
source: "packages/table/src/_variables.scss#L38",
485+
source: "packages/table/src/_variables.scss#L71",
437486
usedBy: [{ name: "rmd-thead", type: "mixin", packageName: "table" }],
438487
packageName: "table",
439488
type: "Number",
@@ -444,7 +493,7 @@ const sassdoc: PackageSassDoc = {
444493
name: "rmd-table-cell-dense-height",
445494
description:
446495
"The minimum height to set for each `<td>` with the dense spec.",
447-
source: "packages/table/src/_variables.scss#L43",
496+
source: "packages/table/src/_variables.scss#L76",
448497
usedBy: [{ name: "rmd-thead", type: "mixin", packageName: "table" }],
449498
packageName: "table",
450499
type: "Number",
@@ -454,7 +503,7 @@ const sassdoc: PackageSassDoc = {
454503
"rmd-table-cell-color": {
455504
name: "rmd-table-cell-color",
456505
description: "The text color for `<td>` cells within a table.",
457-
source: "packages/table/src/_variables.scss#L49",
506+
source: "packages/table/src/_variables.scss#L82",
458507
usedBy: [{ name: "rmd-table-cell", type: "mixin", packageName: "table" }],
459508
requires: [
460509
{ name: "rmd-theme-var", type: "function", packageName: "theme" },
@@ -469,7 +518,7 @@ const sassdoc: PackageSassDoc = {
469518
name: "rmd-table-cell-horizontal-alignments",
470519
description:
471520
"The supported horizontal alignments for the table cell. You can set this value to `null` if you do not want to generate any additional alignments other than the default (`left`), or set to a list of one value if you do not need all the alignments.",
472-
source: "packages/table/src/_variables.scss#L57",
521+
source: "packages/table/src/_variables.scss#L90",
473522
usedBy: [
474523
{
475524
name: "rmd-table-cell-horizontal-alignments",
@@ -486,7 +535,7 @@ const sassdoc: PackageSassDoc = {
486535
name: "rmd-table-cell-vertical-alignments",
487536
description:
488537
'A map of the supported `vertical-align` for a table cell align with the amount of padding to apply. Tables are "fun" to style since theres some weird stuff with how `height` + `padding` works by default so when the `vertical-align` is set to `top` or `bottom`, you also need to apply some padding OR update the `line-height` for the cell. I decided to go with a `padding` approach to make things a bit easier for non-text cells.\n\nNote: You can also set this value to `null` if you do not want to generate the minimal styles for the non-middle alignments.',
489-
source: "packages/table/src/_variables.scss#L70",
538+
source: "packages/table/src/_variables.scss#L103",
490539
usedBy: [
491540
{
492541
name: "rmd-table-cell-vertical-alignments",
@@ -503,7 +552,7 @@ const sassdoc: PackageSassDoc = {
503552
name: "rmd-table-header-cell-height",
504553
description:
505554
"The minimum height for each `<th>` that appears in the `<thead>`.\n\nNote: No styles will be generated if this is `null` or the same value as the `$rmd-table-cell-height`.",
506-
source: "packages/table/src/_variables.scss#L78",
555+
source: "packages/table/src/_variables.scss#L111",
507556
usedBy: [{ name: "rmd-thead", type: "mixin", packageName: "table" }],
508557
packageName: "table",
509558
type: "Number",
@@ -514,7 +563,7 @@ const sassdoc: PackageSassDoc = {
514563
name: "rmd-table-header-cell-dense-height",
515564
description:
516565
"The minimum height for each `<th>` that appears in the `<thead>` with the dense spec.\n\nNote: No styles will be generated if this is `null` or the same value as the `$rmd-table-cell-dense-height`.",
517-
source: "packages/table/src/_variables.scss#L87",
566+
source: "packages/table/src/_variables.scss#L120",
518567
usedBy: [{ name: "rmd-thead", type: "mixin", packageName: "table" }],
519568
packageName: "table",
520569
type: "Number",
@@ -525,7 +574,7 @@ const sassdoc: PackageSassDoc = {
525574
name: "rmd-table-header-cell-color",
526575
description:
527576
"The color to use for `<th>` cells within a table.\n\nNote: No styles will be generated if this is `null` or the same value as the `$rmd-table-cell-color`.",
528-
source: "packages/table/src/_variables.scss#L95",
577+
source: "packages/table/src/_variables.scss#L128",
529578
usedBy: [{ name: "rmd-table-cell", type: "mixin", packageName: "table" }],
530579
packageName: "table",
531580
type: "Number",
@@ -537,7 +586,7 @@ const sassdoc: PackageSassDoc = {
537586
name: "rmd-table-header-sticky-position",
538587
description:
539588
"The default position for a sticky header cell in all tables. If you want to update the header position for a specific table, you can just use the `rmd-table-theme-update-var` mixin for the `sticky-header` variable instead.",
540-
source: "packages/table/src/_variables.scss#L102",
589+
source: "packages/table/src/_variables.scss#L135",
541590
packageName: "table",
542591
type: "Number",
543592
value: "0",
@@ -547,7 +596,7 @@ const sassdoc: PackageSassDoc = {
547596
name: "rmd-table-row-hover-color",
548597
description:
549598
"The background color to use when hovering over a row within the `<tbody>` and the `hoverable` styles have been enabled.",
550-
source: "packages/table/src/_variables.scss#L109",
599+
source: "packages/table/src/_variables.scss#L142",
551600
requires: [
552601
{ name: "rmd-black-base", type: "variable", packageName: "theme" },
553602
],
@@ -561,7 +610,7 @@ const sassdoc: PackageSassDoc = {
561610
name: "rmd-table-row-selected-color",
562611
description:
563612
"The background color to use when a row has been selected within the `<tbody>`.",
564-
source: "packages/table/src/_variables.scss#L116",
613+
source: "packages/table/src/_variables.scss#L149",
565614
requires: [
566615
{
567616
name: "rmd-states-theme-var",
@@ -579,7 +628,7 @@ const sassdoc: PackageSassDoc = {
579628
name: "rmd-table-footer-sticky-position",
580629
description:
581630
"The default position for a sticky footer cell in all tables. If you want to update the footer position for a specific table, you can just use the `rmd-table-theme-update-var` mixin for the `sticky-footer` variable instead.",
582-
source: "packages/table/src/_variables.scss#L123",
631+
source: "packages/table/src/_variables.scss#L156",
583632
packageName: "table",
584633
type: "Number",
585634
value: "0",
@@ -589,7 +638,7 @@ const sassdoc: PackageSassDoc = {
589638
name: "rmd-table-checkbox-padding",
590639
description:
591640
"The amount of padding to apply to a table checkbox cell. This should normally be smaller than the default left and right padding to reduce the width of this cell.",
592-
source: "packages/table/src/_variables.scss#L130",
641+
source: "packages/table/src/_variables.scss#L163",
593642
usedBy: [{ name: "rmd-table-cell", type: "mixin", packageName: "table" }],
594643
packageName: "table",
595644
type: "Number",
@@ -600,7 +649,7 @@ const sassdoc: PackageSassDoc = {
600649
name: "rmd-table-theme-values",
601650
description:
602651
'A Map of all the "themeable" parts of the table package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.',
603-
source: "packages/table/src/_variables.scss#L137-L148",
652+
source: "packages/table/src/_variables.scss#L170-L182",
604653
usedBy: [
605654
{ name: "rmd-table-theme", type: "function", packageName: "table" },
606655
{ name: "rmd-table-theme-var", type: "function", packageName: "table" },
@@ -615,9 +664,9 @@ const sassdoc: PackageSassDoc = {
615664
packageName: "table",
616665
type: "Map",
617666
value:
618-
"(\n cell-color: $rmd-table-cell-color,\n cell-h-padding: $rmd-table-cell-horizontal-padding,\n cell-v-padding: $rmd-table-cell-vertical-padding,\n cell-height: $rmd-table-cell-height,\n cell-dense-height: $rmd-table-cell-dense-height,\n hover-color: $rmd-table-row-hover-color,\n selected-color: $rmd-table-row-selected-color,\n sticky-header: $rmd-table-header-sticky-position,\n sticky-cell: $rmd-table-cell-sticky-position,\n sticky-footer: $rmd-table-footer-sticky-position,\n)",
667+
"(\n border-color: $rmd-table-border-color,\n cell-color: $rmd-table-cell-color,\n cell-h-padding: $rmd-table-cell-horizontal-padding,\n cell-v-padding: $rmd-table-cell-vertical-padding,\n cell-height: $rmd-table-cell-height,\n cell-dense-height: $rmd-table-cell-dense-height,\n hover-color: $rmd-table-row-hover-color,\n selected-color: $rmd-table-row-selected-color,\n sticky-header: $rmd-table-header-sticky-position,\n sticky-cell: $rmd-table-cell-sticky-position,\n sticky-footer: $rmd-table-footer-sticky-position,\n)",
619668
compiled:
620-
"(\n cell-color: var(--rmd-theme-text-primary-on-background, #212121),\n cell-h-padding: 1rem,\n cell-v-padding: 0.375rem,\n cell-height: 3.25rem,\n cell-dense-height: 2rem,\n hover-color: rgba(0, 0, 0, 0.12),\n selected-color: var(--rmd-states-selected-color, rgba(0, 0, 0, 0.16)),\n sticky-header: 0,\n sticky-cell: 0,\n sticky-footer: 0,\n)",
669+
"(\n border-color: #e0e0e0,\n cell-color: var(--rmd-theme-text-primary-on-background, #212121),\n cell-h-padding: 1rem,\n cell-v-padding: 0.375rem,\n cell-height: 3.25rem,\n cell-dense-height: 2rem,\n hover-color: rgba(0, 0, 0, 0.12),\n selected-color: var(--rmd-states-selected-color, rgba(0, 0, 0, 0.16)),\n sticky-header: 0,\n sticky-cell: 0,\n sticky-footer: 0,\n)",
621670
overridable: true,
622671
},
623672
},

0 commit comments

Comments
 (0)