Skip to content

Commit 585fec6

Browse files
crisbetocrisbeto
committed
refactor(material/button): simplify structural styles (#29372)
Simplifies the structural styles for the button to make them simpler and easier to maintain. (cherry picked from commit 4db4fc1)
1 parent 5a97c03 commit 585fec6

File tree

9 files changed

+297
-180
lines changed

9 files changed

+297
-180
lines changed

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
1-
@use '@material/touch-target' as mdc-touch-target;
2-
31
@use '../core/tokens/token-utils';
42
@use '../core/style/layout-common';
5-
@use '../core/mdc-helpers/mdc-helpers';
63

74
// Adds styles necessary to provide stateful interactions with the button. This includes providing
85
// content for the state container's ::before and ::after so that they can be given a background
@@ -126,9 +123,19 @@
126123
// the button itself would require us to wrap it in another div. See:
127124
// https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
128125
.mat-mdc-button-touch-target {
129-
@include mdc-touch-target.touch-target(
130-
$set-width: $is-square,
131-
$query: mdc-helpers.$mdc-base-styles-query);
126+
position: absolute;
127+
top: 50%;
128+
height: 48px;
129+
130+
@if $is-square {
131+
left: 50%;
132+
width: 48px;
133+
transform: translate(-50%, -50%);
134+
} @else {
135+
left: 0;
136+
right: 0;
137+
transform: translateY(-50%);
138+
}
132139

133140
@include token-utils.use-tokens($prefix, $slots) {
134141
@include token-utils.create-token-slot(display, touch-target-display);

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

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
@use '@material/button/button-text-theme' as mdc-button-text-theme;
2-
@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
3-
@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
4-
@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
5-
61
@use '../core/theming/theming';
72
@use '../core/theming/inspection';
83
@use '../core/theming/validation';
@@ -29,7 +24,7 @@
2924
tokens-mat-text-button.get-color-tokens($theme)
3025
);
3126

32-
@include mdc-button-text-theme.theme($mdc-tokens);
27+
@include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-tokens);
3328
@include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
3429
}
3530

@@ -44,7 +39,7 @@
4439
tokens-mat-filled-button.get-color-tokens($theme)
4540
);
4641

47-
@include mdc-button-filled-theme.theme($mdc-tokens);
42+
@include token-utils.create-token-values(tokens-mdc-filled-button.$prefix, $mdc-tokens);
4843
@include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
4944
}
5045

@@ -59,7 +54,7 @@
5954
tokens-mat-protected-button.get-color-tokens($theme)
6055
);
6156

62-
@include mdc-button-protected-theme.theme($mdc-tokens);
57+
@include token-utils.create-token-values(tokens-mdc-protected-button.$prefix, $mdc-tokens);
6358
@include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
6459
}
6560

@@ -74,7 +69,7 @@
7469
tokens-mat-outlined-button.get-color-tokens($theme)
7570
);
7671

77-
@include mdc-button-outlined-theme.theme($mdc-tokens);
72+
@include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix, $mdc-tokens);
7873
@include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
7974
}
8075

@@ -97,10 +92,14 @@
9792
token-utils.get-tokens-for($tokens, tokens-mat-filled-button.$prefix, $options...);
9893
$mat-outlined-button-tokens:
9994
token-utils.get-tokens-for($tokens, tokens-mat-outlined-button.$prefix, $options...);
100-
@include mdc-button-text-theme.theme($mdc-text-button-tokens);
101-
@include mdc-button-protected-theme.theme($mdc-protected-button-tokens);
102-
@include mdc-button-filled-theme.theme($mdc-filled-button-tokens);
103-
@include mdc-button-outlined-theme.theme($mdc-outlined-button-tokens);
95+
96+
@include token-utils.create-token-values(tokens-mdc-text-button.$prefix, $mdc-text-button-tokens);
97+
@include token-utils.create-token-values(
98+
tokens-mdc-protected-button.$prefix, $mdc-protected-button-tokens);
99+
@include token-utils.create-token-values(
100+
tokens-mdc-filled-button.$prefix, $mdc-filled-button-tokens);
101+
@include token-utils.create-token-values(
102+
tokens-mdc-outlined-button.$prefix, $mdc-outlined-button-tokens);
104103
@include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-text-button-tokens);
105104
@include token-utils.create-token-values(
106105
tokens-mat-protected-button.$prefix, $mat-protected-button-tokens);
@@ -119,13 +118,13 @@
119118
}
120119
@else {
121120
@include sass-utils.current-selector-or-root() {
122-
@include mdc-button-text-theme.theme(
121+
@include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
123122
tokens-mdc-text-button.get-unthemable-tokens());
124-
@include mdc-button-filled-theme.theme(
123+
@include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
125124
tokens-mdc-filled-button.get-unthemable-tokens());
126-
@include mdc-button-protected-theme.theme(
125+
@include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
127126
tokens-mdc-protected-button.get-unthemable-tokens());
128-
@include mdc-button-outlined-theme.theme(
127+
@include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
129128
tokens-mdc-outlined-button.get-unthemable-tokens());
130129

131130
@include token-utils.create-token-values(tokens-mat-text-button.$prefix,
@@ -223,14 +222,14 @@
223222
}
224223
@else {
225224
@include sass-utils.current-selector-or-root() {
226-
@include mdc-button-text-theme.theme(
225+
@include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
227226
tokens-mdc-text-button.get-typography-tokens($theme));
228-
@include mdc-button-filled-theme.theme(
227+
@include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
229228
tokens-mdc-filled-button.get-typography-tokens($theme));
230-
@include mdc-button-outlined-theme.theme(
231-
tokens-mdc-outlined-button.get-typography-tokens($theme));
232-
@include mdc-button-protected-theme.theme(
229+
@include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
233230
tokens-mdc-protected-button.get-typography-tokens($theme));
231+
@include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
232+
tokens-mdc-outlined-button.get-typography-tokens($theme));
234233

235234
@include token-utils.create-token-values(tokens-mat-text-button.$prefix,
236235
tokens-mat-text-button.get-typography-tokens($theme));
@@ -252,14 +251,14 @@
252251
}
253252
@else {
254253
@include sass-utils.current-selector-or-root() {
255-
@include mdc-button-text-theme.theme(
254+
@include token-utils.create-token-values(tokens-mdc-text-button.$prefix,
256255
tokens-mdc-text-button.get-density-tokens($theme));
257-
@include mdc-button-filled-theme.theme(
256+
@include token-utils.create-token-values(tokens-mdc-filled-button.$prefix,
258257
tokens-mdc-filled-button.get-density-tokens($theme));
259-
@include mdc-button-outlined-theme.theme(
260-
tokens-mdc-outlined-button.get-density-tokens($theme));
261-
@include mdc-button-protected-theme.theme(
258+
@include token-utils.create-token-values(tokens-mdc-protected-button.$prefix,
262259
tokens-mdc-protected-button.get-density-tokens($theme));
260+
@include token-utils.create-token-values(tokens-mdc-outlined-button.$prefix,
261+
tokens-mdc-outlined-button.get-density-tokens($theme));
263262

264263
@include token-utils.create-token-values(tokens-mat-text-button.$prefix,
265264
tokens-mat-text-button.get-density-tokens($theme));

0 commit comments

Comments
 (0)