Skip to content

Commit 2dc10da

Browse files
crisbetocrisbeto
authored
fix(material/button): use tokens for button elevation (#28396)
Switches the buttons to use tokens for elevation so that we can set the elevation in M3.
1 parent 17c291b commit 2dc10da

File tree

12 files changed

+741
-688
lines changed

12 files changed

+741
-688
lines changed

‎package.json‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -99,53 +99,53 @@
9999
"@bazel/terser": "5.8.1",
100100
"@bazel/worker": "5.8.1",
101101
"@firebase/app-types": "^0.7.0",
102-
"@material/animation": "15.0.0-canary.a246a4439.0",
103-
"@material/auto-init": "15.0.0-canary.a246a4439.0",
104-
"@material/banner": "15.0.0-canary.a246a4439.0",
105-
"@material/base": "15.0.0-canary.a246a4439.0",
106-
"@material/button": "15.0.0-canary.a246a4439.0",
107-
"@material/card": "15.0.0-canary.a246a4439.0",
108-
"@material/checkbox": "15.0.0-canary.a246a4439.0",
109-
"@material/chips": "15.0.0-canary.a246a4439.0",
110-
"@material/circular-progress": "15.0.0-canary.a246a4439.0",
111-
"@material/data-table": "15.0.0-canary.a246a4439.0",
112-
"@material/density": "15.0.0-canary.a246a4439.0",
113-
"@material/dialog": "15.0.0-canary.a246a4439.0",
114-
"@material/dom": "15.0.0-canary.a246a4439.0",
115-
"@material/drawer": "15.0.0-canary.a246a4439.0",
116-
"@material/elevation": "15.0.0-canary.a246a4439.0",
117-
"@material/fab": "15.0.0-canary.a246a4439.0",
118-
"@material/feature-targeting": "15.0.0-canary.a246a4439.0",
119-
"@material/floating-label": "15.0.0-canary.a246a4439.0",
120-
"@material/form-field": "15.0.0-canary.a246a4439.0",
121-
"@material/icon-button": "15.0.0-canary.a246a4439.0",
122-
"@material/image-list": "15.0.0-canary.a246a4439.0",
123-
"@material/layout-grid": "15.0.0-canary.a246a4439.0",
124-
"@material/line-ripple": "15.0.0-canary.a246a4439.0",
125-
"@material/linear-progress": "15.0.0-canary.a246a4439.0",
126-
"@material/list": "15.0.0-canary.a246a4439.0",
127-
"@material/menu": "15.0.0-canary.a246a4439.0",
128-
"@material/menu-surface": "15.0.0-canary.a246a4439.0",
129-
"@material/notched-outline": "15.0.0-canary.a246a4439.0",
130-
"@material/radio": "15.0.0-canary.a246a4439.0",
131-
"@material/ripple": "15.0.0-canary.a246a4439.0",
132-
"@material/rtl": "15.0.0-canary.a246a4439.0",
133-
"@material/segmented-button": "15.0.0-canary.a246a4439.0",
134-
"@material/select": "15.0.0-canary.a246a4439.0",
135-
"@material/shape": "15.0.0-canary.a246a4439.0",
136-
"@material/slider": "15.0.0-canary.a246a4439.0",
137-
"@material/snackbar": "15.0.0-canary.a246a4439.0",
138-
"@material/switch": "15.0.0-canary.a246a4439.0",
139-
"@material/tab": "15.0.0-canary.a246a4439.0",
140-
"@material/tab-bar": "15.0.0-canary.a246a4439.0",
141-
"@material/tab-indicator": "15.0.0-canary.a246a4439.0",
142-
"@material/tab-scroller": "15.0.0-canary.a246a4439.0",
143-
"@material/textfield": "15.0.0-canary.a246a4439.0",
144-
"@material/theme": "15.0.0-canary.a246a4439.0",
145-
"@material/tooltip": "15.0.0-canary.a246a4439.0",
146-
"@material/top-app-bar": "15.0.0-canary.a246a4439.0",
147-
"@material/touch-target": "15.0.0-canary.a246a4439.0",
148-
"@material/typography": "15.0.0-canary.a246a4439.0",
102+
"@material/animation": "15.0.0-canary.7f224ddd4.0",
103+
"@material/auto-init": "15.0.0-canary.7f224ddd4.0",
104+
"@material/banner": "15.0.0-canary.7f224ddd4.0",
105+
"@material/base": "15.0.0-canary.7f224ddd4.0",
106+
"@material/button": "15.0.0-canary.7f224ddd4.0",
107+
"@material/card": "15.0.0-canary.7f224ddd4.0",
108+
"@material/checkbox": "15.0.0-canary.7f224ddd4.0",
109+
"@material/chips": "15.0.0-canary.7f224ddd4.0",
110+
"@material/circular-progress": "15.0.0-canary.7f224ddd4.0",
111+
"@material/data-table": "15.0.0-canary.7f224ddd4.0",
112+
"@material/density": "15.0.0-canary.7f224ddd4.0",
113+
"@material/dialog": "15.0.0-canary.7f224ddd4.0",
114+
"@material/dom": "15.0.0-canary.7f224ddd4.0",
115+
"@material/drawer": "15.0.0-canary.7f224ddd4.0",
116+
"@material/elevation": "15.0.0-canary.7f224ddd4.0",
117+
"@material/fab": "15.0.0-canary.7f224ddd4.0",
118+
"@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
119+
"@material/floating-label": "15.0.0-canary.7f224ddd4.0",
120+
"@material/form-field": "15.0.0-canary.7f224ddd4.0",
121+
"@material/icon-button": "15.0.0-canary.7f224ddd4.0",
122+
"@material/image-list": "15.0.0-canary.7f224ddd4.0",
123+
"@material/layout-grid": "15.0.0-canary.7f224ddd4.0",
124+
"@material/line-ripple": "15.0.0-canary.7f224ddd4.0",
125+
"@material/linear-progress": "15.0.0-canary.7f224ddd4.0",
126+
"@material/list": "15.0.0-canary.7f224ddd4.0",
127+
"@material/menu": "15.0.0-canary.7f224ddd4.0",
128+
"@material/menu-surface": "15.0.0-canary.7f224ddd4.0",
129+
"@material/notched-outline": "15.0.0-canary.7f224ddd4.0",
130+
"@material/radio": "15.0.0-canary.7f224ddd4.0",
131+
"@material/ripple": "15.0.0-canary.7f224ddd4.0",
132+
"@material/rtl": "15.0.0-canary.7f224ddd4.0",
133+
"@material/segmented-button": "15.0.0-canary.7f224ddd4.0",
134+
"@material/select": "15.0.0-canary.7f224ddd4.0",
135+
"@material/shape": "15.0.0-canary.7f224ddd4.0",
136+
"@material/slider": "15.0.0-canary.7f224ddd4.0",
137+
"@material/snackbar": "15.0.0-canary.7f224ddd4.0",
138+
"@material/switch": "15.0.0-canary.7f224ddd4.0",
139+
"@material/tab": "15.0.0-canary.7f224ddd4.0",
140+
"@material/tab-bar": "15.0.0-canary.7f224ddd4.0",
141+
"@material/tab-indicator": "15.0.0-canary.7f224ddd4.0",
142+
"@material/tab-scroller": "15.0.0-canary.7f224ddd4.0",
143+
"@material/textfield": "15.0.0-canary.7f224ddd4.0",
144+
"@material/theme": "15.0.0-canary.7f224ddd4.0",
145+
"@material/tooltip": "15.0.0-canary.7f224ddd4.0",
146+
"@material/top-app-bar": "15.0.0-canary.7f224ddd4.0",
147+
"@material/touch-target": "15.0.0-canary.7f224ddd4.0",
148+
"@material/typography": "15.0.0-canary.7f224ddd4.0",
149149
"@octokit/rest": "18.3.5",
150150
"@rollup/plugin-commonjs": "^21.0.0",
151151
"@rollup/plugin-node-resolve": "^13.1.3",

‎packages.bzl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Each individual package uses a placeholder for the version of Angular to ensure they're
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
4-
MDC_PACKAGE_VERSION = "15.0.0-canary.a246a4439.0"
4+
MDC_PACKAGE_VERSION = "15.0.0-canary.7f224ddd4.0"
55
TSLIB_PACKAGE_VERSION = "^2.3.0"
66
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
77

‎src/material/button/_button-base.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,12 @@
119119
}
120120
}
121121

122+
// Adds an elevation shadow to a button.
123+
@mixin mat-private-button-elevation($token-name) {
124+
// MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
125+
box-shadow: var(#{token-utils.get-token-variable($token-name) + '-shadow'});
126+
}
127+
122128
@mixin mat-private-button-touch-target($is-square) {
123129
// Element used to ensure that the button has a touch target that meets the required minimum.
124130
// Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC

‎src/material/button/_button-theme.scss‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@
33
@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
44
@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
55
@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
6-
@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
76

87
@use './button-base';
9-
@use '../core/mdc-helpers/mdc-helpers';
108
@use '../core/theming/theming';
119
@use '../core/theming/inspection';
1210
@use '../core/tokens/token-utils';
@@ -170,19 +168,6 @@
170168
&.mat-warn {
171169
@include _protected-button-variant($theme, warn);
172170
}
173-
174-
// TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved
175-
@include mdc-helpers.disable-mdc-fallback-declarations {
176-
@include mdc-elevation-theme.elevation(2);
177-
178-
&:hover, &:focus {
179-
@include mdc-elevation-theme.elevation(4);
180-
}
181-
182-
&:active, &:focus:active {
183-
@include mdc-elevation-theme.elevation(8);
184-
}
185-
}
186171
}
187172

188173
.mat-mdc-outlined-button {

‎src/material/button/_fab-theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
@else {
4848
@include sass-utils.current-selector-or-root() {
4949
@include _fab-variant($theme, null);
50+
@include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-color-tokens($theme));
5051

5152
.mat-mdc-fab,
5253
.mat-mdc-mini-fab {

‎src/material/button/button.scss‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:map';
12
@use '@material/button/button' as mdc-button;
23
@use '@material/button/button-base' as mdc-button-base;
34
@use '@material/button/variables' as mdc-button-variables;
@@ -62,22 +63,43 @@
6263
.mat-mdc-raised-button {
6364
$mdc-button-protected-slots: tokens-mdc-protected-button.get-token-slots();
6465

65-
@include mdc-button-protected-theme.theme-styles($mdc-button-protected-slots);
66+
@include mdc-button-protected-theme.theme-styles(map.merge($mdc-button-protected-slots, (
67+
// Exclude the elevation tokens here since we output them manually below.
68+
container-elevation: null,
69+
hover-container-elevation: null,
70+
disabled-container-elevation: null,
71+
focus-container-elevation: null,
72+
pressed-container-elevation: null,
73+
container-shadow-color: null,
74+
)));
6675
@include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
6776
tokens-mat-protected-button.get-token-slots());
6877

6978
@include token-utils.use-tokens(
7079
tokens-mdc-protected-button.$prefix,
7180
$mdc-button-protected-slots) {
81+
@include button-base.mat-private-button-elevation(container-elevation);
82+
83+
&:hover {
84+
@include button-base.mat-private-button-elevation(hover-container-elevation);
85+
}
86+
87+
&:focus {
88+
@include button-base.mat-private-button-elevation(focus-container-elevation);
89+
}
90+
91+
&:active, &:focus:active {
92+
@include button-base.mat-private-button-elevation(pressed-container-elevation);
93+
}
94+
7295
// We need to re-apply the disabled tokens since MDC uses
7396
// `:disabled` which doesn't apply to anchors.
7497
@include button-base.mat-private-button-disabled {
7598
@include token-utils.create-token-slot(color, disabled-label-text-color);
7699
@include token-utils.create-token-slot(background-color, disabled-container-color);
77100

78-
// Since we're still doing elevation through the theme, we need additional specificity here.
79101
&.mat-mdc-button-disabled {
80-
box-shadow: none;
102+
@include button-base.mat-private-button-elevation(disabled-container-elevation);
81103
}
82104
}
83105
}

‎src/material/button/fab.scss‎

Lines changed: 51 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
@use 'sass:map';
12
@use '@material/fab' as mdc-fab;
23
@use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
34
@use '@material/fab/fab-theme' as mdc-fab-theme;
45
@use '@material/typography/typography' as mdc-typography;
56
@use '@material/theme/custom-properties' as mdc-custom-properties;
67

78
@use './button-base';
8-
@use '../core/style/elevation';
99
@use '../core/mdc-helpers/mdc-helpers';
1010
@use '../core/tokens/token-utils';
1111
@use '../core/style/private' as style-private;
@@ -17,21 +17,30 @@
1717
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
1818
$mdc-fab-token-slots: tokens-mdc-fab.get-token-slots();
1919
$mdc-extended-fab-token-slots: tokens-mdc-extended-fab.get-token-slots();
20+
$exclude-tokens: (
21+
// Exclude the elevation tokens here since we output them manually below.
22+
container-elevation: null,
23+
focus-container-elevation: null,
24+
hover-container-elevation: null,
25+
pressed-container-elevation: null,
26+
container-shadow-color: null,
27+
);
2028

2129
// Note: it's important to pass the query here, otherwise MDC generates
2230
// some unnecessary typography styles for the extended FAB.
2331
@include mdc-fab.static-styles($query: mdc-helpers.$mdc-base-styles-query);
2432

2533
.mat-mdc-fab, .mat-mdc-mini-fab {
26-
@include mdc-fab-theme.theme-styles($mdc-fab-token-slots);
34+
@include mdc-fab-theme.theme-styles(map.merge($mdc-fab-token-slots, $exclude-tokens));
2735
}
2836

2937
.mat-mdc-extended-fab {
3038
// Before tokens MDC included the font smoothing automatically, but with
3139
// tokens it doesn't. We add it since it can cause tiny differences in
3240
// screenshot tests and it generally looks better.
3341
@include mdc-typography.smooth-font();
34-
@include mdc-extended-fab-theme.theme-styles($mdc-extended-fab-token-slots);
42+
@include mdc-extended-fab-theme.theme-styles(
43+
map.merge($mdc-extended-fab-token-slots, $exclude-tokens));
3544
}
3645
}
3746

@@ -41,7 +50,6 @@
4150
@include button-base.mat-private-button-ripple(tokens-mat-fab.$prefix,
4251
tokens-mat-fab.get-token-slots());
4352
@include style-private.private-animation-noop();
44-
@include elevation.elevation(6);
4553
flex-shrink: 0; // Prevent the button from shrinking since it's always supposed to be a circle.
4654

4755
@include mdc-helpers.disable-mdc-fallback-declarations {
@@ -50,20 +58,26 @@
5058
}
5159
}
5260

53-
&:hover, &:focus {
54-
@include elevation.elevation(8);
55-
}
61+
@include token-utils.use-tokens(tokens-mdc-fab.$prefix, tokens-mdc-fab.get-token-slots()) {
62+
@include button-base.mat-private-button-elevation(container-elevation);
63+
64+
&:hover {
65+
@include button-base.mat-private-button-elevation(hover-container-elevation);
66+
}
67+
68+
&:focus {
69+
@include button-base.mat-private-button-elevation(focus-container-elevation);
70+
}
5671

57-
&:active, &:focus:active {
58-
@include elevation.elevation(12);
72+
&:active, &:focus:active {
73+
@include button-base.mat-private-button-elevation(pressed-container-elevation);
74+
}
5975
}
6076

6177
@include button-base.mat-private-button-disabled {
62-
@include elevation.elevation(0);
63-
6478
// Necessary for interactive disabled buttons.
65-
&:focus {
66-
@include elevation.elevation(0);
79+
&, &:focus {
80+
box-shadow: none;
6781
}
6882

6983
@include token-utils.use-tokens(tokens-mat-fab.$prefix, tokens-mat-fab.get-token-slots()) {
@@ -99,6 +113,30 @@
99113
}
100114

101115
.mat-mdc-extended-fab {
116+
@include token-utils.use-tokens(tokens-mdc-extended-fab.$prefix,
117+
tokens-mdc-extended-fab.get-token-slots()) {
118+
@include button-base.mat-private-button-elevation(container-elevation);
119+
120+
&:hover {
121+
@include button-base.mat-private-button-elevation(hover-container-elevation);
122+
}
123+
124+
&:focus {
125+
@include button-base.mat-private-button-elevation(focus-container-elevation);
126+
}
127+
128+
&:active, &:focus:active {
129+
@include button-base.mat-private-button-elevation(pressed-container-elevation);
130+
}
131+
}
132+
133+
@include button-base.mat-private-button-disabled {
134+
// Necessary for interactive disabled buttons.
135+
&, &:focus {
136+
box-shadow: none;
137+
}
138+
}
139+
102140
& > .mat-icon,
103141
& > .material-icons { // stylelint-disable-line selector-class-pattern
104142
@include mdc-fab.extended-icon-padding(

‎src/material/core/tokens/m2/mdc/_extended-fab.scss‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,19 +12,15 @@ $prefix: (mdc, extended-fab);
1212
// = TOKENS NOT USED IN ANGULAR MATERIAL =
1313
// =============================================================================================
1414
container-color: null,
15-
container-elevation: null,
1615
container-height: null,
17-
container-shadow-color: null,
1816
container-shape: null,
1917
container-surface-tint-layer-color: null,
20-
focus-container-elevation: null,
2118
focus-icon-color: null,
2219
focus-label-text-color: null,
2320
focus-outline-color: null,
2421
focus-outline-width: null,
2522
focus-state-layer-color: null,
2623
focus-state-layer-opacity: null,
27-
hover-container-elevation: null,
2824
hover-icon-color: null,
2925
hover-label-text-color: null,
3026
hover-state-layer-color: null,
@@ -36,7 +32,6 @@ $prefix: (mdc, extended-fab);
3632
lowered-focus-container-elevation: null,
3733
lowered-hover-container-elevation: null,
3834
lowered-pressed-container-elevation: null,
39-
pressed-container-elevation: null,
4035
pressed-icon-color: null,
4136
pressed-label-text-color: null,
4237
pressed-ripple-color: null,
@@ -48,7 +43,13 @@ $prefix: (mdc, extended-fab);
4843

4944
// Tokens that can be configured through Angular Material's color theming API.
5045
@function get-color-tokens($theme) {
51-
@return ();
46+
@return (
47+
container-elevation: 6,
48+
focus-container-elevation: 8,
49+
hover-container-elevation: 8,
50+
pressed-container-elevation: 12,
51+
container-shadow-color: #000,
52+
);
5253
}
5354

5455
// Tokens that can be configured through Angular Material's typography theming API.

0 commit comments

Comments
 (0)