From 2872092fe05937f469569713ed90447953982b73 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Wed, 21 Jul 2021 13:06:48 -0700 Subject: [PATCH] Revert "fix(material/table): switch back to class-based styling for flex tables (#22350)" This reverts commit 749dcbfbbe06b2c6a3f7e07d7e27a37cf0468f4c. --- .../table-expandable-rows-example.css | 1 - .../mdc-table/table.scss | 4 +- src/material/table/_table-flex-styles.scss | 64 +++++++++---------- src/material/table/_table-theme.scss | 4 +- src/material/table/table.scss | 2 +- 5 files changed, 35 insertions(+), 40 deletions(-) diff --git a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.css b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.css index aeed196b021c..a3cc2d66194c 100644 --- a/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.css +++ b/src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.css @@ -4,7 +4,6 @@ table { tr.example-detail-row { height: 0; - min-height: 0; } tr.example-element-row:not(.example-expanded-row):hover { diff --git a/src/material-experimental/mdc-table/table.scss b/src/material-experimental/mdc-table/table.scss index b034d5e8bd99..d7c8068cfa4b 100644 --- a/src/material-experimental/mdc-table/table.scss +++ b/src/material-experimental/mdc-table/table.scss @@ -3,8 +3,8 @@ @use '../mdc-helpers/mdc-helpers'; @use '../../material/table/table-flex-styles'; -@include table-flex-styles.private-table-flex-styles('mat-mdc'); @include mdc-data-table.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query); +@include table-flex-styles.private-table-flex-styles(); .mat-mdc-table-sticky { // Note that the table can either set this class or an inline style to make something sticky. @@ -24,7 +24,7 @@ // MDC table rows are styled with a top border, whereas our legacy flex table styles rows with // a bottom border. Remove the bottom border style from the rows and let MDC display its top // border. -.mat-mdc-row, .mat-mdc-header-row, .mdc-mdc-footer-row { +mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row { border-bottom: none; } diff --git a/src/material/table/_table-flex-styles.scss b/src/material/table/_table-flex-styles.scss index a41cc8ff80e2..6ae1a79dd5d2 100644 --- a/src/material/table/_table-flex-styles.scss +++ b/src/material/table/_table-flex-styles.scss @@ -3,54 +3,41 @@ $header-row-height: 56px; $row-height: 48px; $row-horizontal-padding: 24px; -@mixin private-table-flex-styles($prefix) { - // These styles are nested under a `:not(table)`, because - // they can break the non-flex table if they leak out. - .#{$prefix}-table:not(table) { +// Only use tag name selectors here since the styles are shared between MDC and non-MDC +@mixin private-table-flex-styles { + mat-table { display: block; - - .#{$prefix}-cell, .#{$prefix}-header-cell, .#{$prefix}-footer-cell { - display: flex; - } - - .#{$prefix}-row, .#{$prefix}-header-row, .#{$prefix}-footer-row { - display: flex; - - // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo - // element that will stretch the row the correct height. See: - // https://connect.microsoft.com/IE/feedback/details/802625 - &::after { - display: inline-block; - min-height: inherit; - content: ''; - } - } } - // The remaining styles can leak to the native table without affecting it. - // We keep them outside to lower the specificity. - .#{$prefix}-header-row { + mat-header-row { min-height: $header-row-height; } - .#{$prefix}-row, .#{$prefix}-footer-row { + mat-row, mat-footer-row { min-height: $row-height; } - .#{$prefix}-row, .#{$prefix}-header-row, .#{$prefix}-footer-row { + mat-row, mat-header-row, mat-footer-row { + display: flex; + // Define a border style, but then widths default to 3px. Reset them to 0px except the bottom + // which should be 1px; + border-width: 0; border-bottom-width: 1px; - border-bottom-style: solid; + border-style: solid; align-items: center; box-sizing: border-box; - } - .#{$prefix}-cell, .#{$prefix}-header-cell, .#{$prefix}-footer-cell { - flex: 1; - overflow: hidden; - word-wrap: break-word; - min-height: inherit; - align-items: center; + // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo + // element that will stretch the row the correct height. See: + // https://connect.microsoft.com/IE/feedback/details/802625 + &::after { + display: inline-block; + min-height: inherit; + content: ''; + } + } + mat-cell, mat-header-cell, mat-footer-cell { // Note: we use `first-of-type`/`last-of-type` here in order to prevent extra // elements like ripples or badges from throwing off the layout (see #11165). &:first-of-type { @@ -71,4 +58,13 @@ $row-horizontal-padding: 24px; } } } + + mat-cell, mat-header-cell, mat-footer-cell { + flex: 1; + display: flex; + align-items: center; + overflow: hidden; + word-wrap: break-word; + min-height: inherit; + } } diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index 7f80664fbeed..ade8f26d397f 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -13,13 +13,13 @@ } .mat-table thead, .mat-table tbody, .mat-table tfoot, - .mat-header-row, .mat-row, .mat-footer-row, + mat-header-row, mat-row, mat-footer-row, [mat-header-row], [mat-row], [mat-footer-row], .mat-table-sticky { background: inherit; } - .mat-row, .mat-header-row, .mat-footer-row, + mat-row, mat-header-row, mat-footer-row, th.mat-header-cell, td.mat-cell, td.mat-footer-cell { border-bottom-color: theming.get-color-from-palette($foreground, divider); } diff --git a/src/material/table/table.scss b/src/material/table/table.scss index 4cb2560fb93b..52d21b53bf49 100644 --- a/src/material/table/table.scss +++ b/src/material/table/table.scss @@ -1,7 +1,7 @@ @use '../core/style/vendor-prefixes'; @use './table-flex-styles'; -@include table-flex-styles.private-table-flex-styles('mat'); +@include table-flex-styles.private-table-flex-styles(); // Native HTML table structure table.mat-table {