From 96144c123ed80dea17c4c9ff5d192a6802245a5c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 26 Mar 2021 20:31:51 +0100
Subject: [PATCH] fix(material/table): switch back to class-based styling for
 flex tables

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.
---
 .../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, 40 insertions(+), 35 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 a3cc2d66194c..aeed196b021c 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,6 +4,7 @@ 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 d7c8068cfa4b..b034d5e8bd99 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-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;
 }
 
diff --git a/src/material/table/_table-flex-styles.scss b/src/material/table/_table-flex-styles.scss
index 6ae1a79dd5d2..a41cc8ff80e2 100644
--- a/src/material/table/_table-flex-styles.scss
+++ b/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;
-  }
 }
diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss
index ade8f26d397f..7f80664fbeed 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 52d21b53bf49..4cb2560fb93b 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();
+@include table-flex-styles.private-table-flex-styles('mat');
 
 // Native HTML table structure
 table.mat-table {