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

Commit e8bf5b2

Browse files
asynclizcopybara-github
asyncliz
authored and
copybara-github
committed
refactor(select): consolidate state theming to single mixins
BREAKING CHANGE: select theming mixins which were previously "stateful" (e.g. `hover-label-color()`) are combined into the non-stateful mixin (e.g. `label-color()`). The default state of the mixin can be set as normal, or a Map of states can be provided to optionally set one or more states of the mixin (e.g. `label-color((hover: blue))`). See the `@material/theme/state` package for more details. PiperOrigin-RevId: 325314602
1 parent 0809012 commit e8bf5b2

8 files changed

Lines changed: 276 additions & 260 deletions

‎packages/mdc-select/README.md‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -495,28 +495,14 @@ Mixins should be included in the context of a custom class applied to the compon
495495

496496
Mixin | Description
497497
--- | ---
498-
`ink-color($color)` | Customizes the color of the selected item displayed in the select.
499-
`container-fill-color($color)` | Customizes the background color of the select.
500-
`disabled-container-fill-color($color)` | Customizes the background color of the select when disabled.
501-
`dropdown-icon-color($color)` | Customizes the dropdown icon color of the select.
502-
`hover-dropdown-icon-color($color)` | Customizes the dropdown icon color of the select when hovered.
503-
`focused-dropdown-icon-color($color)` | Customizes the dropdown icon color of the select when focused.
504-
`disabled-dropdown-icon-color($color)` | Customizes the dropdown icon color of the select when disabled.
505-
`label-color($color)` | Customizes the label color of the select in the unfocused state.
506-
`hover-label-color($color)` | Customizes the label color of the select when hovered.
507-
`focused-label-color($color)` | Customizes the label color of the select when focused.
508-
`label-floating-color($color)` | Customizes the label color of the select when the label is floated, but the select is not necessarily focused.
509-
`hover-label-floating-color($color)` | Customizes the label color of the select when hovered and label is floated.
510-
`disabled-label-color($color)` | Customizes the label color of the select when disabled.
511-
`bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
512-
`hover-bottom-line-color($color)` | Customizes the color of the bottom line when the select is hovered.
513-
`focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused.
514-
`disabled-bottom-line-color($color)` | Customizes the color of the bottom line when the select is disabled.
498+
`ink-color($state)` | Customizes the color of the selected item displayed in the select. Accepts a Map for `default` and `disabled` states.
499+
`container-fill-color($state)` | Customizes the background color of the select. Accepts a Map for `default` and `disabled` states.
500+
`dropdown-icon-color($state)` | Customizes the dropdown icon color of the select. Accepts a Map for `default`, `hover`, `focus`, and `disabled` states.
501+
`label-color($state)` | Customizes the label color of the select. Accepts a Map for `default`, `hover`, `focus`, and `disabled` states.
502+
`label-floating-color($state)` | Customizes the label color of the select when the label is floating. Accepts a Map for `default` and `hover` states.
503+
`bottom-line-color($state)` | Customizes the color of the bottom line of the select. Accepts a Map for `default`, `hover`, `focus`, and `disabled` states.
515504
`filled-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to filled select variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
516-
`outline-color($color)` | Customizes the color of the notched outline.
517-
`focused-outline-color($color)` | Customizes the color of the outline of the select when focused.
518-
`hover-outline-color($color)` | Customizes the color of the outline when the select is hovered.
519-
`disabled-outline-color($color)` | Customizes the color of the notched outline when the select is disabled.
505+
`outline-color($state)` | Customizes the color of the notched outline. Accepts a Map for `default`, `hover`, `focus`, and `disabled` states.
520506
`outline-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets the border radius of the outlined select variant. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
521507
`filled-density($density-scale)` | Sets density scale for the filled select variant (Excluding filled select with leading icon).
522508
`filled-with-leading-icon-density($density-scale)` | Sets density scale for filled select with leading icon.

‎packages/mdc-select/_select-filled.scss‎

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,25 +37,20 @@
3737
);
3838

3939
@include select-theme.container-fill-color(
40-
select-theme.$fill-color,
41-
$query: $query
42-
);
43-
@include select-theme.disabled-container-fill-color(
44-
select-theme.$disabled-fill-color,
40+
(
41+
default: select-theme.$fill-color,
42+
disabled: select-theme.$disabled-fill-color,
43+
),
4544
$query: $query
4645
);
4746

4847
@include select-theme.bottom-line-color(
49-
select-theme.$bottom-line-idle-color,
50-
$query: $query
51-
);
52-
@include select-theme.focused-bottom-line-color(primary, $query: $query);
53-
@include select-theme.hover-bottom-line-color(
54-
select-theme.$bottom-line-hover-color,
55-
$query: $query
56-
);
57-
@include select-theme.disabled-bottom-line-color(
58-
select-theme.$disabled-bottom-line-color,
48+
(
49+
default: select-theme.$bottom-line-idle-color,
50+
focus: primary,
51+
hover: select-theme.$bottom-line-hover-color,
52+
disabled: select-theme.$disabled-bottom-line-color,
53+
),
5954
$query: $query
6055
);
6156

@@ -99,15 +94,11 @@
9994

10095
.mdc-select--invalid {
10196
@include select-theme.bottom-line-color(
102-
select-theme.$error-color,
103-
$query: $query
104-
);
105-
@include select-theme.hover-bottom-line-color(
106-
select-theme.$error-color,
107-
$query: $query
108-
);
109-
@include select-theme.focused-bottom-line-color(
110-
select-theme.$error-color,
97+
(
98+
default: select-theme.$error-color,
99+
hover: select-theme.$error-color,
100+
focus: select-theme.$error-color,
101+
),
111102
$query: $query
112103
);
113104
}

‎packages/mdc-select/_select-helper-text-theme.scss‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222

2323
@use '@material/feature-targeting/feature-targeting';
2424
@use '@material/theme/mixins' as theme-mixins;
25+
@use '@material/theme/state';
2526
@use '@material/theme/variables' as theme-variables;
2627

2728
$helper-text-color: rgba(theme-variables.prop-value(on-surface), 0.6) !default;
@@ -30,30 +31,38 @@ $disabled-helper-text-color: rgba(
3031
0.38
3132
) !default;
3233

33-
@mixin helper-text-color($color, $query: feature-targeting.all()) {
34+
@mixin helper-text-color($color-or-map, $query: feature-targeting.all()) {
3435
&:not(.mdc-select--disabled) {
35-
@include _helper-text-color($color, $query: $query);
36+
@include _helper-text-color(
37+
state.get-default-state($color-or-map),
38+
$query: $query
39+
);
3640
}
37-
}
3841

39-
@mixin disabled-helper-text-color($color, $query: feature-targeting.all()) {
4042
&.mdc-select--disabled {
41-
@include _helper-text-color($color, $query: $query);
42-
}
43-
}
44-
45-
@mixin helper-text-validation-color($color, $query: feature-targeting.all()) {
46-
&:not(.mdc-select--disabled) {
47-
@include _helper-text-validation-color($color, $query: $query);
43+
@include _helper-text-color(
44+
state.get-disabled-state($color-or-map),
45+
$query: $query
46+
);
4847
}
4948
}
5049

51-
@mixin hover-helper-text-validation-color(
52-
$color,
50+
@mixin helper-text-validation-color(
51+
$color-or-map,
5352
$query: feature-targeting.all()
5453
) {
55-
&:not(.mdc-select--disabled):not(.mdc-select--focused):hover {
56-
@include _helper-text-validation-color($color, $query: $query);
54+
&:not(.mdc-select--disabled) {
55+
@include _helper-text-validation-color(
56+
state.get-default-state($color-or-map),
57+
$query: $query
58+
);
59+
60+
&:not(.mdc-select--focused):hover {
61+
@include _helper-text-validation-color(
62+
state.get-hover-state($color-or-map),
63+
$query: $query
64+
);
65+
}
5766
}
5867
}
5968

@@ -62,19 +71,23 @@ $disabled-helper-text-color: rgba(
6271
@mixin _helper-text-color($color, $query: feature-targeting.all()) {
6372
$feat-color: feature-targeting.create-target($query, color);
6473

65-
& + .mdc-select-helper-text {
66-
@include feature-targeting.targets($feat-color) {
67-
@include theme-mixins.prop(color, $color);
74+
@if $color {
75+
& + .mdc-select-helper-text {
76+
@include feature-targeting.targets($feat-color) {
77+
@include theme-mixins.property(color, $color);
78+
}
6879
}
6980
}
7081
}
7182

7283
@mixin _helper-text-validation-color($color, $query: feature-targeting.all()) {
7384
$feat-color: feature-targeting.create-target($query, color);
7485

75-
&.mdc-select--invalid + .mdc-select-helper-text--validation-msg {
76-
@include feature-targeting.targets($feat-color) {
77-
@include theme-mixins.prop(color, $color);
86+
@if $color {
87+
&.mdc-select--invalid + .mdc-select-helper-text--validation-msg {
88+
@include feature-targeting.targets($feat-color) {
89+
@include theme-mixins.property(color, $color);
90+
}
7891
}
7992
}
8093
}

‎packages/mdc-select/_select-icon-theme.scss‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
@use '@material/feature-targeting/feature-targeting';
2424
@use '@material/rtl/mixins' as rtl-mixins;
2525
@use '@material/theme/mixins' as theme-mixins;
26+
@use '@material/theme/state';
2627
@use '@material/theme/variables' as theme-variables;
2728

2829
$icon-size: 24px !default;
@@ -51,15 +52,19 @@ $disabled-icon-color: rgba(
5152
}
5253
}
5354

54-
@mixin icon-color($color, $query: feature-targeting.all()) {
55+
@mixin icon-color($color-or-map, $query: feature-targeting.all()) {
5556
&:not(.mdc-select--disabled) {
56-
@include _icon-color($color, $query: $query);
57+
@include _icon-color(
58+
state.get-default-state($color-or-map),
59+
$query: $query
60+
);
5761
}
58-
}
5962

60-
@mixin disabled-icon-color($color, $query: feature-targeting.all()) {
6163
&.mdc-select--disabled {
62-
@include _icon-color($color, $query: $query);
64+
@include _icon-color(
65+
state.get-disabled-state($color-or-map),
66+
$query: $query
67+
);
6368
}
6469
}
6570

@@ -75,9 +80,11 @@ $disabled-icon-color: rgba(
7580
@mixin _icon-color($color, $query: feature-targeting.all()) {
7681
$feat-color: feature-targeting.create-target($query, color);
7782

78-
.mdc-select__icon {
79-
@include feature-targeting.targets($feat-color) {
80-
@include theme-mixins.prop(color, $color);
83+
@if $color {
84+
.mdc-select__icon {
85+
@include feature-targeting.targets($feat-color) {
86+
@include theme-mixins.property(color, $color);
87+
}
8188
}
8289
}
8390
}

‎packages/mdc-select/_select-outlined.scss‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -39,23 +39,21 @@
3939
$query: $query
4040
);
4141

42-
@include select-theme.container-fill-color(transparent, $query: $query);
43-
@include select-theme.disabled-container-fill-color(
44-
transparent,
42+
@include select-theme.container-fill-color(
43+
(
44+
default: transparent,
45+
disabled: transparent,
46+
),
4547
$query: $query
4648
);
4749

4850
@include select-theme.outline-color(
49-
select-theme.$outlined-idle-border,
50-
$query: $query
51-
);
52-
@include select-theme.hover-outline-color(
53-
select-theme.$outlined-hover-border,
54-
$query: $query
55-
);
56-
@include select-theme.focused-outline-color(primary, $query: $query);
57-
@include select-theme.disabled-outline-color(
58-
select-theme.$disabled-outline-color,
51+
(
52+
default: select-theme.$outlined-idle-border,
53+
hover: select-theme.$outlined-hover-border,
54+
focus: primary,
55+
disabled: select-theme.$disabled-outline-color,
56+
),
5957
$query: $query
6058
);
6159

@@ -130,15 +128,11 @@
130128

131129
&.mdc-select--invalid {
132130
@include select-theme.outline-color(
133-
select-theme.$error-color,
134-
$query: $query
135-
);
136-
@include select-theme.hover-outline-color(
137-
select-theme.$error-color,
138-
$query: $query
139-
);
140-
@include select-theme.focused-outline-color(
141-
select-theme.$error-color,
131+
(
132+
default: select-theme.$error-color,
133+
hover: select-theme.$error-color,
134+
focus: select-theme.$error-color,
135+
),
142136
$query: $query
143137
);
144138
}

0 commit comments

Comments
 (0)