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

This reverts commit c76a09e.

Author: wagnermaciel

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 {

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

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

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