fix(material/table): switch back to class-based styling for flex tables (#22350)

In an earlier PR we switched the flex-based table styles to target the tag names, rather than classes in order to support flex tables in MDC. The problem with targeting tag names is that it doesn't allow our styles to be applied to other elements within the table. E.g. in #22349 the user isn't able to target the "no data" row.

These changes switch back to targeting classes and add some styles to prevent the flex-specific styles from bleeding into the table-based ones.

Fixes #22349.

(cherry picked from commit c76a09e)

Author: crisbeto

src/components-examples/material/table/table-expandable-rows/table-expandable-rows-example.css

@@ -4,6 +4,7 @@ table {
 
 tr.example-detail-row {
   height: 0;
+  min-height: 0;
 }
 
 tr.example-element-row:not(.example-expanded-row):hover {

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-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row {
+.mat-mdc-row, .mat-mdc-header-row, .mdc-mdc-footer-row {
   border-bottom: none;
 }
 

src/material/table/_table-flex-styles.scss

@@ -3,41 +3,54 @@ $header-row-height: 56px;
 $row-height: 48px;
 $row-horizontal-padding: 24px;
 
-// Only use tag name selectors here since the styles are shared between MDC and non-MDC
-@mixin private-table-flex-styles {
-  mat-table {
+@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) {
     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: '';
+      }
+    }
   }
 
-  mat-header-row {
+  // The remaining styles can leak to the native table without affecting it.
+  // We keep them outside to lower the specificity.
+  .#{$prefix}-header-row {
     min-height: $header-row-height;
   }
 
-  mat-row, mat-footer-row {
+  .#{$prefix}-row, .#{$prefix}-footer-row {
     min-height: $row-height;
   }
 
-  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;
+  .#{$prefix}-row, .#{$prefix}-header-row, .#{$prefix}-footer-row {
     border-bottom-width: 1px;
-    border-style: solid;
+    border-bottom-style: solid;
     align-items: center;
     box-sizing: border-box;
-
-    // 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 {
+  .#{$prefix}-cell, .#{$prefix}-header-cell, .#{$prefix}-footer-cell {
+    flex: 1;
+    overflow: hidden;
+    word-wrap: break-word;
+    min-height: inherit;
+    align-items: center;
+
     // 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 {
@@ -58,13 +71,4 @@ $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;
-  }
 }

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);
   }

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();
+@include table-flex-styles.private-table-flex-styles('mat');
 
 // Native HTML table structure
 table.mat-table {