From b17ed9dde87ea0d5d963357b48616f49f6db58c2 Mon Sep 17 00:00:00 2001
From: Andrew Seguin <andrewseguin@users.noreply.github.com>
Date: Thu, 29 Jul 2021 09:32:51 -0600
Subject: [PATCH] fix(material-experimental/mdc-table): flex tables should
 stretch cells (#23259)

---
 .../material-experimental/mdc-table/index.ts  |  3 ++
 .../table-flex-large-row-example.css          |  9 +++++
 .../table-flex-large-row-example.html         | 28 +++++++++++++++
 .../table-flex-large-row-example.ts           | 34 +++++++++++++++++++
 src/dev-app/mdc-table/mdc-table-demo.html     |  3 ++
 .../mdc-table/table.scss                      | 17 ++++++++++
 6 files changed, 94 insertions(+)
 create mode 100644 src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.css
 create mode 100644 src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.html
 create mode 100644 src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.ts

diff --git a/src/components-examples/material-experimental/mdc-table/index.ts b/src/components-examples/material-experimental/mdc-table/index.ts
index 40c325508502..ba9bd105ea31 100644
--- a/src/components-examples/material-experimental/mdc-table/index.ts
+++ b/src/components-examples/material-experimental/mdc-table/index.ts
@@ -55,6 +55,7 @@ import {
 import {
   TableGeneratedColumnsExample
 } from './table-generated-columns/table-generated-columns-example';
+import {TableFlexLargeRowExample} from './table-flex-large-row/table-flex-large-row-example';
 
 export {
   TableBasicExample,
@@ -65,6 +66,7 @@ export {
   TableExpandableRowsExample,
   TableFilteringExample,
   TableFlexBasicExample,
+  TableFlexLargeRowExample,
   TableFooterRowExample,
   TableGeneratedColumnsExample,
   TableHarnessExample,
@@ -99,6 +101,7 @@ const EXAMPLES = [
   TableExpandableRowsExample,
   TableFilteringExample,
   TableFlexBasicExample,
+  TableFlexLargeRowExample,
   TableFooterRowExample,
   TableGeneratedColumnsExample,
   TableHarnessExample,
diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.css b/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.css
new file mode 100644
index 000000000000..82286dc7d121
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.css
@@ -0,0 +1,9 @@
+.mat-mdc-table {
+  width: 100%;
+  max-height: 500px;
+  overflow: auto;
+}
+
+.mat-column-name {
+  height: 100px;
+}
diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.html b/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.html
new file mode 100644
index 000000000000..09bb2c212897
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.html
@@ -0,0 +1,28 @@
+<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
\ No newline at end of file
diff --git a/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.ts b/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.ts
new file mode 100644
index 000000000000..1b3b123f9cbe
--- /dev/null
+++ b/src/components-examples/material-experimental/mdc-table/table-flex-large-row/table-flex-large-row-example.ts
@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+/**
+ * @title Flex table where one column's cells has a greater height than others.
+ */
+@Component({
+  selector: 'table-flex-large-row-example',
+  styleUrls: ['table-flex-large-row-example.css'],
+  templateUrl: 'table-flex-large-row-example.html',
+})
+export class TableFlexLargeRowExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}
diff --git a/src/dev-app/mdc-table/mdc-table-demo.html b/src/dev-app/mdc-table/mdc-table-demo.html
index 13661ed6f338..2b28db9618af 100644
--- a/src/dev-app/mdc-table/mdc-table-demo.html
+++ b/src/dev-app/mdc-table/mdc-table-demo.html
@@ -7,6 +7,9 @@ <h3>Table basic with recycled rows</h3>
 <h3>Table basic flex</h3>
 <table-flex-basic-example></table-flex-basic-example>
 
+<h3>Table flex with large row</h3>
+<table-flex-large-row-example></table-flex-large-row-example>
+
 <h3>Table dynamic columns</h3>
 <table-dynamic-columns-example></table-dynamic-columns-example>
 
diff --git a/src/material-experimental/mdc-table/table.scss b/src/material-experimental/mdc-table/table.scss
index 983735df613f..c1f54f1d9bf6 100644
--- a/src/material-experimental/mdc-table/table.scss
+++ b/src/material-experimental/mdc-table/table.scss
@@ -47,3 +47,20 @@ mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-f
 .mat-mdc-table .mat-mdc-footer-row:hover {
   background-color: inherit;
 }
+
+// Flex rows should not set a definite height, but instead stretch to the height of their
+// children. Otherwise, the cells grow larger than the row and the layout breaks.
+.mat-mdc-table mat-header-row.mat-mdc-header-row,
+.mat-mdc-table mat-row.mat-mdc-row,
+.mat-mdc-table mat-footer-row.mat-mdc-footer-cell {
+  height: unset;
+}
+
+// Flex cells should stretch to the height of their parent. This was okay for the legacy
+// table since the cells were centered and the borders displayed on the rows, but the MDC
+// version displays borders on the cells and do not correctly line up with the row bottom.
+mat-header-cell.mat-mdc-header-cell,
+mat-cell.mat-mdc-cell,
+mat-footer-cell.mat-mdc-footer-cell {
+  align-self: stretch;
+}