Skip to content

Commit 2c793b4

Browse files
joyzhongjoyzhong
authored
feat(switch): Add density support for switch component. (material-components#5124)
Fixes material-components#5124 and material-components#5104: * Add mdc-switch-density, mdc-switch-ripple-size mixins * Rename $mdc-switch-tap-target-size => $mdc-switch-ripple-size, to be consistent with e.g. checkbox BREAKING CHANGE: Renames switch variables $mdc-switch-tap-target-size => $mdc-switch-ripple-size, removes $mdc-switch-tap-target-initial-position and $mdc-switch-native-control-width.
1 parent b6d213c commit 2c793b4

File tree

10 files changed

+177
-26
lines changed

10 files changed

+177
-26
lines changed

‎packages/mdc-chips/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,6 @@ CSS Class | Description
291291
`mdc-chip__checkmark` | Optional. Indicates the checkmark in a filter chip.
292292
`mdc-chip__checkmark-svg` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG element in a filter chip.
293293
`mdc-chip__checkmark-path` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG path in a filter chip.
294-
`mdc-chip-density($density-scale)` | Sets density scale for chip. Supported density scales are `-2`, `-1` and `0` (default).
295294

296295
> _NOTE_: Every element that has an `mdc-chip__icon` class must also have either the `mdc-chip__icon--leading` or `mdc-chip__icon--trailing` class.
297296
@@ -322,6 +321,7 @@ Mixin | Description
322321
`mdc-chip-leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip
323322
`mdc-chip-trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip
324323
`mdc-chip-elevation-transition()` | Adds a MDC elevation transition to the chip. This should be used instead of setting transition with `mdc-elevation-transition-value()` directly when a box shadow transition is desired for a chip
324+
`mdc-chip-density($density-scale)` | Sets density scale for chip. Supported density scales are `-2`, `-1` and `0` (default).
325325

326326
> _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.
327327

‎packages/mdc-chips/_mixins.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -640,7 +640,7 @@ $mdc-chip-ripple-target: ".mdc-chip__ripple";
640640
@include mdc-chip-height($height, $query: $query);
641641

642642
@if $density-scale != 0 {
643-
@include mdc-chip-touch-target-reset_;
643+
@include mdc-chip-touch-target-reset_($query: $query);
644644
}
645645
}
646646

‎packages/mdc-switch/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,8 @@ Mixin | Description
132132
`mdc-switch-toggled-off-thumb-color($color)` | Sets color of the thumb when the switch is toggled off.
133133
`mdc-switch-toggled-on-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled on.
134134
`mdc-switch-toggled-off-ripple-color($color)` | Sets the color of the ripple surrounding the thumb when the switch is toggled off.
135+
`mdc-switch-ripple-size($ripple-size)` | Sets the ripple size of the switch.
136+
`mdc-switch-density($density-scale)` | Sets density scale for switch. Supported density scales are `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, and `0` (default).
135137

136138
## `MDCSwitch` Properties and Methods
137139

‎packages/mdc-switch/_mixins.scss

+55-11
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,13 @@
2020
// THE SOFTWARE.
2121
//
2222

23-
@import "@material/theme/mixins";
24-
@import "@material/ripple/mixins";
25-
@import "@material/rtl/mixins";
23+
@import "@material/density/functions";
2624
@import "@material/elevation/mixins";
2725
@import "@material/feature-targeting/functions";
2826
@import "@material/feature-targeting/mixins";
27+
@import "@material/ripple/mixins";
28+
@import "@material/rtl/mixins";
29+
@import "@material/theme/mixins";
2930
@import "./functions";
3031
@import "./variables";
3132

@@ -46,6 +47,8 @@
4647
$feat-animation: mdc-feature-create-target($query, animation);
4748
$feat-structure: mdc-feature-create-target($query, structure);
4849

50+
@include mdc-switch-density($mdc-switch-density-scale, $query: $query);
51+
4952
.mdc-switch {
5053
@include mdc-feature-targets($feat-structure) {
5154
@include mdc-switch-base_;
@@ -192,6 +195,55 @@
192195
}
193196
}
194197

198+
///
199+
/// Sets density scale for switch.
200+
///
201+
/// @param {Number | String} $density-scale - Density scale value for component.
202+
/// Supported density scale values are `-6`, `-5`, `-4`, `-3`, `-2`, `-1`,
203+
/// `0` (default).
204+
///
205+
@mixin mdc-switch-density($density-scale, $query: mdc-feature-all()) {
206+
$size: mdc-density-prop-value(
207+
$density-config: $mdc-switch-density-config,
208+
$density-scale: $density-scale,
209+
$property-name: size,
210+
);
211+
212+
@include mdc-switch-ripple-size($size, $query: $query);
213+
}
214+
215+
@mixin mdc-switch-ripple-size($ripple-size, $query: mdc-feature-all()) {
216+
$feat-structure: mdc-feature-create-target($query, structure);
217+
218+
// Position for the tap target that contains the thumb to align the thumb
219+
// correctly offset from the track.
220+
$tap-target-initial-position:
221+
-$ripple-size / 2 + $mdc-switch-thumb-diameter / 2 - $mdc-switch-thumb-offset;
222+
// Value to cover the whole switch area (including the ripple) with the
223+
// native control.
224+
$native-control-width:
225+
$mdc-switch-track-width +
226+
($ripple-size - $mdc-switch-thumb-diameter) + $mdc-switch-thumb-offset * 2;
227+
228+
.mdc-switch__thumb-underlay {
229+
@include mdc-feature-targets($feat-structure) {
230+
@include mdc-rtl-reflexive-position(left, $tap-target-initial-position);
231+
232+
// Ensures the knob is centered on the track.
233+
top: -(($ripple-size - $mdc-switch-track-height) / 2);
234+
width: $ripple-size;
235+
height: $ripple-size;
236+
}
237+
}
238+
239+
.mdc-switch__native-control {
240+
@include mdc-feature-targets($feat-structure) {
241+
width: $native-control-width;
242+
height: $ripple-size;
243+
}
244+
}
245+
}
246+
195247
//
196248
// Private
197249
//
@@ -231,16 +283,10 @@
231283
$feat-structure: mdc-feature-create-target($query, structure);
232284

233285
@include mdc-feature-targets($feat-structure) {
234-
@include mdc-rtl-reflexive-position(left, $mdc-switch-tap-target-initial-position);
235-
236286
display: flex;
237287
position: absolute;
238-
// Ensures the knob is centered on the track.
239-
top: -(($mdc-switch-tap-target-size - $mdc-switch-track-height) / 2);
240288
align-items: center;
241289
justify-content: center;
242-
width: $mdc-switch-tap-target-size;
243-
height: $mdc-switch-tap-target-size;
244290
transform: translateX(0);
245291
}
246292

@@ -257,8 +303,6 @@
257303

258304
position: absolute;
259305
top: 0;
260-
width: $mdc-switch-native-control-width;
261-
height: $mdc-switch-tap-target-size;
262306
margin: 0;
263307
opacity: 0;
264308
cursor: pointer;

‎packages/mdc-switch/_variables.scss

+13-12
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,28 @@
2020
// THE SOFTWARE.
2121
//
2222

23+
@import "@material/density/variables";
2324
@import "@material/theme/variables";
2425

2526
$mdc-switch-track-width: 32px !default;
2627
$mdc-switch-track-height: 14px !default;
2728
$mdc-switch-thumb-diameter: 20px !default;
28-
$mdc-switch-tap-target-size: 48px !default;
29+
$mdc-switch-ripple-size: 48px !default;
30+
31+
$mdc-switch-minimum-size: 24px !default;
32+
$mdc-switch-maximum-size: $mdc-switch-ripple-size !default;
33+
$mdc-switch-density-scale: $mdc-density-default-scale !default;
34+
$mdc-switch-density-config: (
35+
size: (
36+
minimum: $mdc-switch-minimum-size,
37+
default: $mdc-switch-maximum-size,
38+
maximum: $mdc-switch-maximum-size,
39+
),
40+
) !default;
2941

3042
// Amount the edge of the thumb should be offset from the edge of the track.
3143
$mdc-switch-thumb-offset: 4px !default;
3244

33-
// Position for the tap target that contains the thumb to align the thumb correctly offset from the track.
34-
$mdc-switch-tap-target-initial-position:
35-
-$mdc-switch-tap-target-size / 2 + $mdc-switch-thumb-diameter / 2 -
36-
$mdc-switch-thumb-offset !default;
37-
38-
// Value to cover the whole switch area (including the ripple) with the native control.
39-
$mdc-switch-native-control-width:
40-
$mdc-switch-track-width +
41-
($mdc-switch-tap-target-size - $mdc-switch-thumb-diameter) +
42-
$mdc-switch-thumb-offset * 2 !default;
43-
4445
$mdc-switch-thumb-active-margin:
4546
$mdc-switch-track-width - $mdc-switch-thumb-diameter + $mdc-switch-thumb-offset * 2 !default;
4647

‎test/screenshot/golden.json

+8
Original file line numberDiff line numberDiff line change
@@ -1311,6 +1311,14 @@
13111311
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/03/21_25_57_424/spec/mdc-switch/classes/baseline.html.windows_ie_11.png"
13121312
}
13131313
},
1314+
"spec/mdc-switch/mixins/density.html": {
1315+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/24/18_29_48_641/spec/mdc-switch/mixins/density.html?utm_source=golden_json",
1316+
"screenshots": {
1317+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/24/18_29_48_641/spec/mdc-switch/mixins/density.html.windows_chrome_76.png",
1318+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/24/18_29_48_641/spec/mdc-switch/mixins/density.html.windows_firefox_69.png",
1319+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/24/18_29_48_641/spec/mdc-switch/mixins/density.html.windows_ie_11.png"
1320+
}
1321+
},
13141322
"spec/mdc-switch/mixins/thumb-color.html": {
13151323
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/10/17_42_51_602/spec/mdc-switch/mixins/thumb-color.html?utm_source=golden_json",
13161324
"screenshots": {

‎test/screenshot/spec/mdc-switch/fixture.js

+4
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
window.mdc.testFixture.fontsLoaded.then(() => {
2525
[].forEach.call(document.querySelectorAll('.mdc-switch'), (el) => {
2626
mdc.switchControl.MDCSwitch.attachTo(el);
27+
const autoFocusEl = el.querySelector('input[data-autofocus]');
28+
if (autoFocusEl) {
29+
autoFocusEl.focus();
30+
}
2731
});
2832

2933
window.mdc.testFixture.notifyDomReady();

‎test/screenshot/spec/mdc-switch/fixture.scss

+8
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,11 @@ $custom-switch-color: $material-color-red-500;
6060
@include mdc-switch-toggled-on-track-color($custom-switch-color);
6161
@include mdc-switch-toggled-off-track-color($custom-switch-color);
6262
}
63+
64+
.custom-switch--density-5 {
65+
@include mdc-switch-density(-5);
66+
}
67+
68+
.custom-switch--density-2 {
69+
@include mdc-switch-density(-2);
70+
}

‎test/screenshot/spec/mdc-switch/mixins/density.html

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2018 Google Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.
22+
-->
23+
<html lang="en">
24+
<head>
25+
<meta charset="utf-8">
26+
<title>Density Switch Mixin - MDC Web Screenshot Test</title>
27+
<meta name="viewport" content="width=device-width, initial-scale=1">
28+
<link rel="stylesheet" href="../../../out/mdc.switch.css">
29+
<link rel="stylesheet" href="../../../out/spec/fixture.css">
30+
<link rel="stylesheet" href="../../../out/spec/mdc-switch/fixture.css">
31+
32+
<!-- Global site tag (gtag.js) - Google Analytics -->
33+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
34+
<script>
35+
window.dataLayer = window.dataLayer || [];
36+
function gtag(){dataLayer.push(arguments);}
37+
gtag('js', new Date());
38+
gtag('config', 'UA-118996389-2');
39+
</script>
40+
</head>
41+
42+
<body class="test-container">
43+
<main class="test-viewport test-viewport--mobile">
44+
<div class="test-layout">
45+
46+
<div class="test-cell test-cell--switch">
47+
<div class="mdc-switch custom-switch--density-5">
48+
<div class="mdc-switch__track"></div>
49+
<div class="mdc-switch__thumb-underlay">
50+
<div class="mdc-switch__thumb">
51+
<input type="checkbox" id="basic-switch-1" class="mdc-switch__native-control" role="switch"
52+
data-autofocus>
53+
</div>
54+
</div>
55+
</div>
56+
<label class="test-switch-label" for="basic-switch-1">Density -5</label>
57+
</div>
58+
59+
<div class="test-cell test-cell--switch">
60+
<div class="mdc-switch custom-switch--density-2">
61+
<div class="mdc-switch__track"></div>
62+
<div class="mdc-switch__thumb-underlay">
63+
<div class="mdc-switch__thumb">
64+
<input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch">
65+
</div>
66+
</div>
67+
</div>
68+
<label class="test-switch-label" for="basic-switch-2">Density -2</label>
69+
</div>
70+
71+
</div>
72+
</main>
73+
74+
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
75+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
76+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
77+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
78+
<script src="../../../out/material-components-web.js"></script>
79+
<script src="../../../out/spec/fixture.js"></script>
80+
<script src="../../../out/spec/mdc-switch/fixture.js"></script>
81+
</body>
82+
</html>

‎test/scss/_feature-targeting-test.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
// Chips
7070
@include mdc-chip-core-styles($query: $query);
7171
@include mdc-chip-elevation-transition($query: $query);
72-
@include mdc-chip-density(0, $query: $query);
72+
@include mdc-chip-density(-1, $query: $query);
7373
@include mdc-chip-fill-color(red, $query: $query);
7474
@include mdc-chip-fill-color-accessible(red, $query: $query);
7575
@include mdc-chip-height(0, $query: $query);
@@ -271,6 +271,7 @@
271271

272272
// Switch
273273
@include mdc-switch-core-styles($query: $query);
274+
@include mdc-switch-density(-1, $query: $query);
274275
@include mdc-switch-toggled-on-color(on-surface, $query: $query);
275276
@include mdc-switch-toggled-off-color(on-surface, $query: $query);
276277
@include mdc-switch-toggled-on-ripple-color(on-surface, $query: $query);
@@ -280,6 +281,7 @@
280281
@include mdc-switch-toggled-off-track-color(on-surface, $query: $query);
281282
@include mdc-switch-toggled-off-thumb-color(on-surface, $query: $query);
282283
@include mdc-switch-ripple($query: $query);
284+
@include mdc-switch-ripple-size(0, $query: $query);
283285
@include mdc-switch-without-ripple($query: $query);
284286

285287
// Tabs

0 commit comments

Comments
 (0)