Skip to content

Commit 3b2e7cb

Browse files
crisbetocrisbeto
committed
feat(material-experimental/mdc-slide-toggle): switch to non-deprecated styles
Switches the MDC-based slide toggle to the non-deprecated MDC styles. Notable changes: * New markup which uses a `button` instead of an `input` for the button. * New icons inside the slide toggle's thumb. Technically we could opt out of them, but I think that they look better and they help with accessibility for color-blind users. * New theming system that uses a flat list of variables. There is a fallback for IE11, but I opted not to include it for now, because of the upcoming deprecation and the fact that the component is in experimental. * The component has some slightly different colors and it supports more states (e.g. hover). * Due to the switch from `input` to `button`, the `required` input is basically a noop now.
1 parent e1d775d commit 3b2e7cb

18 files changed

+947
-951
lines changed

‎package.json

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"@types/googlemaps": "^3.43.1",
6565
"@types/youtube": "^0.0.42",
6666
"core-js-bundle": "^3.8.2",
67-
"material-components-web": "12.0.0-canary.08d791f37.0",
67+
"material-components-web": "12.0.0-canary.068fd5028.0",
6868
"rxjs": "^6.5.3",
6969
"rxjs-tslint-rules": "^4.33.1",
7070
"systemjs": "0.19.43",
@@ -96,53 +96,53 @@
9696
"@bazel/terser": "3.5.0",
9797
"@bazel/typescript": "3.5.0",
9898
"@firebase/app-types": "^0.6.1",
99-
"@material/animation": "12.0.0-canary.08d791f37.0",
100-
"@material/auto-init": "12.0.0-canary.08d791f37.0",
101-
"@material/banner": "12.0.0-canary.08d791f37.0",
102-
"@material/base": "12.0.0-canary.08d791f37.0",
103-
"@material/button": "12.0.0-canary.08d791f37.0",
104-
"@material/card": "12.0.0-canary.08d791f37.0",
105-
"@material/checkbox": "12.0.0-canary.08d791f37.0",
106-
"@material/chips": "12.0.0-canary.08d791f37.0",
107-
"@material/circular-progress": "12.0.0-canary.08d791f37.0",
108-
"@material/data-table": "12.0.0-canary.08d791f37.0",
109-
"@material/density": "12.0.0-canary.08d791f37.0",
110-
"@material/dialog": "12.0.0-canary.08d791f37.0",
111-
"@material/dom": "12.0.0-canary.08d791f37.0",
112-
"@material/drawer": "12.0.0-canary.08d791f37.0",
113-
"@material/elevation": "12.0.0-canary.08d791f37.0",
114-
"@material/fab": "12.0.0-canary.08d791f37.0",
115-
"@material/feature-targeting": "12.0.0-canary.08d791f37.0",
116-
"@material/floating-label": "12.0.0-canary.08d791f37.0",
117-
"@material/form-field": "12.0.0-canary.08d791f37.0",
118-
"@material/icon-button": "12.0.0-canary.08d791f37.0",
119-
"@material/image-list": "12.0.0-canary.08d791f37.0",
120-
"@material/layout-grid": "12.0.0-canary.08d791f37.0",
121-
"@material/line-ripple": "12.0.0-canary.08d791f37.0",
122-
"@material/linear-progress": "12.0.0-canary.08d791f37.0",
123-
"@material/list": "12.0.0-canary.08d791f37.0",
124-
"@material/menu": "12.0.0-canary.08d791f37.0",
125-
"@material/menu-surface": "12.0.0-canary.08d791f37.0",
126-
"@material/notched-outline": "12.0.0-canary.08d791f37.0",
127-
"@material/radio": "12.0.0-canary.08d791f37.0",
128-
"@material/ripple": "12.0.0-canary.08d791f37.0",
129-
"@material/rtl": "12.0.0-canary.08d791f37.0",
130-
"@material/segmented-button": "12.0.0-canary.08d791f37.0",
131-
"@material/select": "12.0.0-canary.08d791f37.0",
132-
"@material/shape": "12.0.0-canary.08d791f37.0",
133-
"@material/slider": "12.0.0-canary.08d791f37.0",
134-
"@material/snackbar": "12.0.0-canary.08d791f37.0",
135-
"@material/switch": "12.0.0-canary.08d791f37.0",
136-
"@material/tab": "12.0.0-canary.08d791f37.0",
137-
"@material/tab-bar": "12.0.0-canary.08d791f37.0",
138-
"@material/tab-indicator": "12.0.0-canary.08d791f37.0",
139-
"@material/tab-scroller": "12.0.0-canary.08d791f37.0",
140-
"@material/textfield": "12.0.0-canary.08d791f37.0",
141-
"@material/theme": "12.0.0-canary.08d791f37.0",
142-
"@material/tooltip": "12.0.0-canary.08d791f37.0",
143-
"@material/top-app-bar": "12.0.0-canary.08d791f37.0",
144-
"@material/touch-target": "12.0.0-canary.08d791f37.0",
145-
"@material/typography": "12.0.0-canary.08d791f37.0",
99+
"@material/animation": "12.0.0-canary.068fd5028.0",
100+
"@material/auto-init": "12.0.0-canary.068fd5028.0",
101+
"@material/banner": "12.0.0-canary.068fd5028.0",
102+
"@material/base": "12.0.0-canary.068fd5028.0",
103+
"@material/button": "12.0.0-canary.068fd5028.0",
104+
"@material/card": "12.0.0-canary.068fd5028.0",
105+
"@material/checkbox": "12.0.0-canary.068fd5028.0",
106+
"@material/chips": "12.0.0-canary.068fd5028.0",
107+
"@material/circular-progress": "12.0.0-canary.068fd5028.0",
108+
"@material/data-table": "12.0.0-canary.068fd5028.0",
109+
"@material/density": "12.0.0-canary.068fd5028.0",
110+
"@material/dialog": "12.0.0-canary.068fd5028.0",
111+
"@material/dom": "12.0.0-canary.068fd5028.0",
112+
"@material/drawer": "12.0.0-canary.068fd5028.0",
113+
"@material/elevation": "12.0.0-canary.068fd5028.0",
114+
"@material/fab": "12.0.0-canary.068fd5028.0",
115+
"@material/feature-targeting": "12.0.0-canary.068fd5028.0",
116+
"@material/floating-label": "12.0.0-canary.068fd5028.0",
117+
"@material/form-field": "12.0.0-canary.068fd5028.0",
118+
"@material/icon-button": "12.0.0-canary.068fd5028.0",
119+
"@material/image-list": "12.0.0-canary.068fd5028.0",
120+
"@material/layout-grid": "12.0.0-canary.068fd5028.0",
121+
"@material/line-ripple": "12.0.0-canary.068fd5028.0",
122+
"@material/linear-progress": "12.0.0-canary.068fd5028.0",
123+
"@material/list": "12.0.0-canary.068fd5028.0",
124+
"@material/menu": "12.0.0-canary.068fd5028.0",
125+
"@material/menu-surface": "12.0.0-canary.068fd5028.0",
126+
"@material/notched-outline": "12.0.0-canary.068fd5028.0",
127+
"@material/radio": "12.0.0-canary.068fd5028.0",
128+
"@material/ripple": "12.0.0-canary.068fd5028.0",
129+
"@material/rtl": "12.0.0-canary.068fd5028.0",
130+
"@material/segmented-button": "12.0.0-canary.068fd5028.0",
131+
"@material/select": "12.0.0-canary.068fd5028.0",
132+
"@material/shape": "12.0.0-canary.068fd5028.0",
133+
"@material/slider": "12.0.0-canary.068fd5028.0",
134+
"@material/snackbar": "12.0.0-canary.068fd5028.0",
135+
"@material/switch": "12.0.0-canary.068fd5028.0",
136+
"@material/tab": "12.0.0-canary.068fd5028.0",
137+
"@material/tab-bar": "12.0.0-canary.068fd5028.0",
138+
"@material/tab-indicator": "12.0.0-canary.068fd5028.0",
139+
"@material/tab-scroller": "12.0.0-canary.068fd5028.0",
140+
"@material/textfield": "12.0.0-canary.068fd5028.0",
141+
"@material/theme": "12.0.0-canary.068fd5028.0",
142+
"@material/tooltip": "12.0.0-canary.068fd5028.0",
143+
"@material/top-app-bar": "12.0.0-canary.068fd5028.0",
144+
"@material/touch-target": "12.0.0-canary.068fd5028.0",
145+
"@material/typography": "12.0.0-canary.068fd5028.0",
146146
"@octokit/rest": "18.3.5",
147147
"@rollup/plugin-babel": "^5.3.0",
148148
"@rollup/plugin-commonjs": "^18.0.0",

‎packages.bzl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
44
ANGULAR_PACKAGE_VERSION = "^12.0.0 || ^13.0.0-0"
5-
MDC_PACKAGE_VERSION = "12.0.0-canary.08d791f37.0"
5+
MDC_PACKAGE_VERSION = "12.0.0-canary.068fd5028.0"
66
TSLIB_PACKAGE_VERSION = "^2.2.0"
77
RXJS_PACKAGE_VERSION = "^6.5.3"
88

‎scripts/check-mdc-tests-config.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,10 @@ export const config = {
175175
'should re-add margin if label is added asynchronously',
176176
'should properly update margin if label content is projected',
177177

178+
// The MDC implementation uses a `button` instead of an `input` which can't be required.
179+
'should forward the required attribute',
180+
'should prevent the form from submit when being required',
181+
178182
// TODO: the focus origin functionality has to be implemeted for the MDC slide toggle.
179183
'should not change focus origin if origin not specified'
180184
],

‎src/material-experimental/mdc-helpers/_focus-indicators.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@
6060
// which will clip a square focus indicator so we have to turn it into a circle.
6161
.mat-mdc-checkbox-ripple.mat-mdc-focus-indicator::before,
6262
.mat-radio-ripple.mat-mdc-focus-indicator::before,
63-
.mat-mdc-slider .mat-mdc-focus-indicator::before {
63+
.mat-mdc-slider .mat-mdc-focus-indicator::before,
64+
.mat-mdc-slide-toggle .mat-mdc-focus-indicator::before {
6465
border-radius: 50%;
6566
}
6667

‎src/material-experimental/mdc-slide-toggle/_slide-toggle-theme.scss

Lines changed: 80 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,139 @@
1-
@use '@material/theme/theme-color' as mdc-theme-color;
2-
@use '@material/switch/deprecated' as mdc-switch with ($deprecated-suffix: '');
3-
@use '@material/form-field' as mdc-form-field;
41
@use 'sass:map';
2+
@use 'sass:color';
3+
@use '@material/switch/switch-theme' as mdc-switch-theme;
4+
@use '@material/theme/color-palette' as mdc-color-palette;
5+
@use '@material/form-field' as mdc-form-field;
56
@use '../mdc-helpers/mdc-helpers';
67
@use '../../material/core/typography/typography';
78
@use '../../material/core/theming/theming';
9+
@use '../../material/core/theming/palette';
10+
11+
// Generates all color mapping for the properties that only change based on the theme.
12+
@function _get-theme-base-map($is-dark) {
13+
$on-surface: if($is-dark, mdc-color-palette.$grey-100, mdc-color-palette.$grey-800);
14+
$hairline: if($is-dark, mdc-color-palette.$grey-500, mdc-color-palette.$grey-300);
15+
$on-surface-variant: if($is-dark, mdc-color-palette.$grey-200, mdc-color-palette.$grey-700);
16+
$on-surface-state-content: if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900);
17+
$disabled-handle-color: mdc-color-palette.$grey-800;
18+
$selected-icon-color: mdc-color-palette.$grey-100;
19+
$icon-color: if($is-dark, mdc-color-palette.$grey-800, mdc-color-palette.$grey-100);
20+
21+
@return (
22+
disabled-selected-handle-color: $disabled-handle-color,
23+
disabled-unselected-handle-color: $disabled-handle-color,
24+
25+
disabled-selected-track-color: $on-surface,
26+
disabled-unselected-track-color: $on-surface,
27+
unselected-focus-state-layer-color: $on-surface,
28+
unselected-pressed-state-layer-color: $on-surface,
29+
unselected-hover-state-layer-color: $on-surface,
30+
31+
unselected-focus-track-color: $hairline,
32+
unselected-hover-track-color: $hairline,
33+
unselected-pressed-track-color: $hairline,
34+
unselected-track-color: $hairline,
35+
36+
unselected-focus-handle-color: $on-surface-state-content,
37+
unselected-hover-handle-color: $on-surface-state-content,
38+
unselected-pressed-handle-color: $on-surface-state-content,
39+
40+
handle-surface-color: surface,
41+
unselected-handle-color: $on-surface-variant,
42+
43+
selected-icon-color: $selected-icon-color,
44+
disabled-selected-icon-color: $icon-color,
45+
disabled-unselected-icon-color: $icon-color,
46+
unselected-icon-color: $icon-color,
47+
);
48+
}
849

50+
// Generates the mapping for the properties that change based on the slide toggle color.
51+
@function _get-theme-color-map($color) {
52+
$state-content: color.scale($color, $blackness: 50%);
53+
$inverse: color.scale($color, $lightness: 75%);
54+
55+
@return (
56+
selected-focus-state-layer-color: $color,
57+
selected-handle-color: $color,
58+
selected-hover-state-layer-color: $color,
59+
selected-pressed-state-layer-color: $color,
60+
61+
selected-focus-handle-color: $state-content,
62+
selected-hover-handle-color: $state-content,
63+
selected-pressed-handle-color: $state-content,
64+
65+
selected-focus-track-color: $inverse,
66+
selected-hover-track-color: $inverse,
67+
selected-pressed-track-color: $inverse,
68+
selected-track-color: $inverse,
69+
);
70+
}
971

1072
@mixin color($config-or-theme) {
1173
$config: theming.get-color-config($config-or-theme);
1274
$primary: theming.get-color-from-palette(map.get($config, primary));
1375
$accent: theming.get-color-from-palette(map.get($config, accent));
1476
$warn: theming.get-color-from-palette(map.get($config, warn));
15-
16-
// Save original values of MDC global variables. We need to save these so we can restore the
17-
// variables to their original values and prevent unintended side effects from using this mixin.
18-
$orig-baseline-theme-color: mdc-switch.$baseline-theme-color;
19-
$orig-toggled-off-thumb-color: mdc-switch.$toggled-off-thumb-color;
20-
$orig-toggled-off-track-color: mdc-switch.$toggled-off-track-color;
21-
$orig-disabled-thumb-color: mdc-switch.$disabled-thumb-color;
22-
$orig-disabled-track-color: mdc-switch.$disabled-track-color;
77+
$is-dark: map.get($config, is-dark);
2378

2479
@include mdc-helpers.mat-using-mdc-theme($config) {
25-
mdc-switch.$baseline-theme-color: primary;
26-
mdc-switch.$toggled-off-thumb-color: mdc-theme-color.prop-value(surface);
27-
mdc-switch.$toggled-off-track-color: mdc-theme-color.prop-value(on-surface);
28-
mdc-switch.$disabled-thumb-color: mdc-theme-color.prop-value(surface);
29-
mdc-switch.$disabled-track-color: mdc-theme-color.prop-value(on-surface);
30-
3180
// MDC's switch doesn't support a `color` property. We add support
3281
// for it by adding a CSS class for accent and warn style.
3382
.mat-mdc-slide-toggle {
3483
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
3584

36-
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
37-
background: mdc-switch.$toggled-off-ripple-color;
85+
// The `.mdc-switch` here is necessary in order for MDC's IE11 theming fallback to work.
86+
.mdc-switch {
87+
@include mdc-switch-theme.theme(_get-theme-base-map($is-dark));
3888
}
3989

40-
&.mat-primary {
41-
@include mdc-switch.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
90+
&.mat-primary .mdc-switch {
91+
@include mdc-switch-theme.theme(_get-theme-color-map($primary));
4292
}
4393

44-
&.mat-accent {
45-
mdc-switch.$baseline-theme-color: secondary;
46-
@include mdc-switch.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
94+
&.mat-accent .mdc-switch {
95+
@include mdc-switch-theme.theme(_get-theme-color-map($accent));
4796
}
4897

49-
&.mat-warn {
50-
mdc-switch.$baseline-theme-color: error;
51-
@include mdc-switch.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
98+
&.mat-warn .mdc-switch {
99+
@include mdc-switch-theme.theme(_get-theme-color-map($warn));
52100
}
53101
}
54102

55103
// The ripple color matches the palette only when it's checked.
56104
.mat-mdc-slide-toggle-checked {
57-
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
105+
.mdc-switch__ripple::after, .mat-ripple-element {
58106
background: $primary;
59107
}
60108

61109
&.mat-accent {
62-
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
110+
.mdc-switch__ripple::after, .mat-ripple-element {
63111
background: $accent;
64112
}
65113
}
66114

67115
&.mat-warn {
68-
.mdc-switch__thumb-underlay::after, .mat-ripple-element {
116+
.mdc-switch__ripple::after, .mat-ripple-element {
69117
background: $warn;
70118
}
71119
}
72120
}
73121
}
74-
75-
// Restore original values of MDC global variables.
76-
mdc-switch.$baseline-theme-color: $orig-baseline-theme-color;
77-
mdc-switch.$toggled-off-thumb-color: $orig-toggled-off-thumb-color;
78-
mdc-switch.$toggled-off-track-color: $orig-toggled-off-track-color;
79-
mdc-switch.$disabled-thumb-color: $orig-disabled-thumb-color;
80-
mdc-switch.$disabled-track-color: $orig-disabled-track-color;
81122
}
82123

83124
@mixin typography($config-or-theme) {
84125
$config: typography.private-typography-to-2018-config(
85126
theming.get-typography-config($config-or-theme));
86127
@include mdc-helpers.mat-using-mdc-typography($config) {
87-
@include mdc-switch.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
88128
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
89129
}
90130
}
91131

92-
@mixin density($config-or-theme) {
93-
$density-scale: theming.get-density-config($config-or-theme);
94-
.mat-mdc-slide-toggle .mdc-switch {
95-
@include mdc-switch.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
96-
}
97-
}
132+
@mixin density($config-or-theme) {}
98133

99134
@mixin theme($theme-or-color-config) {
100135
$theme: theming.private-legacy-get-theme($theme-or-color-config);
136+
101137
@include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-slide-toggle') {
102138
$color: theming.get-color-config($theme);
103139
$density: theming.get-density-config($theme);

0 commit comments

Comments
 (0)