feat(material-experimental/mdc-table): add MDC styles/classes (#18000)

* feat(material-experimental/mdc-table): add MDC styles/classes

* fix sass build

Author: andrewseguin

src/dev-app/mdc-table/mdc-table-demo.html

@@ -1,4 +1,4 @@
-<table mat-table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
   <!-- Position Column -->
   <ng-container matColumnDef="position">
     <th mat-header-cell *matHeaderCellDef> No. </th>

src/dev-app/mdc-table/mdc-table-demo.scss

@@ -0,0 +1,3 @@
+table {
+  width: 800px;
+}

src/material-experimental/mdc-table/BUILD.bazel

@@ -31,6 +31,9 @@ ng_module(
 sass_library(
     name = "mdc_table_scss_lib",
     srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+    ],
 )
 
 sass_binary(
@@ -39,6 +42,10 @@ sass_binary(
     include_paths = [
         "external/npm/node_modules",
     ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
 )
 
 ###########

src/material-experimental/mdc-table/_mdc-table.scss

@@ -1,7 +1,14 @@
+@import '../mdc-helpers/mdc-helpers';
+@import '@material/data-table/mixins';
+
 @mixin mat-table-theme-mdc($theme) {
-  // TODO: Include theme styles for MDC Table
+  @include mat-using-mdc-theme($theme) {
+    @include mdc-data-table-core-styles($query: $mat-theme-styles-query);
+  }
 }
 
 @mixin mat-table-typography-mdc($config) {
-  // TODO: Include typography styles for MDC Table
+  @include mat-using-mdc-typography($config) {
+    @include mdc-data-table-core-styles($query: $mat-typography-styles-query);
+  }
 }

src/material-experimental/mdc-table/cell.ts

@@ -70,7 +70,7 @@ export class MatColumnDef extends CdkColumnDef {
 @Directive({
   selector: 'th[mat-header-cell]',
   host: {
-    'class': 'mat-mdc-header-cell',
+    'class': 'mat-mdc-header-cell mdc-data-table__header-cell',
     'role': 'columnheader',
   },
 })
@@ -86,7 +86,7 @@ export class MatHeaderCell extends CdkHeaderCell {
 @Directive({
   selector: 'td[mat-footer-cell]',
   host: {
-    'class': 'mat-mdc-footer-cell',
+    'class': 'mat-mdc-footer-cell mdc-data-table__cell',
     'role': 'gridcell',
   },
 })
@@ -102,7 +102,7 @@ export class MatFooterCell extends CdkFooterCell {
 @Directive({
   selector: 'td[mat-cell]',
   host: {
-    'class': 'mat-mdc-cell',
+    'class': 'mat-mdc-cell mdc-data-table__cell',
     'role': 'gridcell',
   },
 })

src/material-experimental/mdc-table/row.ts

@@ -62,7 +62,7 @@ export class MatRowDef<T> extends CdkRowDef<T> {
   selector: 'tr[mat-header-row]',
   template: CDK_ROW_TEMPLATE,
   host: {
-    'class': 'mat-mdc-header-row',
+    'class': 'mat-mdc-header-row mdc-data-table__header-row',
     'role': 'row',
   },
   // See note on CdkTable for explanation on why this uses the default change detection strategy.
@@ -80,7 +80,7 @@ export class MatHeaderRow extends CdkHeaderRow {
   selector: 'tr[mat-footer-row]',
   template: CDK_ROW_TEMPLATE,
   host: {
-    'class': 'mat-mdc-footer-row',
+    'class': 'mat-mdc-footer-row mdc-data-table__row',
     'role': 'row',
   },
   // See note on CdkTable for explanation on why this uses the default change detection strategy.
@@ -98,7 +98,7 @@ export class MatFooterRow extends CdkFooterRow {
   selector: 'tr[mat-row]',
   template: CDK_ROW_TEMPLATE,
   host: {
-    'class': 'mat-mdc-row',
+    'class': 'mat-mdc-row mdc-data-table__row',
     'role': 'row',
   },
   // See note on CdkTable for explanation on why this uses the default change detection strategy.

src/material-experimental/mdc-table/table.scss

@@ -1 +1,4 @@
-// TODO: Include MDC styles for the table
+@import '@material/data-table/mixins';
+@import '../mdc-helpers/mdc-helpers';
+
+@include mdc-data-table-core-styles($query: $mat-base-styles-without-animation-query);

src/material-experimental/mdc-table/table.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {CDK_TABLE_TEMPLATE, CdkTable} from '@angular/cdk/table';
 import {BooleanInput} from '@angular/cdk/coercion';
 
@@ -16,17 +16,24 @@ import {BooleanInput} from '@angular/cdk/coercion';
   template: CDK_TABLE_TEMPLATE,
   styleUrls: ['table.css'],
   host: {
-    'class': 'mat-mdc-table',
+    'class': 'mat-mdc-table mdc-data-table__table',
   },
   providers: [{provide: CdkTable, useExisting: MatTable}],
   encapsulation: ViewEncapsulation.None,
   // See note on CdkTable for explanation on why this uses the default change detection strategy.
   // tslint:disable-next-line:validate-decorators
   changeDetection: ChangeDetectionStrategy.Default,
 })
-export class MatTable<T> extends CdkTable<T> {
+export class MatTable<T> extends CdkTable<T> implements OnInit {
   /** Overrides the sticky CSS class set by the `CdkTable`. */
-  protected stickyCssClass = 'mat-table-sticky';
+  protected stickyCssClass = 'mat-mdc-table-sticky';
 
   static ngAcceptInputType_multiTemplateDataRows: BooleanInput;
+
+  // After ngOnInit, the `CdkTable` has created and inserted the table sections (thead, tbody,
+  // tfoot). MDC requires the `mdc-data-table__content` class to be added to the body.
+  ngOnInit() {
+    super.ngOnInit();
+    this._elementRef.nativeElement.querySelector('tbody').classList.add('mdc-data-table__content');
+  }
 }

src/material-experimental/mdc-theming/BUILD.bazel

@@ -17,6 +17,7 @@ sass_library(
         "//src/material-experimental/mdc-progress-bar:mdc_progress_bar_scss_lib",
         "//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
         "//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
+        "//src/material-experimental/mdc-table:mdc_table_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
     ],
 )

src/material-experimental/mdc-theming/_all-theme.scss

@@ -7,6 +7,7 @@
 @import '../mdc-radio/mdc-radio';
 @import '../mdc-slide-toggle/mdc-slide-toggle';
 @import '../mdc-tabs/mdc-tabs';
+@import '../mdc-table/mdc-table';
 @import '../mdc-progress-bar/mdc-progress-bar';
 
 @mixin angular-material-theme-mdc($theme) {
@@ -21,6 +22,7 @@
   @include mat-progress-bar-theme-mdc($theme);
   @include mat-radio-theme-mdc($theme);
   @include mat-slide-toggle-theme-mdc($theme);
+  @include mat-table-theme-mdc($theme);
   // TODO(andrewjs): Add this back when MDC syncs their slider code into Google-internal code
   // @include mat-slider-theme-mdc($theme);
   @include mat-tabs-theme-mdc($theme);