Skip to content

Commit dbcf35d

Browse files
crisbetocrisbeto
authored
refactor(material/checkbox): simplify structural styles (angular#29136)
Simplifies the styles for the checkbox to make them smaller and easier to follow.
1 parent 3b96730 commit dbcf35d

File tree

8 files changed

+588
-224
lines changed

8 files changed

+588
-224
lines changed

‎src/material/checkbox/_checkbox-common.scss

Lines changed: 523 additions & 0 deletions
Large diffs are not rendered by default.

‎src/material/checkbox/_checkbox-theme.scss

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
21
@use '../core/style/sass-utils';
32
@use '../core/theming/theming';
43
@use '../core/theming/inspection';
@@ -16,7 +15,10 @@
1615
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
1716
} @else {
1817
@include sass-utils.current-selector-or-root() {
19-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-unthemable-tokens());
18+
@include token-utils.create-token-values(
19+
tokens-mdc-checkbox.$prefix,
20+
tokens-mdc-checkbox.get-unthemable-tokens()
21+
);
2022
@include token-utils.create-token-values(
2123
tokens-mat-checkbox.$prefix,
2224
tokens-mat-checkbox.get-unthemable-tokens()
@@ -35,7 +37,10 @@
3537
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
3638
} @else {
3739
@include sass-utils.current-selector-or-root() {
38-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
40+
@include token-utils.create-token-values(
41+
tokens-mdc-checkbox.$prefix,
42+
tokens-mdc-checkbox.get-color-tokens($theme)
43+
);
3944
@include token-utils.create-token-values(
4045
tokens-mat-checkbox.$prefix,
4146
tokens-mat-checkbox.get-color-tokens($theme)
@@ -44,11 +49,15 @@
4449

4550
.mat-mdc-checkbox {
4651
&.mat-primary {
47-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
52+
@include token-utils.create-token-values(
53+
tokens-mdc-checkbox.$prefix,
54+
tokens-mdc-checkbox.get-color-tokens($theme, primary));
4855
}
4956

5057
&.mat-warn {
51-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
58+
@include token-utils.create-token-values(
59+
tokens-mdc-checkbox.$prefix,
60+
tokens-mdc-checkbox.get-color-tokens($theme, warn));
5261
}
5362
}
5463
}
@@ -61,7 +70,10 @@
6170
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
6271
} @else {
6372
@include sass-utils.current-selector-or-root() {
64-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
73+
@include token-utils.create-token-values(
74+
tokens-mdc-checkbox.$prefix,
75+
tokens-mdc-checkbox.get-typography-tokens($theme)
76+
);
6577
@include token-utils.create-token-values(
6678
tokens-mat-checkbox.$prefix,
6779
tokens-mat-checkbox.get-typography-tokens($theme)
@@ -79,7 +91,10 @@
7991
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
8092
} @else {
8193
@include sass-utils.current-selector-or-root() {
82-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
94+
@include token-utils.create-token-values(
95+
tokens-mdc-checkbox.$prefix,
96+
tokens-mdc-checkbox.get-density-tokens($theme)
97+
);
8398
@include token-utils.create-token-values(
8499
tokens-mat-checkbox.$prefix,
85100
tokens-mat-checkbox.get-density-tokens($theme)
@@ -140,6 +155,6 @@
140155
// Don't pass $options here, since the mdc-checkbox doesn't support color options,
141156
// only the mdc-checkbox does.
142157
$mat-checkbox-tokens: token-utils.get-tokens-for($tokens, tokens-mat-checkbox.$prefix);
143-
@include mdc-checkbox-theme.theme($mdc-checkbox-tokens);
158+
@include token-utils.create-token-values(tokens-mdc-checkbox.$prefix, $mdc-checkbox-tokens);
144159
@include token-utils.create-token-values(tokens-mat-checkbox.$prefix, $mat-checkbox-tokens);
145160
}

‎src/material/checkbox/checkbox.scss

Lines changed: 10 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -1,176 +1,15 @@
1-
@use 'sass:map';
21
@use '@angular/cdk';
3-
@use '@material/checkbox/checkbox' as mdc-checkbox;
4-
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
5-
@use '@material/touch-target' as mdc-touch-target;
6-
@use '@material/theme/custom-properties' as mdc-custom-properties;
7-
@use '../core/mdc-helpers/mdc-helpers';
82
@use '../core/style/layout-common';
93
@use '../core/style/vendor-prefixes';
10-
@use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
114
@use '../core/tokens/m2/mat/checkbox' as tokens-mat-checkbox;
125
@use '../core/tokens/token-utils';
6+
@use './checkbox-common';
137

14-
@include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
15-
// Add the checkbox static styles.
16-
@include mdc-checkbox.static-styles();
17-
18-
$mdc-checkbox-slots: tokens-mdc-checkbox.get-token-slots();
19-
20-
.mdc-checkbox {
21-
// Add the slots for MDC checkbox.
22-
@include mdc-checkbox-theme.theme-styles(
23-
map.merge(
24-
$mdc-checkbox-slots,
25-
(
26-
// Angular Material focuses the native input. rather than the element MDC expects,
27-
// so we create this slot ourselves.
28-
selected-focus-icon-color: null,
29-
unselected-focus-icon-color: null,
30-
// MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
31-
// `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
32-
unselected-hover-state-layer-opacity: null,
33-
unselected-hover-state-layer-color: null,
34-
unselected-focus-state-layer-opacity: null,
35-
unselected-focus-state-layer-color: null,
36-
unselected-pressed-state-layer-opacity: null,
37-
unselected-pressed-state-layer-color: null,
38-
selected-hover-state-layer-opacity: null,
39-
selected-hover-state-layer-color: null,
40-
selected-focus-state-layer-opacity: null,
41-
selected-focus-state-layer-color: null,
42-
selected-pressed-state-layer-opacity: null,
43-
selected-pressed-state-layer-color: null
44-
)
45-
)
46-
);
47-
48-
@include token-utils.use-tokens(tokens-mdc-checkbox.$prefix, $mdc-checkbox-slots) {
49-
// MDC expects focus on .mdc-checkbox, but we focus the native element instead, so we need to
50-
// emit a our own slot for the focus styles.
51-
.mdc-checkbox__native-control:enabled:focus {
52-
// Extra `:focus` included to achieve higher specificity than MDC's `:hover` style.
53-
&:focus:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
54-
@include token-utils.create-token-slot(border-color, unselected-focus-icon-color);
55-
}
56-
57-
&:checked,
58-
&:indeterminate {
59-
& ~ .mdc-checkbox__background {
60-
@include token-utils.create-token-slot(border-color, selected-focus-icon-color);
61-
@include token-utils.create-token-slot(background-color, selected-focus-icon-color);
62-
}
63-
}
64-
}
65-
66-
// MDC expects `.mdc-checkbox__ripple::before` to be the state layer, but we use
67-
// `.mdc-checkbox__ripple` instead, so we emit the state layer slots ourselves.
68-
&:hover {
69-
.mdc-checkbox__ripple {
70-
@include token-utils.create-token-slot(opacity, unselected-hover-state-layer-opacity);
71-
@include token-utils.create-token-slot(
72-
background-color,
73-
unselected-hover-state-layer-color
74-
);
75-
}
76-
77-
.mat-mdc-checkbox-ripple .mat-ripple-element {
78-
@include token-utils.create-token-slot(
79-
background-color,
80-
unselected-hover-state-layer-color
81-
);
82-
}
83-
}
84-
85-
.mdc-checkbox__native-control:focus {
86-
& ~ .mdc-checkbox__ripple {
87-
@include token-utils.create-token-slot(opacity, unselected-focus-state-layer-opacity);
88-
@include token-utils.create-token-slot(
89-
background-color,
90-
unselected-focus-state-layer-color
91-
);
92-
}
93-
94-
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
95-
@include token-utils.create-token-slot(
96-
background-color,
97-
unselected-focus-state-layer-color
98-
);
99-
}
100-
}
101-
102-
&:active .mdc-checkbox__native-control {
103-
& ~ .mdc-checkbox__ripple {
104-
@include token-utils.create-token-slot(opacity, unselected-pressed-state-layer-opacity);
105-
@include token-utils.create-token-slot(
106-
background-color,
107-
unselected-pressed-state-layer-color
108-
);
109-
}
110-
111-
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
112-
@include token-utils.create-token-slot(
113-
background-color,
114-
unselected-pressed-state-layer-color
115-
);
116-
}
117-
}
118-
119-
&:hover .mdc-checkbox__native-control:checked {
120-
& ~ .mdc-checkbox__ripple {
121-
@include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
122-
@include token-utils.create-token-slot(
123-
background-color,
124-
selected-hover-state-layer-color
125-
);
126-
}
127-
128-
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
129-
@include token-utils.create-token-slot(
130-
background-color,
131-
selected-hover-state-layer-color
132-
);
133-
}
134-
}
135-
136-
.mdc-checkbox__native-control:focus:checked {
137-
& ~ .mdc-checkbox__ripple {
138-
@include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
139-
@include token-utils.create-token-slot(
140-
background-color,
141-
selected-focus-state-layer-color
142-
);
143-
}
144-
145-
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
146-
@include token-utils.create-token-slot(
147-
background-color,
148-
selected-focus-state-layer-color
149-
);
150-
}
151-
}
152-
153-
&:active .mdc-checkbox__native-control:checked {
154-
& ~ .mdc-checkbox__ripple {
155-
@include token-utils.create-token-slot(opacity, selected-pressed-state-layer-opacity);
156-
@include token-utils.create-token-slot(
157-
background-color,
158-
selected-pressed-state-layer-color
159-
);
160-
}
161-
162-
& ~ .mat-mdc-checkbox-ripple .mat-ripple-element {
163-
@include token-utils.create-token-slot(
164-
background-color,
165-
selected-pressed-state-layer-color
166-
);
167-
}
168-
}
169-
}
170-
}
171-
}
8+
@include checkbox-common.checkbox-structure(true);
1729

17310
.mat-mdc-checkbox {
11+
@include checkbox-common.checkbox-noop-animations;
12+
17413
// The host node defaults to `display: inline`, we have to change it in order for margins to work.
17514
display: inline-block;
17615
// Avoids issues in some CSS grid layouts (see #25153).
@@ -183,15 +22,6 @@
18322
@include vendor-prefixes.color-adjust(exact);
18423
}
18524

186-
// Angular Material supports disabling all animations when NoopAnimationsModule is imported.
187-
&._mat-animation-noopable {
188-
*,
189-
*::before {
190-
transition: none !important;
191-
animation: none !important;
192-
}
193-
}
194-
19525
// Clicking the label toggles the checkbox, but MDC does not include any styles that inform the
19626
// user of this. Therefore we add the pointer cursor on top of MDC's styles.
19727
label {
@@ -269,10 +99,12 @@
26999

270100
// Element used to provide a larger tap target for users on touch devices.
271101
.mat-mdc-checkbox-touch-target {
272-
@include mdc-touch-target.touch-target(
273-
$set-width: true,
274-
$query: mdc-helpers.$mdc-base-styles-query
275-
);
102+
position: absolute;
103+
top: 50%;
104+
left: 50%;
105+
height: 48px;
106+
width: 48px;
107+
transform: translate(-50%, -50%);
276108

277109
@include token-utils.use-tokens(
278110
tokens-mat-checkbox.$prefix,

‎src/material/core/tokens/m2/mdc/_checkbox.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ $prefix: (mdc, checkbox);
3535
// =============================================================================================
3636
// = TOKENS NOT USED IN ANGULAR MATERIAL =
3737
// =============================================================================================
38+
selected-pressed-icon-color: null,
39+
unselected-pressed-icon-color: null,
40+
3841
// MDC currently doesn't output a slot for these tokens.
3942
disabled-selected-icon-opacity: null,
4043
disabled-unselected-icon-opacity: null,
@@ -79,16 +82,12 @@ $prefix: (mdc, checkbox);
7982
selected-hover-icon-color: $palette-selected,
8083
// The color of the checkbox fill when the checkbox is selected.
8184
selected-icon-color: $palette-selected,
82-
// The color of the checkbox fill when the checkbox is selected an pressed.
83-
selected-pressed-icon-color: $palette-selected,
8485
// The color of the checkbox border when the checkbox is unselected and focused.
8586
unselected-focus-icon-color: $active-border-color,
8687
// The color of the checkbox border when the checkbox is unselected and hovered.
8788
unselected-hover-icon-color: $active-border-color,
8889
// The color of the checkbox border when the checkbox is unselected.
8990
unselected-icon-color: $border-color,
90-
// The color of the checkbox border when the checkbox is unselected and pressed.
91-
unselected-pressed-icon-color: $border-color,
9291
// The color of the ripple when the checkbox is selected and focused.
9392
selected-focus-state-layer-color: $palette-default,
9493
// The color of the ripple when the checkbox is selected and hovered.

‎src/material/list/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ sass_binary(
7171
":list_scss_lib",
7272
"//:mdc_sass_lib",
7373
"//src/cdk:sass_lib",
74+
"//src/material/checkbox:checkbox_scss_lib",
7475
"//src/material/core:core_scss_lib",
7576
],
7677
)

‎src/material/list/_list-item-hcm-indicator.scss

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,25 @@
66
// its background color. Since that doesn't work in HCM, this mixin provides an alternative by
77
// rendering a circle.
88
@mixin private-high-contrast-list-item-indicator() {
9-
@include cdk.high-contrast(active, off) {
10-
&::after {
11-
$size: 10px;
12-
content: '';
13-
position: absolute;
14-
top: 50%;
15-
right: mdc-list-variables.$side-padding;
16-
transform: translateY(-50%);
17-
width: $size;
18-
height: 0;
19-
border-bottom: solid $size;
20-
border-radius: $size;
21-
}
9+
@include cdk.high-contrast(active, off) {
10+
&::after {
11+
$size: 10px;
12+
content: '';
13+
position: absolute;
14+
top: 50%;
15+
right: mdc-list-variables.$side-padding;
16+
transform: translateY(-50%);
17+
width: $size;
18+
height: 0;
19+
border-bottom: solid $size;
20+
border-radius: $size;
21+
}
2222

23-
[dir='rtl'] {
24-
&::after {
25-
right: auto;
26-
left: mdc-list-variables.$side-padding;
27-
}
28-
}
23+
[dir='rtl'] {
24+
&::after {
25+
right: auto;
26+
left: mdc-list-variables.$side-padding;
27+
}
2928
}
29+
}
3030
}

‎src/material/list/_list-theme.scss

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use 'sass:map';
22
@use '@material/list/evolution-mixins';
3-
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
43
@use '@material/radio/radio-theme' as mdc-radio-theme;
54
@use '@material/list/list-theme' as mdc-list-theme;
65

@@ -63,13 +62,16 @@
6362
}
6463

6564
.mat-mdc-list-option {
66-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
65+
@include token-utils.create-token-values(
66+
tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, primary));
6767
}
6868
.mat-mdc-list-option.mat-accent {
69-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, accent));
69+
@include token-utils.create-token-values(
70+
tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, accent));
7071
}
7172
.mat-mdc-list-option.mat-warn {
72-
@include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
73+
@include token-utils.create-token-values(
74+
tokens-mdc-checkbox.$prefix, tokens-mdc-checkbox.get-color-tokens($theme, warn));
7375
}
7476

7577
// There is no token for activated color on nav list.

0 commit comments

Comments
 (0)