feat(material-experimental/mdc-table): add mat-table selector (#20994)

* feat(material-experimental/mdc-table): add mat-table selector * fix(material-experimental/mdc-table): extract variables and flex based tables styles into private mixin * fixup! fix(material-experimental/mdc-table): extract variables and flex based tables styles into private mixin
angular · Dec 17, 2020 · f0f3748 · f0f3748
1 parent c5a111d
commit f0f3748
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 79 deletions.
diff --git a/src/dev-app/mdc-table/mdc-table-demo.html b/src/dev-app/mdc-table/mdc-table-demo.html
@@ -138,4 +138,34 @@ <h2> Sticky Footer </h2>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
   </table>
-</div>
+</div>
+
+<h2>Basic flex table</h2>
+<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>
diff --git a/src/material-experimental/mdc-table/BUILD.bazel b/src/material-experimental/mdc-table/BUILD.bazel
@@ -48,6 +48,7 @@ sass_binary(
         "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
         "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
         "//src/material/core:core_scss_lib",
+        "//src/material/table:table_flex_scss_lib",
     ],
 )
 

diff --git a/src/material-experimental/mdc-table/cell.ts b/src/material-experimental/mdc-table/cell.ts
@@ -80,7 +80,7 @@ export class MatColumnDef extends CdkColumnDef {
 
 /** Header cell template container that adds the right classes and role. */
 @Directive({
-  selector: 'th[mat-header-cell]',
+  selector: 'mat-header-cell, th[mat-header-cell]',
   host: {
     'class': 'mat-mdc-header-cell mdc-data-table__header-cell',
     'role': 'columnheader',
@@ -90,7 +90,7 @@ export class MatHeaderCell extends CdkHeaderCell {}
 
 /** Footer cell template container that adds the right classes and role. */
 @Directive({
-  selector: 'td[mat-footer-cell]',
+  selector: 'mat-footer-cell, td[mat-footer-cell]',
   host: {
     'class': 'mat-mdc-footer-cell mdc-data-table__cell',
     'role': 'gridcell',
@@ -100,7 +100,7 @@ export class MatFooterCell extends CdkFooterCell {}
 
 /** Cell template container that adds the right classes and role. */
 @Directive({
-  selector: 'td[mat-cell]',
+  selector: 'mat-cell, td[mat-cell]',
   host: {
     'class': 'mat-mdc-cell mdc-data-table__cell',
     'role': 'gridcell',

diff --git a/src/material-experimental/mdc-table/row.ts b/src/material-experimental/mdc-table/row.ts
@@ -60,7 +60,7 @@ export class MatRowDef<T> extends CdkRowDef<T> {
 
 /** Footer template container that contains the cell outlet. Adds the right class and role. */
 @Component({
-  selector: 'tr[mat-header-row]',
+  selector: 'mat-header-row, tr[mat-header-row]',
   template: CDK_ROW_TEMPLATE,
   host: {
     'class': 'mat-mdc-header-row mdc-data-table__header-row',
@@ -78,7 +78,7 @@ export class MatHeaderRow extends CdkHeaderRow {
 
 /** Footer template container that contains the cell outlet. Adds the right class and role. */
 @Component({
-  selector: 'tr[mat-footer-row]',
+  selector: 'mat-footer-row, tr[mat-footer-row]',
   template: CDK_ROW_TEMPLATE,
   host: {
     'class': 'mat-mdc-footer-row mdc-data-table__row',
@@ -96,7 +96,7 @@ export class MatFooterRow extends CdkFooterRow {
 
 /** Data row template container that contains the cell outlet. Adds the right class and role. */
 @Component({
-  selector: 'tr[mat-row]',
+  selector: 'mat-row, tr[mat-row]',
   template: CDK_ROW_TEMPLATE,
   host: {
     'class': 'mat-mdc-row mdc-data-table__row',

diff --git a/src/material-experimental/mdc-table/table.scss b/src/material-experimental/mdc-table/table.scss
@@ -1,8 +1,10 @@
 @use '../../material/core/style/vendor-prefixes';
 @import '@material/data-table/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
+@import '../../material/table/table-flex-styles';
 
 @include mdc-data-table-core-styles($query: $mat-base-styles-without-animation-query);
+@include mat-private-table-flex-styles();
 
 .mat-mdc-table-sticky {
   @include vendor-prefixes.position-sticky;

diff --git a/src/material-experimental/mdc-table/table.ts b/src/material-experimental/mdc-table/table.ts
@@ -16,7 +16,7 @@ import {
 import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cdk/collections';
 
 @Component({
-  selector: 'table[mat-table]',
+  selector: 'mat-table, table[mat-table]',
   exportAs: 'matTable',
   template: CDK_TABLE_TEMPLATE,
   styleUrls: ['table.css'],

diff --git a/src/material/table/BUILD.bazel b/src/material/table/BUILD.bazel
@@ -31,14 +31,23 @@ ng_module(
 
 sass_library(
     name = "table_scss_lib",
-    srcs = glob(["**/_*.scss"]),
+    srcs = ["_table-theme.scss"],
+    deps = ["//src/material/core:core_scss_lib"],
+)
+
+sass_library(
+    name = "table_flex_scss_lib",
+    srcs = ["_table-flex-styles.scss"],
     deps = ["//src/material/core:core_scss_lib"],
 )
 
 sass_binary(
     name = "table_scss",
     src = "table.scss",
-    deps = ["//src/material/core:core_scss_lib"],
+    deps = [
+        ":table_flex_scss_lib",
+        "//src/material/core:core_scss_lib",
+    ],
 )
 
 ng_test_library(

diff --git a/src/material/table/_table-flex-styles.scss b/src/material/table/_table-flex-styles.scss
@@ -0,0 +1,72 @@
+/**
+ * Flex-based table structure
+ */
+$mat-header-row-height: 56px;
+$mat-row-height: 48px;
+$mat-row-horizontal-padding: 24px;
+
+// Only use tag name selectors here since the styles are shared between MDC and non-MDC
+@mixin mat-private-table-flex-styles {
+  mat-table {
+    display: block;
+  }
+
+  mat-header-row {
+    min-height: $mat-header-row-height;
+  }
+
+  mat-row, mat-footer-row {
+    min-height: $mat-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;
+    border-bottom-width: 1px;
+    border-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 {
+    // 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 {
+      padding-left: $mat-row-horizontal-padding;
+
+      [dir='rtl'] &:not(:only-of-type) {
+        padding-left: 0;
+        padding-right: $mat-row-horizontal-padding;
+      }
+    }
+
+    &:last-of-type {
+      padding-right: $mat-row-horizontal-padding;
+
+      [dir='rtl'] &:not(:only-of-type) {
+        padding-right: 0;
+        padding-left: $mat-row-horizontal-padding;
+      }
+    }
+  }
+
+  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.scss b/src/material/table/table.scss
@@ -1,74 +1,7 @@
 @use '../core/style/vendor-prefixes';
+@import './table-flex-styles';
 
-$mat-header-row-height: 56px;
-$mat-row-height: 48px;
-$mat-row-horizontal-padding: 24px;
-
-/**
- * Flex-based table structure
- */
-mat-table {
-  display: block;
-}
-
-mat-header-row {
-  min-height: $mat-header-row-height;
-}
-
-mat-row, mat-footer-row {
-  min-height: $mat-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;
-  border-bottom-width: 1px;
-  border-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 {
-  // 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 {
-    padding-left: $mat-row-horizontal-padding;
-
-    [dir='rtl'] &:not(:only-of-type) {
-      padding-left: 0;
-      padding-right: $mat-row-horizontal-padding;
-    }
-  }
-
-  &:last-of-type {
-    padding-right: $mat-row-horizontal-padding;
-
-    [dir='rtl'] &:not(:only-of-type) {
-      padding-right: 0;
-      padding-left: $mat-row-horizontal-padding;
-    }
-  }
-}
-
-mat-cell, mat-header-cell, mat-footer-cell {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  word-wrap: break-word;
-  min-height: inherit;
-}
+@include mat-private-table-flex-styles();
 
 /**
  * Native HTML table structure