Skip to content

Commit 0405b0e

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 0405b0e

17 files changed

+924
-928
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);

‎src/material-experimental/mdc-slide-toggle/slide-toggle.html

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,50 @@
11
<div class="mdc-form-field"
22
[class.mdc-form-field--align-end]="labelPosition == 'before'">
3-
<div class="mdc-switch mat-mdc-switch" #switch>
3+
<button
4+
class="mdc-switch"
5+
role="switch"
6+
type="button"
7+
[class.mdc-switch--selected]="checked"
8+
[class.mdc-switch--unselected]="!checked"
9+
[tabIndex]="tabIndex"
10+
[disabled]="disabled"
11+
[attr.id]="buttonId"
12+
[attr.name]="name"
13+
[attr.aria-label]="ariaLabel"
14+
[attr.aria-labelledby]="_getAriaLabelledBy()"
15+
[attr.aria-describedby]="ariaDescribedby"
16+
(click)="_handleClick($event)"
17+
#switch>
418
<div class="mdc-switch__track"></div>
5-
<div class="mdc-switch__thumb-underlay mat-mdc-focus-indicator">
6-
<div class="mat-mdc-slide-toggle-ripple" mat-ripple
7-
[matRippleTrigger]="switch"
8-
[matRippleDisabled]="disableRipple || disabled"
9-
[matRippleCentered]="true"
10-
[matRippleAnimation]="_rippleAnimation"></div>
11-
<div class="mdc-switch__thumb">
12-
<input #input class="mdc-switch__native-control" type="checkbox"
13-
role="switch"
14-
[id]="inputId"
15-
[required]="required"
16-
[tabIndex]="tabIndex"
17-
[checked]="checked"
18-
[disabled]="disabled"
19-
[attr.name]="name"
20-
[attr.aria-checked]="checked.toString()"
21-
[attr.aria-label]="ariaLabel"
22-
[attr.aria-labelledby]="ariaLabelledby"
23-
[attr.aria-describedby]="ariaDescribedby"
24-
(change)="_onChangeEvent($event)"
25-
(click)="_onInputClick($event)">
19+
<div class="mdc-switch__handle-track">
20+
<div class="mdc-switch__handle">
21+
<div class="mdc-switch__shadow">
22+
<div class="mdc-elevation-overlay"></div>
23+
</div>
24+
<div class="mdc-switch__ripple">
25+
<div class="mat-mdc-slide-toggle-ripple mat-mdc-focus-indicator" mat-ripple
26+
[matRippleTrigger]="switch"
27+
[matRippleDisabled]="disableRipple || disabled"
28+
[matRippleCentered]="true"
29+
[matRippleAnimation]="_rippleAnimation"></div>
30+
</div>
31+
<div class="mdc-switch__icons">
32+
<svg class="mdc-switch__icon mdc-switch__icon--on" viewBox="0 0 24 24">
33+
<path d="M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" />
34+
</svg>
35+
<svg class="mdc-switch__icon mdc-switch__icon--off" viewBox="0 0 24 24">
36+
<path d="M20 13H4v-2h16v2z" />
37+
</svg>
38+
</div>
2639
</div>
2740
</div>
28-
</div>
41+
</button>
2942

30-
<label [for]="inputId">
43+
<!--
44+
Clicking on the label will trigger another click event from the button.
45+
Stop propagation here so other listeners further up in the DOM don't execute twice.
46+
-->
47+
<label [for]="buttonId" [attr.id]="_labelId" (click)="$event.stopPropagation()">
3148
<ng-content></ng-content>
3249
</label>
3350
</div>

0 commit comments

Comments
 (0)