Skip to content

Commit

Permalink
fix(material/button): use tokens for button elevation (#28396)
Browse files Browse the repository at this point in the history 
Switches the buttons to use tokens for elevation so that we can set the elevation in M3.
  • Loading branch information
@crisbeto
crisbeto authored Jan 10, 2024
1 parent 17c291b commit 2dc10da
Show file tree
Hide file tree
Showing 12 changed files with 741 additions and 688 deletions.
94 changes: 47 additions & 47 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,53 +99,53 @@
"@bazel/terser": "5.8.1",
"@bazel/worker": "5.8.1",
"@firebase/app-types": "^0.7.0",
"@material/animation": "15.0.0-canary.a246a4439.0",
"@material/auto-init": "15.0.0-canary.a246a4439.0",
"@material/banner": "15.0.0-canary.a246a4439.0",
"@material/base": "15.0.0-canary.a246a4439.0",
"@material/button": "15.0.0-canary.a246a4439.0",
"@material/card": "15.0.0-canary.a246a4439.0",
"@material/checkbox": "15.0.0-canary.a246a4439.0",
"@material/chips": "15.0.0-canary.a246a4439.0",
"@material/circular-progress": "15.0.0-canary.a246a4439.0",
"@material/data-table": "15.0.0-canary.a246a4439.0",
"@material/density": "15.0.0-canary.a246a4439.0",
"@material/dialog": "15.0.0-canary.a246a4439.0",
"@material/dom": "15.0.0-canary.a246a4439.0",
"@material/drawer": "15.0.0-canary.a246a4439.0",
"@material/elevation": "15.0.0-canary.a246a4439.0",
"@material/fab": "15.0.0-canary.a246a4439.0",
"@material/feature-targeting": "15.0.0-canary.a246a4439.0",
"@material/floating-label": "15.0.0-canary.a246a4439.0",
"@material/form-field": "15.0.0-canary.a246a4439.0",
"@material/icon-button": "15.0.0-canary.a246a4439.0",
"@material/image-list": "15.0.0-canary.a246a4439.0",
"@material/layout-grid": "15.0.0-canary.a246a4439.0",
"@material/line-ripple": "15.0.0-canary.a246a4439.0",
"@material/linear-progress": "15.0.0-canary.a246a4439.0",
"@material/list": "15.0.0-canary.a246a4439.0",
"@material/menu": "15.0.0-canary.a246a4439.0",
"@material/menu-surface": "15.0.0-canary.a246a4439.0",
"@material/notched-outline": "15.0.0-canary.a246a4439.0",
"@material/radio": "15.0.0-canary.a246a4439.0",
"@material/ripple": "15.0.0-canary.a246a4439.0",
"@material/rtl": "15.0.0-canary.a246a4439.0",
"@material/segmented-button": "15.0.0-canary.a246a4439.0",
"@material/select": "15.0.0-canary.a246a4439.0",
"@material/shape": "15.0.0-canary.a246a4439.0",
"@material/slider": "15.0.0-canary.a246a4439.0",
"@material/snackbar": "15.0.0-canary.a246a4439.0",
"@material/switch": "15.0.0-canary.a246a4439.0",
"@material/tab": "15.0.0-canary.a246a4439.0",
"@material/tab-bar": "15.0.0-canary.a246a4439.0",
"@material/tab-indicator": "15.0.0-canary.a246a4439.0",
"@material/tab-scroller": "15.0.0-canary.a246a4439.0",
"@material/textfield": "15.0.0-canary.a246a4439.0",
"@material/theme": "15.0.0-canary.a246a4439.0",
"@material/tooltip": "15.0.0-canary.a246a4439.0",
"@material/top-app-bar": "15.0.0-canary.a246a4439.0",
"@material/touch-target": "15.0.0-canary.a246a4439.0",
"@material/typography": "15.0.0-canary.a246a4439.0",
"@material/animation": "15.0.0-canary.7f224ddd4.0",
"@material/auto-init": "15.0.0-canary.7f224ddd4.0",
"@material/banner": "15.0.0-canary.7f224ddd4.0",
"@material/base": "15.0.0-canary.7f224ddd4.0",
"@material/button": "15.0.0-canary.7f224ddd4.0",
"@material/card": "15.0.0-canary.7f224ddd4.0",
"@material/checkbox": "15.0.0-canary.7f224ddd4.0",
"@material/chips": "15.0.0-canary.7f224ddd4.0",
"@material/circular-progress": "15.0.0-canary.7f224ddd4.0",
"@material/data-table": "15.0.0-canary.7f224ddd4.0",
"@material/density": "15.0.0-canary.7f224ddd4.0",
"@material/dialog": "15.0.0-canary.7f224ddd4.0",
"@material/dom": "15.0.0-canary.7f224ddd4.0",
"@material/drawer": "15.0.0-canary.7f224ddd4.0",
"@material/elevation": "15.0.0-canary.7f224ddd4.0",
"@material/fab": "15.0.0-canary.7f224ddd4.0",
"@material/feature-targeting": "15.0.0-canary.7f224ddd4.0",
"@material/floating-label": "15.0.0-canary.7f224ddd4.0",
"@material/form-field": "15.0.0-canary.7f224ddd4.0",
"@material/icon-button": "15.0.0-canary.7f224ddd4.0",
"@material/image-list": "15.0.0-canary.7f224ddd4.0",
"@material/layout-grid": "15.0.0-canary.7f224ddd4.0",
"@material/line-ripple": "15.0.0-canary.7f224ddd4.0",
"@material/linear-progress": "15.0.0-canary.7f224ddd4.0",
"@material/list": "15.0.0-canary.7f224ddd4.0",
"@material/menu": "15.0.0-canary.7f224ddd4.0",
"@material/menu-surface": "15.0.0-canary.7f224ddd4.0",
"@material/notched-outline": "15.0.0-canary.7f224ddd4.0",
"@material/radio": "15.0.0-canary.7f224ddd4.0",
"@material/ripple": "15.0.0-canary.7f224ddd4.0",
"@material/rtl": "15.0.0-canary.7f224ddd4.0",
"@material/segmented-button": "15.0.0-canary.7f224ddd4.0",
"@material/select": "15.0.0-canary.7f224ddd4.0",
"@material/shape": "15.0.0-canary.7f224ddd4.0",
"@material/slider": "15.0.0-canary.7f224ddd4.0",
"@material/snackbar": "15.0.0-canary.7f224ddd4.0",
"@material/switch": "15.0.0-canary.7f224ddd4.0",
"@material/tab": "15.0.0-canary.7f224ddd4.0",
"@material/tab-bar": "15.0.0-canary.7f224ddd4.0",
"@material/tab-indicator": "15.0.0-canary.7f224ddd4.0",
"@material/tab-scroller": "15.0.0-canary.7f224ddd4.0",
"@material/textfield": "15.0.0-canary.7f224ddd4.0",
"@material/theme": "15.0.0-canary.7f224ddd4.0",
"@material/tooltip": "15.0.0-canary.7f224ddd4.0",
"@material/top-app-bar": "15.0.0-canary.7f224ddd4.0",
"@material/touch-target": "15.0.0-canary.7f224ddd4.0",
"@material/typography": "15.0.0-canary.7f224ddd4.0",
"@octokit/rest": "18.3.5",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-node-resolve": "^13.1.3",
Expand Down
2 changes: 1 addition & 1 deletion packages.bzl
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Each individual package uses a placeholder for the version of Angular to ensure they're
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
# version for the placeholders.
MDC_PACKAGE_VERSION = "15.0.0-canary.a246a4439.0"
MDC_PACKAGE_VERSION = "15.0.0-canary.7f224ddd4.0"
TSLIB_PACKAGE_VERSION = "^2.3.0"
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"

Expand Down
6 changes: 6 additions & 0 deletions src/material/button/_button-base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,12 @@
}
}

// Adds an elevation shadow to a button.
@mixin mat-private-button-elevation($token-name) {
// MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
box-shadow: var(#{token-utils.get-token-variable($token-name) + '-shadow'});
}

@mixin mat-private-button-touch-target($is-square) {
// Element used to ensure that the button has a touch target that meets the required minimum.
// Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC
Expand Down
15 changes: 0 additions & 15 deletions src/material/button/_button-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@
@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
@use '@material/elevation/elevation-theme' as mdc-elevation-theme;

@use './button-base';
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/tokens/token-utils';
Expand Down Expand Up @@ -170,19 +168,6 @@
&.mat-warn {
@include _protected-button-variant($theme, warn);
}

// TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved
@include mdc-helpers.disable-mdc-fallback-declarations {
@include mdc-elevation-theme.elevation(2);

&:hover, &:focus {
@include mdc-elevation-theme.elevation(4);
}

&:active, &:focus:active {
@include mdc-elevation-theme.elevation(8);
}
}
}

.mat-mdc-outlined-button {
Expand Down
1 change: 1 addition & 0 deletions src/material/button/_fab-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
@else {
@include sass-utils.current-selector-or-root() {
@include _fab-variant($theme, null);
@include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-color-tokens($theme));

.mat-mdc-fab,
.mat-mdc-mini-fab {
Expand Down
28 changes: 25 additions & 3 deletions src/material/button/button.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use 'sass:map';
@use '@material/button/button' as mdc-button;
@use '@material/button/button-base' as mdc-button-base;
@use '@material/button/variables' as mdc-button-variables;
Expand Down Expand Up @@ -62,22 +63,43 @@
.mat-mdc-raised-button {
$mdc-button-protected-slots: tokens-mdc-protected-button.get-token-slots();

@include mdc-button-protected-theme.theme-styles($mdc-button-protected-slots);
@include mdc-button-protected-theme.theme-styles(map.merge($mdc-button-protected-slots, (
// Exclude the elevation tokens here since we output them manually below.
container-elevation: null,
hover-container-elevation: null,
disabled-container-elevation: null,
focus-container-elevation: null,
pressed-container-elevation: null,
container-shadow-color: null,
)));
@include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
tokens-mat-protected-button.get-token-slots());

@include token-utils.use-tokens(
tokens-mdc-protected-button.$prefix,
$mdc-button-protected-slots) {
@include button-base.mat-private-button-elevation(container-elevation);

&:hover {
@include button-base.mat-private-button-elevation(hover-container-elevation);
}

&:focus {
@include button-base.mat-private-button-elevation(focus-container-elevation);
}

&:active, &:focus:active {
@include button-base.mat-private-button-elevation(pressed-container-elevation);
}

// We need to re-apply the disabled tokens since MDC uses
// `:disabled` which doesn't apply to anchors.
@include button-base.mat-private-button-disabled {
@include token-utils.create-token-slot(color, disabled-label-text-color);
@include token-utils.create-token-slot(background-color, disabled-container-color);

// Since we're still doing elevation through the theme, we need additional specificity here.
&.mat-mdc-button-disabled {
box-shadow: none;
@include button-base.mat-private-button-elevation(disabled-container-elevation);
}
}
}
Expand Down
64 changes: 51 additions & 13 deletions src/material/button/fab.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
@use 'sass:map';
@use '@material/fab' as mdc-fab;
@use '@material/fab/extended-fab-theme' as mdc-extended-fab-theme;
@use '@material/fab/fab-theme' as mdc-fab-theme;
@use '@material/typography/typography' as mdc-typography;
@use '@material/theme/custom-properties' as mdc-custom-properties;

@use './button-base';
@use '../core/style/elevation';
@use '../core/mdc-helpers/mdc-helpers';
@use '../core/tokens/token-utils';
@use '../core/style/private' as style-private;
Expand All @@ -17,21 +17,30 @@
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
$mdc-fab-token-slots: tokens-mdc-fab.get-token-slots();
$mdc-extended-fab-token-slots: tokens-mdc-extended-fab.get-token-slots();
$exclude-tokens: (
// Exclude the elevation tokens here since we output them manually below.
container-elevation: null,
focus-container-elevation: null,
hover-container-elevation: null,
pressed-container-elevation: null,
container-shadow-color: null,
);

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

.mat-mdc-fab, .mat-mdc-mini-fab {
@include mdc-fab-theme.theme-styles($mdc-fab-token-slots);
@include mdc-fab-theme.theme-styles(map.merge($mdc-fab-token-slots, $exclude-tokens));
}

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

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

@include mdc-helpers.disable-mdc-fallback-declarations {
Expand All @@ -50,20 +58,26 @@
}
}

&:hover, &:focus {
@include elevation.elevation(8);
}
@include token-utils.use-tokens(tokens-mdc-fab.$prefix, tokens-mdc-fab.get-token-slots()) {
@include button-base.mat-private-button-elevation(container-elevation);

&:hover {
@include button-base.mat-private-button-elevation(hover-container-elevation);
}

&:focus {
@include button-base.mat-private-button-elevation(focus-container-elevation);
}

&:active, &:focus:active {
@include elevation.elevation(12);
&:active, &:focus:active {
@include button-base.mat-private-button-elevation(pressed-container-elevation);
}
}

@include button-base.mat-private-button-disabled {
@include elevation.elevation(0);

// Necessary for interactive disabled buttons.
&:focus {
@include elevation.elevation(0);
&, &:focus {
box-shadow: none;
}

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

.mat-mdc-extended-fab {
@include token-utils.use-tokens(tokens-mdc-extended-fab.$prefix,
tokens-mdc-extended-fab.get-token-slots()) {
@include button-base.mat-private-button-elevation(container-elevation);

&:hover {
@include button-base.mat-private-button-elevation(hover-container-elevation);
}

&:focus {
@include button-base.mat-private-button-elevation(focus-container-elevation);
}

&:active, &:focus:active {
@include button-base.mat-private-button-elevation(pressed-container-elevation);
}
}

@include button-base.mat-private-button-disabled {
// Necessary for interactive disabled buttons.
&, &:focus {
box-shadow: none;
}
}

& > .mat-icon,
& > .material-icons { // stylelint-disable-line selector-class-pattern
@include mdc-fab.extended-icon-padding(
Expand Down
13 changes: 7 additions & 6 deletions src/material/core/tokens/m2/mdc/_extended-fab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,15 @@ $prefix: (mdc, extended-fab);
// = TOKENS NOT USED IN ANGULAR MATERIAL =
// =============================================================================================
container-color: null,
container-elevation: null,
container-height: null,
container-shadow-color: null,
container-shape: null,
container-surface-tint-layer-color: null,
focus-container-elevation: null,
focus-icon-color: null,
focus-label-text-color: null,
focus-outline-color: null,
focus-outline-width: null,
focus-state-layer-color: null,
focus-state-layer-opacity: null,
hover-container-elevation: null,
hover-icon-color: null,
hover-label-text-color: null,
hover-state-layer-color: null,
Expand All @@ -36,7 +32,6 @@ $prefix: (mdc, extended-fab);
lowered-focus-container-elevation: null,
lowered-hover-container-elevation: null,
lowered-pressed-container-elevation: null,
pressed-container-elevation: null,
pressed-icon-color: null,
pressed-label-text-color: null,
pressed-ripple-color: null,
Expand All @@ -48,7 +43,13 @@ $prefix: (mdc, extended-fab);

// Tokens that can be configured through Angular Material's color theming API.
@function get-color-tokens($theme) {
@return ();
@return (
container-elevation: 6,
focus-container-elevation: 8,
hover-container-elevation: 8,
pressed-container-elevation: 12,
container-shadow-color: #000,
);
}

// Tokens that can be configured through Angular Material's typography theming API.
Expand Down
Loading

0 comments on commit 2dc10da

Please sign in to comment.