Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 637d15d

Browse files
allan-chencopybara-github
allan-chen
authored and
copybara-github
committed
feat(button): consolidate states into button mixins
PiperOrigin-RevId: 355201976
1 parent 8e66dbf commit 637d15d

File tree

3 files changed

+188
-46
lines changed

3 files changed

+188
-46
lines changed

‎packages/mdc-button/README.md

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -329,16 +329,12 @@ These mixins will override the color of the container, ink, outline or ripple. I
329329

330330
Mixin | Description
331331
--- | ---
332-
`container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.
333-
`disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.
334-
`icon-color($color)` | Sets the icon color to the given color for an enabled button.
335-
`disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.
336-
`ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `icon-color` is also used.
337-
`disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `icon-color` is also used.
332+
`container-fill-color($color-or-map)` | If a color is passed, sets the default container fill color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.
333+
`icon-color($color-or-map)` | If a color is passed, sets the default icon color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.
334+
`ink-color($color-or-map)` | If a color is passed, sets the default ink color to the given color, and sets the icon color to the given color unless `icon-color` is also used. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.
338335
`density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).
339336
`height($height)` | Sets custom height for button.
340337
`shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
341338
`horizontal-padding($padding)` | Sets horizontal padding to the given number.
342-
`outline-color($color)` | Sets the outline color to the given color for an enabled button.
343-
`disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.
339+
`outline-color($color-or-map)` | If a color is passed, sets the default outline color to the given color. If a map is passed whose keys are in the set {default, hover, focus, pressed, disabled}, sets the color in each specified state to its corresponding value.
344340
`outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `$horizontal-padding` is also included with a custom value.

‎packages/mdc-button/_button-outlined-theme.scss

Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
@use 'sass:map';
2727
@use 'sass:math';
2828
@use '@material/feature-targeting/feature-targeting';
29+
@use '@material/theme/state';
2930
@use '@material/theme/theme';
3031
@use '@material/theme/theme-color';
3132
@use './button-base';
@@ -57,32 +58,71 @@ $light-theme: (
5758
@mixin theme($theme, $query: feature-targeting.all()) {
5859
@include theme.validate-keys($light-theme, $theme);
5960
@include button-shared-theme.theme($theme, $query: $query);
60-
@include outline-color(map.get($theme, outline-color), $query: $query);
61-
@include disabled-outline-color(
62-
map.get($theme, outline-disabled-color),
61+
@include outline-color(
62+
(
63+
default: map.get($theme, outline-color),
64+
disabled: map.get($theme, outline-disabled-color),
65+
),
6366
$query: $query
6467
);
6568
@include outline-width(map.get($theme, outline-width), $query: $query);
6669
}
6770

6871
///
6972
/// Sets the outline color to the given color for an enabled button.
70-
/// @param {Color} $color - The desired outline color.
73+
/// @param {Color} $color-or-map - The desired outline color, specified either
74+
/// as a flat value or a map of colors with states
75+
/// {default, hover, focused, pressed, disabled} as keys.
7176
///
72-
@mixin outline-color($color, $query: feature-targeting.all()) {
77+
@mixin outline-color($color-or-map, $query: feature-targeting.all()) {
7378
&:not(:disabled) {
74-
@include _outline-color($color, $query: $query);
79+
@include _outline-color(
80+
state.get-default-state($color-or-map),
81+
$query: $query
82+
);
83+
84+
&:hover {
85+
@include _outline-color(
86+
state.get-hover-state($color-or-map),
87+
$query: $query
88+
);
89+
}
90+
91+
&:focus {
92+
@include _outline-color(
93+
state.get-focus-state($color-or-map),
94+
$query: $query
95+
);
96+
}
97+
98+
&:active {
99+
@include _outline-color(
100+
state.get-pressed-state($color-or-map),
101+
$query: $query
102+
);
103+
}
104+
}
105+
106+
&:disabled {
107+
@include _outline-color(
108+
state.get-disabled-state($color-or-map),
109+
$query: $query
110+
);
75111
}
76112
}
77113

78114
///
79115
/// Sets the outline color to the given color for a disabled button.
80116
/// @param {Color} $color - The desired outline color.
117+
/// @deprecated - call `outline-color` instead with `disabled` as a map key.
81118
///
82119
@mixin disabled-outline-color($color, $query: feature-targeting.all()) {
83-
&:disabled {
84-
@include _outline-color($color, $query: $query);
85-
}
120+
@include outline-color(
121+
(
122+
disabled: $color,
123+
),
124+
$query: $query
125+
);
86126
}
87127

88128
@mixin outline-width(

‎packages/mdc-button/_button-shared-theme.scss

Lines changed: 135 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
@use '@material/feature-targeting/feature-targeting';
3131
@use '@material/ripple/ripple-theme';
3232
@use '@material/shape/mixins' as shape-mixins;
33+
@use '@material/theme/state';
3334
@use '@material/theme/theme';
3435
@use '@material/theme/theme-color';
3536
@use '@material/typography/typography';
@@ -60,23 +61,26 @@ $disabled-container-color: rgba(
6061

6162
@mixin theme($theme, $query: feature-targeting.all()) {
6263
@include container-fill-color(
63-
map.get($theme, container-color),
64-
$query: $query
65-
);
66-
@include disabled-container-fill-color(
67-
map.get($theme, container-disabled-color),
64+
(
65+
default: map.get($theme, container-color),
66+
disabled: map.get($theme, container-disabled-color),
67+
),
6868
$query: $query
6969
);
7070

71-
@include ink-color(map.get($theme, label-color), $query: $query);
72-
@include disabled-ink-color(
73-
map.get($theme, label-disabled-color),
71+
@include ink-color(
72+
(
73+
default: map.get($theme, label-color),
74+
disabled: map.get($theme, label-disabled-color),
75+
),
7476
$query: $query
7577
);
7678

77-
@include icon-color(map.get($theme, icon-color), $query: $query);
78-
@include disabled-icon-color(
79-
map.get($theme, icon-disabled-color),
79+
@include icon-color(
80+
(
81+
default: map.get($theme, icon-color),
82+
disabled: map.get($theme, icon-disabled-color),
83+
),
8084
$query: $query
8185
);
8286

@@ -139,55 +143,153 @@ $disabled-container-color: rgba(
139143

140144
///
141145
/// Sets the container fill color to the given color for an enabled button.
142-
/// @param {Color} $color - The desired container fill color.
146+
/// @param {Color|map} $color-or-map - The desired container fill color,
147+
/// specified either as a flat value or a map of colors with states
148+
/// {default, hover, focused, pressed, disabled} as keys.
143149
///
144-
@mixin container-fill-color($color, $query: feature-targeting.all()) {
150+
@mixin container-fill-color($color-or-map, $query: feature-targeting.all()) {
145151
// :not(:disabled) is used to support link styled as button
146152
// as link does not support :enabled style
147153
&:not(:disabled) {
148-
@include _container-fill-color($color, $query: $query);
154+
@include _container-fill-color(
155+
state.get-default-state($color-or-map),
156+
$query: $query
157+
);
158+
159+
&:hover {
160+
@include _container-fill-color(
161+
state.get-hover-state($color-or-map),
162+
$query: $query
163+
);
164+
}
165+
166+
&:focus {
167+
@include _container-fill-color(
168+
state.get-focus-state($color-or-map),
169+
$query: $query
170+
);
171+
}
172+
173+
&:active {
174+
@include _container-fill-color(
175+
state.get-pressed-state($color-or-map),
176+
$query: $query
177+
);
178+
}
179+
}
180+
181+
&:disabled {
182+
@include _container-fill-color(
183+
state.get-disabled-state($color-or-map),
184+
$query: $query
185+
);
149186
}
150187
}
151188

152189
///
153190
/// Sets the container fill color to the given color for a disabled button.
154191
/// @param {Color} $color - The desired container fill color.
192+
/// @deprecated - call `icon-color` instead with `disabled` as a map key.
155193
///
156194
@mixin disabled-container-fill-color($color, $query: feature-targeting.all()) {
157-
&:disabled {
158-
@include _container-fill-color($color, $query: $query);
159-
}
195+
@include container-fill-color(
196+
(
197+
disabled: $color,
198+
),
199+
$query: $query
200+
);
160201
}
161202

162203
///
163204
/// Sets the icon color to the given color for an enabled button.
164-
/// @param {Color} $color - The desired icon color.
205+
/// @param {Color} $color-or-map - The desired icon color, specified either
206+
/// as a flat value or a map of colors with states
207+
/// {default, hover, focused, pressed, disabled} as keys.
165208
///
166-
@mixin icon-color($color, $query: feature-targeting.all()) {
209+
@mixin icon-color($color-or-map, $query: feature-targeting.all()) {
167210
&:not(:disabled) {
168-
@include _icon-color($color, $query: $query);
211+
@include _icon-color(
212+
state.get-default-state($color-or-map),
213+
$query: $query
214+
);
215+
216+
&:hover {
217+
@include _icon-color(
218+
state.get-hover-state($color-or-map),
219+
$query: $query
220+
);
221+
}
222+
223+
&:focus {
224+
@include _icon-color(
225+
state.get-focus-state($color-or-map),
226+
$query: $query
227+
);
228+
}
229+
230+
&:active {
231+
@include _icon-color(
232+
state.get-pressed-state($color-or-map),
233+
$query: $query
234+
);
235+
}
236+
}
237+
238+
&:disabled {
239+
@include _icon-color(
240+
state.get-disabled-state($color-or-map),
241+
$query: $query
242+
);
169243
}
170244
}
171245

172246
///
173247
/// Sets the icon color to the given color for a disabled button.
174248
/// @param {Color} $color - The desired icon color.
249+
/// @deprecated - call `icon-color` instead with `disabled` as a map key.
175250
///
176251
@mixin disabled-icon-color($color, $query: feature-targeting.all()) {
177-
&:disabled {
178-
@include _icon-color($color, $query: $query);
179-
}
252+
@include icon-color(
253+
(
254+
disabled: $color,
255+
),
256+
$query: $query
257+
);
180258
}
181259

182260
///
183261
/// Sets the ink color to the given color for an enabled button,
184262
/// and sets the icon color to the given color unless `mdc-button-icon-color`
185263
/// is also used.
186-
/// @param {Color} $color - The desired ink color.
264+
/// @param {Color} $color-or-map - The desired ink color, specified either
265+
/// as a flat value or a map of colors with states
266+
/// {default, hover, focused, pressed, disabled} as keys.
187267
///
188-
@mixin ink-color($color, $query: feature-targeting.all()) {
268+
@mixin ink-color($color-or-map, $query: feature-targeting.all()) {
189269
&:not(:disabled) {
190-
@include _ink-color($color, $query: $query);
270+
@include _ink-color(state.get-default-state($color-or-map), $query: $query);
271+
272+
&:hover {
273+
@include _ink-color(state.get-hover-state($color-or-map), $query: $query);
274+
}
275+
276+
&:focus {
277+
@include _ink-color(state.get-focus-state($color-or-map), $query: $query);
278+
}
279+
280+
&:active {
281+
@include _ink-color(
282+
state.get-pressed-state($color-or-map),
283+
$query: $query
284+
);
285+
}
286+
}
287+
288+
&:disabled {
289+
@include _ink-color(
290+
state.get-disabled-state($color-or-map),
291+
$query: $query
292+
);
191293
}
192294
}
193295

@@ -196,11 +298,15 @@ $disabled-container-color: rgba(
196298
/// and sets the icon color to the given color unless `mdc-button-icon-color`
197299
/// is also used.
198300
/// @param {Color} $color - The desired ink color.
301+
/// @deprecated - call `ink-color` instead with `disabled` as a map key.
199302
///
200303
@mixin disabled-ink-color($color, $query: feature-targeting.all()) {
201-
&:disabled {
202-
@include _ink-color($color, $query: $query);
203-
}
304+
@include ink-color(
305+
(
306+
disabled: $color,
307+
),
308+
$query: $query
309+
);
204310
}
205311

206312
///

0 commit comments

Comments
 (0)