Skip to content

Commit ee4ec66

Browse files
crisbetocrisbeto
committed
refactor(material/button): switch touch target to tokens
Reworks the button touch targets to use tokens.
1 parent c2555da commit ee4ec66

File tree

14 files changed

+124
-55
lines changed

14 files changed

+124
-55
lines changed

‎src/material-experimental/theming/_m3-density.scss

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,9 @@ $_density-tokens: (
7777
header-collapsed-state-height: (48px, 44px, 40px, 36px),
7878
header-expanded-state-height: (64px, 60px, 56px, 48px),
7979
),
80-
(mat, fab): (),
80+
(mat, fab): (
81+
touch-target-display: (block, block, none, none),
82+
),
8183
(mat, form-field): (
8284
container-height: (56px, 52px, 48px, 44px, 40px, 36px),
8385
filled-label-display: (block, block, none, none, none, none),
@@ -87,7 +89,21 @@ $_density-tokens: (
8789
),
8890
(mat, grid-list): (),
8991
(mat, icon): (),
90-
(mat, icon-button): (),
92+
(mat, icon-button): (
93+
touch-target-display: (block, block, none, none),
94+
),
95+
(mat, text-button): (
96+
touch-target-display: (block, block, none, none),
97+
),
98+
(mat, protected-button): (
99+
touch-target-display: (block, block, none, none),
100+
),
101+
(mat, filled-button): (
102+
touch-target-display: (block, block, none, none),
103+
),
104+
(mat, outlined-button): (
105+
touch-target-display: (block, block, none, none),
106+
),
91107
(mat, menu): (),
92108
(mat, optgroup): (),
93109
(mat, option): (),

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

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -110,22 +110,13 @@
110110
}
111111
}
112112

113-
// Hides the touch target on lower densities.
114-
@mixin mat-private-button-touch-target-density($scale) {
115-
@include mdc-helpers.if-touch-targets-unsupported($scale) {
116-
.mat-mdc-button-touch-target {
117-
display: none;
118-
}
119-
}
120-
}
121-
122113
// Adds an elevation shadow to a button.
123114
@mixin mat-private-button-elevation($token-name) {
124115
// MDC outputs a variable that is the same as the token name, but suffixed with `-shadow`.
125116
box-shadow: var(#{token-utils.get-token-variable($token-name) + '-shadow'});
126117
}
127118

128-
@mixin mat-private-button-touch-target($is-square) {
119+
@mixin mat-private-button-touch-target($is-square, $prefix, $slots) {
129120
// Element used to ensure that the button has a touch target that meets the required minimum.
130121
// Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC
131122
// class is implemented as `margin-top: 6px; margin-bottom: 6px` on the host element which
@@ -136,5 +127,9 @@
136127
@include mdc-touch-target.touch-target(
137128
$set-width: $is-square,
138129
$query: mdc-helpers.$mdc-base-styles-query);
130+
131+
@include token-utils.use-tokens($prefix, $slots) {
132+
@include token-utils.create-token-slot(display, touch-target-display);
133+
}
139134
}
140135
}

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

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
55
@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
66

7-
@use './button-base';
87
@use '../core/theming/theming';
98
@use '../core/theming/inspection';
109
@use '../core/tokens/token-utils';
@@ -192,15 +191,23 @@
192191
}
193192
@else {
194193
@include sass-utils.current-selector-or-root() {
195-
$text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
196-
$filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
197-
$outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
198-
$protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
199-
200-
@include mdc-button-text-theme.theme($text-typography-tokens);
201-
@include mdc-button-filled-theme.theme($filled-typography-tokens);
202-
@include mdc-button-outlined-theme.theme($outlined-typography-tokens);
203-
@include mdc-button-protected-theme.theme($protected-typography-tokens);
194+
@include mdc-button-text-theme.theme(
195+
tokens-mdc-text-button.get-typography-tokens($theme));
196+
@include mdc-button-filled-theme.theme(
197+
tokens-mdc-filled-button.get-typography-tokens($theme));
198+
@include mdc-button-outlined-theme.theme(
199+
tokens-mdc-outlined-button.get-typography-tokens($theme));
200+
@include mdc-button-protected-theme.theme(
201+
tokens-mdc-protected-button.get-typography-tokens($theme));
202+
203+
@include token-utils.create-token-values(tokens-mat-text-button.$prefix,
204+
tokens-mat-text-button.get-typography-tokens($theme));
205+
@include token-utils.create-token-values(tokens-mat-filled-button.$prefix,
206+
tokens-mat-filled-button.get-typography-tokens($theme));
207+
@include token-utils.create-token-values(tokens-mat-protected-button.$prefix,
208+
tokens-mat-protected-button.get-typography-tokens($theme));
209+
@include token-utils.create-token-values(tokens-mat-outlined-button.$prefix,
210+
tokens-mat-outlined-button.get-typography-tokens($theme));
204211
}
205212
}
206213
}
@@ -210,26 +217,24 @@
210217
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
211218
}
212219
@else {
213-
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
214-
215220
@include sass-utils.current-selector-or-root() {
216-
$text-density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
217-
$filled-density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
218-
$outlined-density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
219-
$protected-density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
220-
221-
@include mdc-button-text-theme.theme($text-density-tokens);
222-
@include mdc-button-filled-theme.theme($filled-density-tokens);
223-
@include mdc-button-outlined-theme.theme($outlined-density-tokens);
224-
@include mdc-button-protected-theme.theme($protected-density-tokens);
225-
}
226-
227-
.mat-mdc-button,
228-
.mat-mdc-raised-button,
229-
.mat-mdc-unelevated-button,
230-
.mat-mdc-outlined-button {
231-
// TODO: tokenize the touch target visibility.
232-
@include button-base.mat-private-button-touch-target-density($density-scale);
221+
@include mdc-button-text-theme.theme(
222+
tokens-mdc-text-button.get-density-tokens($theme));
223+
@include mdc-button-filled-theme.theme(
224+
tokens-mdc-filled-button.get-density-tokens($theme));
225+
@include mdc-button-outlined-theme.theme(
226+
tokens-mdc-outlined-button.get-density-tokens($theme));
227+
@include mdc-button-protected-theme.theme(
228+
tokens-mdc-protected-button.get-density-tokens($theme));
229+
230+
@include token-utils.create-token-values(tokens-mat-text-button.$prefix,
231+
tokens-mat-text-button.get-density-tokens($theme));
232+
@include token-utils.create-token-values(tokens-mat-filled-button.$prefix,
233+
tokens-mat-filled-button.get-density-tokens($theme));
234+
@include token-utils.create-token-values(tokens-mat-protected-button.$prefix,
235+
tokens-mat-protected-button.get-density-tokens($theme));
236+
@include token-utils.create-token-values(tokens-mat-outlined-button.$prefix,
237+
tokens-mat-outlined-button.get-density-tokens($theme));
233238
}
234239
}
235240
}

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@
7474
@else {
7575
@include sass-utils.current-selector-or-root() {
7676
@include mdc-extended-fab-theme.theme(tokens-mdc-extended-fab.get-typography-tokens($theme));
77+
@include token-utils.create-token-values(tokens-mat-fab.$prefix,
78+
tokens-mat-fab.get-typography-tokens($theme));
7779
}
7880
}
7981
}
@@ -82,7 +84,12 @@
8284
@if inspection.get-theme-version($theme) == 1 {
8385
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
8486
}
85-
@else {}
87+
@else {
88+
@include sass-utils.current-selector-or-root() {
89+
@include token-utils.create-token-values(tokens-mat-fab.$prefix,
90+
tokens-mat-fab.get-density-tokens($theme));
91+
}
92+
}
8693
}
8794

8895
@mixin theme($theme) {

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
@use '../core/tokens/m2/mdc/icon-button' as tokens-mdc-icon-button;
66
@use '../core/tokens/m2/mat/icon-button' as tokens-mat-icon-button;
77
@use '../core/style/sass-utils';
8-
@use './button-base';
98
@use '../core/tokens/token-utils';
109
@use '../core/theming/theming';
1110
@use '../core/theming/inspection';
@@ -67,7 +66,12 @@
6766
@if inspection.get-theme-version($theme) == 1 {
6867
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
6968
}
70-
@else {}
69+
@else {
70+
@include sass-utils.current-selector-or-root() {
71+
@include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
72+
tokens-mat-icon-button.get-typography-tokens($theme));
73+
}
74+
}
7175
}
7276

7377
@mixin density($theme) {
@@ -91,6 +95,11 @@
9195
$property-name: size,
9296
);
9397

98+
@include sass-utils.current-selector-or-root() {
99+
@include token-utils.create-token-values(tokens-mat-icon-button.$prefix,
100+
tokens-mat-icon-button.get-density-tokens($theme));
101+
}
102+
94103
// Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
95104
.mat-mdc-icon-button.mat-mdc-button-base {
96105
// Match the styles that used to be present. This is necessary for backwards
@@ -107,8 +116,6 @@
107116
width: var(--mdc-icon-button-state-layer-size);
108117
height: var(--mdc-icon-button-state-layer-size);
109118
padding: math.div($calculated-size - $icon-size, 2);
110-
111-
@include button-base.mat-private-button-touch-target-density($density-scale);
112119
}
113120
}
114121
}

‎src/material/button/button.scss

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@
3333
@include mdc-button-text-theme.theme-styles($mdc-text-button-slots);
3434
@include button-base.mat-private-button-ripple(tokens-mat-text-button.$prefix,
3535
tokens-mat-text-button.get-token-slots());
36+
@include button-base.mat-private-button-touch-target(false, tokens-mat-text-button.$prefix,
37+
tokens-mat-text-button.get-token-slots());
3638

3739
@include token-utils.use-tokens(tokens-mdc-text-button.$prefix, $mdc-text-button-slots) {
3840
// We need to re-apply the disabled tokens since MDC uses
@@ -49,6 +51,8 @@
4951
@include mdc-button-filled-theme.theme-styles($mdc-filled-button-slots);
5052
@include button-base.mat-private-button-ripple(tokens-mat-filled-button.$prefix,
5153
tokens-mat-filled-button.get-token-slots());
54+
@include button-base.mat-private-button-touch-target(false, tokens-mat-filled-button.$prefix,
55+
tokens-mat-filled-button.get-token-slots());
5256

5357
@include token-utils.use-tokens(tokens-mdc-filled-button.$prefix, $mdc-filled-button-slots) {
5458
// We need to re-apply the disabled tokens since MDC uses
@@ -74,6 +78,8 @@
7478
)));
7579
@include button-base.mat-private-button-ripple(tokens-mat-protected-button.$prefix,
7680
tokens-mat-protected-button.get-token-slots());
81+
@include button-base.mat-private-button-touch-target(false, tokens-mat-protected-button.$prefix,
82+
tokens-mat-protected-button.get-token-slots());
7783

7884
@include token-utils.use-tokens(
7985
tokens-mdc-protected-button.$prefix,
@@ -111,6 +117,8 @@
111117
@include mdc-button-outlined-theme.theme-styles($mdc-outlined-button-slots);
112118
@include button-base.mat-private-button-ripple(tokens-mat-outlined-button.$prefix,
113119
tokens-mat-outlined-button.get-token-slots());
120+
@include button-base.mat-private-button-touch-target(false, tokens-mat-outlined-button.$prefix,
121+
tokens-mat-outlined-button.get-token-slots());
114122

115123
@include token-utils.use-tokens(
116124
tokens-mdc-outlined-button.$prefix,
@@ -134,7 +142,6 @@
134142
.mat-mdc-raised-button,
135143
.mat-mdc-outlined-button {
136144
@include button-base.mat-private-button-interactive();
137-
@include button-base.mat-private-button-touch-target(false);
138145
@include style-private.private-animation-noop();
139146
}
140147

‎src/material/button/fab.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@
4646

4747
.mat-mdc-fab, .mat-mdc-mini-fab {
4848
@include button-base.mat-private-button-interactive();
49-
@include button-base.mat-private-button-touch-target(true);
49+
@include button-base.mat-private-button-touch-target(true, tokens-mat-fab.$prefix,
50+
tokens-mat-fab.get-token-slots());
5051
@include button-base.mat-private-button-ripple(tokens-mat-fab.$prefix,
5152
tokens-mat-fab.get-token-slots());
5253
@include style-private.private-animation-noop();

‎src/material/button/icon-button.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@
5656
@include button-base.mat-private-button-interactive();
5757
@include button-base.mat-private-button-ripple(tokens-mat-icon-button.$prefix,
5858
tokens-mat-icon-button.get-token-slots());
59-
@include button-base.mat-private-button-touch-target(true);
59+
@include button-base.mat-private-button-touch-target(true, tokens-mat-icon-button.$prefix,
60+
tokens-mat-icon-button.get-token-slots());
6061
@include private.private-animation-noop();
6162

6263
.mat-mdc-button-persistent-ripple {

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
33
@use '../../token-utils';
4+
@use '../../../theming/theming';
45
@use '../../../theming/inspection';
56
@use '../../../style/sass-utils';
67
@use '../../../mdc-helpers/mdc-helpers';
@@ -75,7 +76,11 @@ $prefix: (mat, fab);
7576

7677
// Tokens that can be configured through Angular Material's density theming API.
7778
@function get-density-tokens($theme) {
78-
@return ();
79+
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
80+
81+
@return (
82+
touch-target-display: if($density-scale < -1, none, block),
83+
);
7984
}
8085

8186
// Combines the tokens generated by the above functions into a single map with placeholder values.

‎src/material/core/tokens/m2/mat/_filled-button.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use 'sass:map';
22
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
33
@use '../../token-utils';
4+
@use '../../../theming/theming';
45
@use '../../../theming/inspection';
56
@use '../../../style/sass-utils';
67
@use '../../../mdc-helpers/mdc-helpers';
@@ -64,7 +65,11 @@ $prefix: (mat, filled-button);
6465

6566
// Tokens that can be configured through Angular Material's density theming API.
6667
@function get-density-tokens($theme) {
67-
@return ();
68+
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
69+
70+
@return (
71+
touch-target-display: if($density-scale < -1, none, block),
72+
);
6873
}
6974

7075
// Combines the tokens generated by the above functions into a single map with placeholder values.

0 commit comments

Comments
 (0)