From 9e66fa30dc4a132db6a31cc428b4901b45d8b605 Mon Sep 17 00:00:00 2001 From: Annie Wang Date: Mon, 9 Nov 2020 15:56:22 -0800 Subject: [PATCH 1/3] feat(material-experimental/mdc-table): add mat-table selector --- src/dev-app/mdc-table/mdc-table-demo.html | 32 +++++++- src/material-experimental/mdc-table/cell.ts | 6 +- src/material-experimental/mdc-table/row.ts | 6 +- .../mdc-table/table.scss | 74 +++++++++++++++++++ src/material-experimental/mdc-table/table.ts | 2 +- 5 files changed, 112 insertions(+), 8 deletions(-) diff --git a/src/dev-app/mdc-table/mdc-table-demo.html b/src/dev-app/mdc-table/mdc-table-demo.html index 8611d129cdfa..856253ea5913 100644 --- a/src/dev-app/mdc-table/mdc-table-demo.html +++ b/src/dev-app/mdc-table/mdc-table-demo.html @@ -138,4 +138,34 @@

Sticky Footer

- \ No newline at end of file + + +

Basic flex table

+ + + + No. + {{element.position}} + + + + + Name + {{element.name}} + + + + + Weight + {{element.weight}} + + + + + Symbol + {{element.symbol}} + + + + + diff --git a/src/material-experimental/mdc-table/cell.ts b/src/material-experimental/mdc-table/cell.ts index eaae19f9001f..cc3fa4df6a86 100644 --- 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 index 09d11e899962..e26097657152 100644 --- a/src/material-experimental/mdc-table/row.ts +++ b/src/material-experimental/mdc-table/row.ts @@ -60,7 +60,7 @@ export class MatRowDef extends CdkRowDef { /** 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 index b02c461d3b76..95ef49b06bec 100644 --- a/src/material-experimental/mdc-table/table.scss +++ b/src/material-experimental/mdc-table/table.scss @@ -4,7 +4,15 @@ @include mdc-data-table-core-styles($query: $mat-base-styles-without-animation-query); +<<<<<<< HEAD .mat-mdc-table-sticky { +======= +$mat-header-row-height: 56px; +$mat-row-height: 48px; +$mat-row-horizontal-padding: 24px; + +.mat-table-sticky { +>>>>>>> cffb085c7 (feat(material-experimental/mdc-table): add mat-table selector) @include vendor-prefixes.position-sticky; } @@ -15,3 +23,69 @@ .mdc-data-table__table { table-layout: auto; } + +/** + * 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; +} diff --git a/src/material-experimental/mdc-table/table.ts b/src/material-experimental/mdc-table/table.ts index 4bb0c8546110..f942c7a5d838 100644 --- 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'], From a7cbbc6f368aecf318f1e13a889386ad547f17ef Mon Sep 17 00:00:00 2001 From: Annie Wang Date: Thu, 3 Dec 2020 16:39:35 -0800 Subject: [PATCH 2/3] fix(material-experimental/mdc-table): extract variables and flex based tables styles into private mixin --- .../mdc-table/BUILD.bazel | 1 + .../mdc-table/table.scss | 76 +------------------ src/material/table/BUILD.bazel | 16 +++- src/material/table/_table-flex-styles.scss | 71 +++++++++++++++++ src/material/table/table.scss | 71 +---------------- 5 files changed, 90 insertions(+), 145 deletions(-) create mode 100644 src/material/table/_table-flex-styles.scss diff --git a/src/material-experimental/mdc-table/BUILD.bazel b/src/material-experimental/mdc-table/BUILD.bazel index db3785c0cdef..9687fb80fa6a 100644 --- 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/table.scss b/src/material-experimental/mdc-table/table.scss index 95ef49b06bec..616b9ae2cecf 100644 --- a/src/material-experimental/mdc-table/table.scss +++ b/src/material-experimental/mdc-table/table.scss @@ -1,18 +1,12 @@ @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-table-flex-styles; -<<<<<<< HEAD .mat-mdc-table-sticky { -======= -$mat-header-row-height: 56px; -$mat-row-height: 48px; -$mat-row-horizontal-padding: 24px; - -.mat-table-sticky { ->>>>>>> cffb085c7 (feat(material-experimental/mdc-table): add mat-table selector) @include vendor-prefixes.position-sticky; } @@ -23,69 +17,3 @@ $mat-row-horizontal-padding: 24px; .mdc-data-table__table { table-layout: auto; } - -/** - * 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; -} diff --git a/src/material/table/BUILD.bazel b/src/material/table/BUILD.bazel index adec57fe918c..92a566c6d31a 100644 --- a/src/material/table/BUILD.bazel +++ b/src/material/table/BUILD.bazel @@ -31,14 +31,26 @@ ng_module( sass_library( name = "table_scss_lib", - srcs = glob(["**/_*.scss"]), + srcs = glob( + ["**/_*.scss"], + exclude = ["_table-flex-styles.scss"], + ), + deps = ["//src/material/core:core_scss_lib"], +) + +sass_library( + name = "table_flex_scss_lib", + src = "_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 new file mode 100644 index 000000000000..a5a2101d70f4 --- /dev/null +++ b/src/material/table/_table-flex-styles.scss @@ -0,0 +1,71 @@ +/** + * Flex-based table structure + */ +$mat-header-row-height: 56px; +$mat-row-height: 48px; +$mat-row-horizontal-padding: 24px; + +@mixin _mat-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 index 7014bfa6c0e0..3291db4177da 100644 --- 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-table-flex-styles; /** * Native HTML table structure From 18125b73b3d23f73bbd75ef1f1fd8b125d3f13c0 Mon Sep 17 00:00:00 2001 From: Annie Wang Date: Fri, 4 Dec 2020 11:23:37 -0800 Subject: [PATCH 3/3] fixup! fix(material-experimental/mdc-table): extract variables and flex based tables styles into private mixin --- src/material-experimental/mdc-table/table.scss | 2 +- src/material/table/BUILD.bazel | 7 ++----- src/material/table/_table-flex-styles.scss | 3 ++- src/material/table/table.scss | 2 +- 4 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/material-experimental/mdc-table/table.scss b/src/material-experimental/mdc-table/table.scss index 616b9ae2cecf..150b51b5a2e7 100644 --- a/src/material-experimental/mdc-table/table.scss +++ b/src/material-experimental/mdc-table/table.scss @@ -4,7 +4,7 @@ @import '../../material/table/table-flex-styles'; @include mdc-data-table-core-styles($query: $mat-base-styles-without-animation-query); -@include _mat-table-flex-styles; +@include mat-private-table-flex-styles(); .mat-mdc-table-sticky { @include vendor-prefixes.position-sticky; diff --git a/src/material/table/BUILD.bazel b/src/material/table/BUILD.bazel index 92a566c6d31a..64471ffe855d 100644 --- a/src/material/table/BUILD.bazel +++ b/src/material/table/BUILD.bazel @@ -31,16 +31,13 @@ ng_module( sass_library( name = "table_scss_lib", - srcs = glob( - ["**/_*.scss"], - exclude = ["_table-flex-styles.scss"], - ), + srcs = ["_table-theme.scss"], deps = ["//src/material/core:core_scss_lib"], ) sass_library( name = "table_flex_scss_lib", - src = "_table-flex-styles.scss", + srcs = ["_table-flex-styles.scss"], deps = ["//src/material/core:core_scss_lib"], ) diff --git a/src/material/table/_table-flex-styles.scss b/src/material/table/_table-flex-styles.scss index a5a2101d70f4..a0bd715e8084 100644 --- a/src/material/table/_table-flex-styles.scss +++ b/src/material/table/_table-flex-styles.scss @@ -5,7 +5,8 @@ $mat-header-row-height: 56px; $mat-row-height: 48px; $mat-row-horizontal-padding: 24px; -@mixin _mat-table-flex-styles { +// 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; } diff --git a/src/material/table/table.scss b/src/material/table/table.scss index 3291db4177da..d2b2ef881ade 100644 --- a/src/material/table/table.scss +++ b/src/material/table/table.scss @@ -1,7 +1,7 @@ @use '../core/style/vendor-prefixes'; @import './table-flex-styles'; -@include _mat-table-flex-styles; +@include mat-private-table-flex-styles(); /** * Native HTML table structure