Skip to content

Commit 4167562

Browse files
crisbetocrisbeto
committed
refactor(material/table): switch to tokens API
Reworks the Material table to use the new tokens API.
1 parent bc7b038 commit 4167562

File tree

4 files changed

+201
-64
lines changed

4 files changed

+201
-64
lines changed

‎src/material/core/tokens/m2/mat/_table.scss

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
@use 'sass:map';
2+
@use '../../../theming/theming';
3+
@use '../../../typography/typography-utils';
4+
@use '../../token-utils';
5+
6+
// The prefix used to generate the fully qualified name for tokens in this file.
7+
$prefix: (mat, table);
8+
9+
// Tokens that can't be configured through Angular Material's current theming API,
10+
// but may be in a future version of the theming API.
11+
@function get-unthemable-tokens() {
12+
@return (
13+
row-item-outline-width: 1px,
14+
);
15+
}
16+
17+
// Tokens that can be configured through Angular Material's color theming API.
18+
@function get-color-tokens($config) {
19+
$foreground: map.get($config, foreground);
20+
$background: map.get($config, background);
21+
22+
@return (
23+
background-color: theming.get-color-from-palette($background, 'card'),
24+
25+
header-headline-color: theming.get-color-from-palette($foreground, text),
26+
row-item-label-text-color: theming.get-color-from-palette($foreground, text),
27+
row-item-outline-color: theming.get-color-from-palette($foreground, divider),
28+
);
29+
}
30+
31+
// Tokens that can be configured through Angular Material's typography theming API.
32+
@function get-typography-tokens($config) {
33+
$fallback-font: typography-utils.font-family($config);
34+
$cell-font-family: typography-utils.font-family($config, body-2) or $fallback-font;
35+
$cell-line-height: typography-utils.line-height($config, body-2);
36+
$cell-font-size: typography-utils.font-size($config, body-2);
37+
$cell-letter-spacing: typography-utils.letter-spacing($config, body-2);
38+
$cell-font-weight: typography-utils.font-weight($config, body-2);
39+
40+
@return (
41+
header-headline-font: typography-utils.font-family($config, subtitle-2) or $fallback-font,
42+
header-headline-line-height: typography-utils.line-height($config, subtitle-2),
43+
header-headline-size: typography-utils.font-size($config, subtitle-2),
44+
header-headline-tracking: typography-utils.letter-spacing($config, subtitle-2),
45+
header-headline-weight: typography-utils.font-weight($config, subtitle-2),
46+
47+
// Plain cells and footer cells have the same typography.
48+
row-item-label-text-font: $cell-font-family,
49+
row-item-label-text-line-height: $cell-line-height,
50+
row-item-label-text-size: $cell-font-size,
51+
row-item-label-text-tracking: $cell-letter-spacing,
52+
row-item-label-text-weight: $cell-font-weight,
53+
54+
footer-supporting-text-font: $cell-font-family,
55+
footer-supporting-text-line-height: $cell-line-height,
56+
footer-supporting-text-size: $cell-font-size,
57+
footer-supporting-text-tracking: $cell-letter-spacing,
58+
footer-supporting-text-weight: $cell-font-weight,
59+
);
60+
}
61+
62+
// Tokens that can be configured through Angular Material's density theming API.
63+
@function get-density-tokens($config) {
64+
$scale: theming.clamp-density($config, -4);
65+
$header-scale: (
66+
0: 56px,
67+
-1: 52px,
68+
-2: 48px,
69+
-3: 44px,
70+
-4: 40px
71+
);
72+
$cell-scale: (
73+
0: 52px,
74+
-1: 48px,
75+
-2: 44px,
76+
-3: 40px,
77+
-4: 36px
78+
);
79+
80+
@return (
81+
header-container-height: map.get($header-scale, $scale),
82+
footer-container-height: map.get($cell-scale, $scale),
83+
row-item-container-height: map.get($cell-scale, $scale),
84+
);
85+
}
86+
87+
// Combines the tokens generated by the above functions into a single map with placeholder values.
88+
// This is used to create token slots.
89+
@function get-token-slots() {
90+
@return token-utils.merge-all(
91+
get-unthemable-tokens(),
92+
get-color-tokens(token-utils.$placeholder-color-config),
93+
get-typography-tokens(token-utils.$placeholder-typography-config),
94+
get-density-tokens(token-utils.$placeholder-density-config)
95+
);
96+
}

‎src/material/table/_table-theme.scss

Lines changed: 11 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,33 @@
1-
@use 'sass:map';
2-
@use '@material/theme/theme-color' as mdc-theme-color;
3-
@use '@material/data-table/data-table' as mdc-data-table;
4-
@use '@material/data-table' as mdc-data-table-theme;
1+
@use '../core/tokens/m2/mat/table' as tokens-mat-table;
52
@use '../core/theming/theming';
6-
@use '../core/mdc-helpers/mdc-helpers';
73
@use '../core/typography/typography';
4+
@use '../core/tokens/token-utils';
85

96
@mixin color($config-or-theme) {
107
$config: theming.get-color-config($config-or-theme);
11-
// Save original values of MDC global variables. We need to save these so we can restore the
12-
// variables to their original values and prevent unintended side effects from using this mixin.
13-
$orig-selected-row-fill-color: mdc-data-table-theme.$selected-row-fill-color;
14-
$orig-divider-color: mdc-data-table-theme.$divider-color;
15-
$orig-row-hover-fill-color: mdc-data-table-theme.$row-hover-fill-color;
16-
$orig-header-row-text-color: mdc-data-table-theme.$header-row-text-color;
17-
$orig-row-text-color: mdc-data-table-theme.$row-text-color;
18-
$orig-stroke-color: mdc-data-table-theme.$stroke-color;
19-
20-
@include mdc-helpers.using-mdc-theme($config) {
21-
mdc-data-table-theme.$selected-row-fill-color: rgba(mdc-theme-color.prop-value(primary), 0.04);
22-
mdc-data-table-theme.$divider-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12);
23-
mdc-data-table-theme.$row-hover-fill-color: rgba(mdc-theme-color.prop-value(on-surface), 0.04);
24-
mdc-data-table-theme.$header-row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
25-
mdc-data-table-theme.$row-text-color: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
26-
mdc-data-table-theme.$stroke-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12);
27-
28-
@include mdc-data-table.table-styles($query: mdc-helpers.$mdc-theme-styles-query);
29-
}
30-
31-
// Restore original values of MDC global variables.
32-
mdc-data-table-theme.$selected-row-fill-color: $orig-selected-row-fill-color;
33-
mdc-data-table-theme.$divider-color: $orig-divider-color;
34-
mdc-data-table-theme.$row-hover-fill-color: $orig-row-hover-fill-color;
35-
mdc-data-table-theme.$header-row-text-color: $orig-header-row-text-color;
36-
mdc-data-table-theme.$row-text-color: $orig-row-text-color;
37-
mdc-data-table-theme.$stroke-color: $orig-stroke-color;
388

399
.mat-mdc-table {
40-
$background: map.get($config, background);
41-
background: theming.get-color-from-palette($background, 'card');
10+
@include token-utils.create-token-values(tokens-mat-table.$prefix,
11+
tokens-mat-table.get-color-tokens($config));
4212
}
4313
}
4414

4515
@mixin typography($config-or-theme) {
4616
$config: typography.private-typography-to-2018-config(
4717
theming.get-typography-config($config-or-theme));
48-
@include mdc-helpers.using-mdc-typography($config) {
49-
@include mdc-data-table.table-styles($query: mdc-helpers.$mdc-typography-styles-query);
18+
19+
.mat-mdc-table {
20+
@include token-utils.create-token-values(tokens-mat-table.$prefix,
21+
tokens-mat-table.get-typography-tokens($config));
5022
}
5123
}
5224

5325
@mixin density($config-or-theme) {
5426
$density-scale: theming.get-density-config($config-or-theme);
27+
5528
.mat-mdc-table {
56-
@include mdc-data-table-theme.density($density-scale,
57-
$query: mdc-helpers.$mdc-base-styles-query);
29+
@include token-utils.create-token-values(tokens-mat-table.$prefix,
30+
tokens-mat-table.get-density-tokens($density-scale));
5831
}
5932
}
6033

‎src/material/table/table.scss

Lines changed: 93 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,102 @@
11
@use '@material/data-table/data-table' as mdc-data-table;
2+
@use '@material/data-table/data-table-cell' as mdc-data-table-cell;
3+
@use '@material/data-table/data-table-header-cell' as mdc-data-table-header-cell;
4+
@use '@material/data-table' as mdc-data-table-theme;
5+
@use '@material/theme/custom-properties' as mdc-custom-properties;
26
@use '../core/mdc-helpers/mdc-helpers';
7+
@use '../core/tokens/token-utils';
8+
@use '../core/tokens/m2/mat/table' as tokens-mat-table;
39
@use './table-flex-styles';
410

5-
@include mdc-helpers.disable-mdc-fallback-declarations {
6-
@include mdc-data-table.table-styles(
7-
$query: mdc-helpers.$mdc-base-styles-without-animation-query);
8-
@include table-flex-styles.private-table-flex-styles();
9-
}
10-
1111
.mat-mdc-table-sticky {
1212
// Note that the table can either set this class or an inline style to make something sticky.
1313
// We set the style as `!important` so that we get an identical specificity in both cases
1414
// and to avoid cases where user styles have a higher specificity.
1515
position: sticky !important;
1616
}
1717

18-
.mat-mdc-table {
19-
// MDC Table applies `table-layout: fixed`, but this is a backwards incompatible
20-
// change since the table did not previously apply it.
21-
// TODO: Add a mixin to MDC to set the layout instead of including this override,
22-
// see this issue: https://github.com/material-components/material-components-web/issues/6412
23-
table-layout: auto;
18+
@mixin _cell-border {
19+
@include token-utils.create-token-slot(border-bottom-color, row-item-outline-color);
20+
@include token-utils.create-token-slot(border-bottom-width, row-item-outline-width);
21+
border-bottom-style: solid;
22+
23+
.mdc-data-table__row:last-child & {
24+
border-bottom: none;
25+
}
26+
}
27+
28+
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
29+
@include mdc-data-table.static-styles($query: mdc-helpers.$mdc-base-styles-query);
30+
@include mdc-data-table-cell.static-styles($query: mdc-helpers.$mdc-base-styles-query);
31+
@include mdc-data-table-header-cell.static-styles($query: mdc-helpers.$mdc-base-styles-query);
32+
@include mdc-data-table-theme.cell-padding(
33+
$leading-padding: mdc-data-table-theme.$cell-leading-padding,
34+
$trailing-padding: mdc-data-table-theme.$cell-trailing-padding,
35+
$query: mdc-helpers.$mdc-base-styles-query
36+
);
37+
@include table-flex-styles.private-table-flex-styles();
38+
39+
.mat-mdc-table {
40+
@include token-utils.create-token-values(
41+
tokens-mat-table.$prefix, tokens-mat-table.get-unthemable-tokens());
42+
43+
// MDC Table applies `table-layout: fixed`, but this is a backwards incompatible
44+
// change since the table did not previously apply it.
45+
// TODO: Add a mixin to MDC to set the layout instead of including this override,
46+
// see this issue: https://github.com/material-components/material-components-web/issues/6412
47+
table-layout: auto;
2448

25-
// The MDC table does not allow text to wrap within the cell. This allows for text to
26-
// wrap when the cell reaches its maximum width.
27-
white-space: normal;
49+
// The MDC table does not allow text to wrap within the cell. This allows for text to
50+
// wrap when the cell reaches its maximum width.
51+
white-space: normal;
52+
53+
@include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) {
54+
@include token-utils.create-token-slot(background-color, background-color);
55+
}
56+
}
57+
58+
@include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) {
59+
.mat-mdc-header-row {
60+
@include token-utils.create-token-slot(height, header-container-height);
61+
}
62+
63+
.mat-mdc-row {
64+
@include token-utils.create-token-slot(height, row-item-container-height);
65+
}
66+
67+
.mat-mdc-footer-row {
68+
@include token-utils.create-token-slot(height, footer-container-height);
69+
}
70+
71+
.mat-mdc-header-cell {
72+
@include _cell-border;
73+
@include token-utils.create-token-slot(color, header-headline-color);
74+
@include token-utils.create-token-slot(font-family, header-headline-font);
75+
@include token-utils.create-token-slot(line-height, header-headline-line-height);
76+
@include token-utils.create-token-slot(font-size, header-headline-size);
77+
@include token-utils.create-token-slot(letter-spacing, header-headline-tracking);
78+
@include token-utils.create-token-slot(font-weight, header-headline-weight);
79+
}
80+
81+
.mat-mdc-cell {
82+
@include _cell-border;
83+
@include token-utils.create-token-slot(color, row-item-label-text-color);
84+
@include token-utils.create-token-slot(font-family, row-item-label-text-font);
85+
@include token-utils.create-token-slot(line-height, row-item-label-text-line-height);
86+
@include token-utils.create-token-slot(font-size, row-item-label-text-size);
87+
@include token-utils.create-token-slot(letter-spacing, row-item-label-text-tracking);
88+
@include token-utils.create-token-slot(font-weight, row-item-label-text-weight);
89+
}
90+
91+
.mat-mdc-footer-cell {
92+
@include token-utils.create-token-slot(color, row-item-label-text-color);
93+
@include token-utils.create-token-slot(font-family, footer-supporting-text-font);
94+
@include token-utils.create-token-slot(line-height, footer-supporting-text-line-height);
95+
@include token-utils.create-token-slot(font-size, footer-supporting-text-size);
96+
@include token-utils.create-token-slot(letter-spacing, footer-supporting-text-tracking);
97+
@include token-utils.create-token-slot(font-weight, footer-supporting-text-weight);
98+
}
99+
}
28100
}
29101

30102
// MDC table rows are styled with a top border, whereas our legacy flex table styles rows with
@@ -43,19 +115,14 @@ mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-f
43115
background: inherit;
44116
}
45117

46-
// Disable hover styling while MDC uses an opacity for its color.
47-
// When the hover style is used with sticky cells, the opacity shows the cells overlapping.
48-
.mat-mdc-table .mat-mdc-row:hover,
49-
.mat-mdc-table .mat-mdc-footer-row:hover {
50-
background-color: inherit;
51-
}
52-
53118
// Flex rows should not set a definite height, but instead stretch to the height of their
54119
// children. Otherwise, the cells grow larger than the row and the layout breaks.
55-
.mat-mdc-table mat-header-row.mat-mdc-header-row,
56-
.mat-mdc-table mat-row.mat-mdc-row,
57-
.mat-mdc-table mat-footer-row.mat-mdc-footer-cell {
58-
height: unset;
120+
.mat-mdc-flex-table {
121+
@include token-utils.create-token-values(tokens-mat-table.$prefix, (
122+
header-container-height: unset,
123+
footer-container-height: unset,
124+
row-item-container-height: unset,
125+
));
59126
}
60127

61128
// Flex cells should stretch to the height of their parent. This was okay for the legacy

‎src/material/table/table.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export class MatRecycleRows {}
4545
host: {
4646
'class': 'mat-mdc-table mdc-data-table__table',
4747
'[class.mdc-table-fixed-layout]': 'fixedLayout',
48+
'[class.mat-mdc-flex-table]': '!_isNativeHtmlTable',
4849
'ngSkipHydration': '',
4950
},
5051
providers: [

0 commit comments

Comments
 (0)