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

Commit ff2873e

Browse files
abhiomkarabhiomkar
committed
feat(checkbox): Added mixin to customize checkbox touch dimension. (#4697)
BREAKING CHANGE: Removed `$mdc-checkbox-ui-pct` sass variable from `MDCCheckbox`
1 parent 5de76bc commit ff2873e

File tree

9 files changed

+223
-28
lines changed

9 files changed

+223
-28
lines changed

‎packages/mdc-checkbox/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ Mixin | Description
122122
`mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)` | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox
123123
`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons
124124
`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator
125+
`mdc-checkbox-touch-dimension($touch-dimension)` | Sets the touch dimension of the checkbox.
125126

126127
The ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins.
127128

‎packages/mdc-checkbox/_mixins.scss

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@
186186
@include mdc-ripple-surface($query);
187187
@include mdc-states($mdc-checkbox-baseline-theme-color, $query: $query);
188188
@include mdc-ripple-radius-unbounded($query: $query);
189+
@include mdc-checkbox-touch-dimension($mdc-checkbox-touch-area, $query: $query);
189190
}
190191

191192
.mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before {
@@ -195,6 +196,32 @@
195196
}
196197
}
197198

199+
@mixin mdc-checkbox-touch-dimension($touch-dimension, $query: mdc-feature-all()) {
200+
$feat-structure: mdc-feature-create-target($query, structure);
201+
$checkbox-padding: ($touch-dimension - $mdc-checkbox-size) / 2;
202+
203+
@include mdc-feature-targets($feat-structure) {
204+
padding: $checkbox-padding;
205+
}
206+
207+
.mdc-checkbox__background {
208+
@include mdc-feature-targets($feat-structure) {
209+
@include mdc-rtl-reflexive-position(left, $checkbox-padding, ".mdc-checkbox");
210+
211+
top: $checkbox-padding;
212+
}
213+
}
214+
215+
.mdc-checkbox__background::before {
216+
@include mdc-feature-targets($feat-structure) {
217+
top: -$mdc-checkbox-border-width - $checkbox-padding;
218+
left: -$mdc-checkbox-border-width - $checkbox-padding;
219+
width: $touch-dimension;
220+
height: $touch-dimension;
221+
}
222+
}
223+
}
224+
198225
@mixin mdc-checkbox-container-colors(
199226
$unmarked-stroke-color: $mdc-checkbox-border-color,
200227
$unmarked-fill-color: transparent,
@@ -298,7 +325,6 @@
298325
box-sizing: content-box;
299326
width: $mdc-checkbox-size;
300327
height: $mdc-checkbox-size;
301-
padding: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
302328
line-height: 0;
303329
white-space: nowrap;
304330
cursor: pointer;
@@ -321,14 +347,6 @@
321347
pointer-events: none;
322348
}
323349

324-
@mixin mdc-checkbox__child--cover-parent_ {
325-
position: absolute;
326-
top: 0;
327-
right: 0;
328-
bottom: 0;
329-
left: 0;
330-
}
331-
332350
@mixin mdc-checkbox__child--upgraded_ {
333351
// Due to the myriad of selector combos used to properly style a CSS-only checkbox, all of
334352
// which have varying selector precedence and make use of transitions, it is cleaner and more
@@ -455,17 +473,13 @@
455473
$feat-structure: mdc-feature-create-target($query, structure);
456474

457475
@include mdc-feature-targets($feat-structure) {
458-
@include mdc-rtl-reflexive-position(left, ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2, ".mdc-checkbox");
459-
460476
display: inline-flex;
461477
position: absolute;
462-
top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2;
463-
bottom: 0;
464478
align-items: center;
465479
justify-content: center;
466480
box-sizing: border-box;
467-
width: $mdc-checkbox-ui-pct;
468-
height: $mdc-checkbox-ui-pct;
481+
width: $mdc-checkbox-size;
482+
height: $mdc-checkbox-size;
469483
// border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin
470484
border: $mdc-checkbox-border-width solid currentColor;
471485
border-radius: 2px;
@@ -494,10 +508,7 @@
494508
$feat-structure: mdc-feature-create-target($query, structure);
495509

496510
@include mdc-feature-targets($feat-structure) {
497-
@include mdc-checkbox__child--cover-parent_;
498-
499-
width: 100%;
500-
height: 100%;
511+
position: absolute;
501512
transform: scale(0, 0);
502513
border-radius: 50%;
503514
opacity: 0;
@@ -518,7 +529,7 @@
518529
$feat-structure: mdc-feature-create-target($query, structure);
519530

520531
@include mdc-feature-targets($feat-structure) {
521-
transform: scale(2.75, 2.75);
532+
transform: scale(1);
522533
opacity: $mdc-checkbox-focus-indicator-opacity;
523534
}
524535

@@ -550,8 +561,11 @@
550561
$feat-structure: mdc-feature-create-target($query, structure);
551562

552563
@include mdc-feature-targets($feat-structure) {
553-
@include mdc-checkbox__child--cover-parent_;
554-
564+
position: absolute;
565+
top: 0;
566+
right: 0;
567+
bottom: 0;
568+
left: 0;
555569
width: 100%;
556570
opacity: 0;
557571
}

‎packages/mdc-checkbox/_variables.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ $mdc-checkbox-baseline-theme-color: secondary !default;
3030

3131
$mdc-checkbox-touch-area: 40px !default;
3232
$mdc-checkbox-size: 18px !default;
33-
$mdc-checkbox-ui-pct: percentage($mdc-checkbox-size / $mdc-checkbox-touch-area) !default;
3433
$mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size !default;
3534
$mdc-checkbox-border-width: 2px !default;
3635
$mdc-checkbox-transition-duration: 90ms !default;

‎test/screenshot/golden.json

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -184,11 +184,11 @@
184184
}
185185
},
186186
"spec/mdc-checkbox/classes/baseline.html": {
187-
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/15_16_09_688/spec/mdc-checkbox/classes/baseline.html?utm_source=golden_json",
187+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/20_30_12_828/spec/mdc-checkbox/classes/baseline.html?utm_source=golden_json",
188188
"screenshots": {
189-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/15_16_09_688/spec/mdc-checkbox/classes/baseline.html.windows_chrome_74.png",
190-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/mattgoo/2018/07/18/19_29_49_289/spec/mdc-checkbox/classes/baseline.html.windows_firefox_61.png",
191-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/mattgoo/2018/07/18/19_29_49_289/spec/mdc-checkbox/classes/baseline.html.windows_ie_11.png"
189+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/16_09_10_398/spec/mdc-checkbox/classes/baseline.html.windows_chrome_74.png",
190+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/20_30_12_828/spec/mdc-checkbox/classes/baseline.html.windows_firefox_65.png",
191+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/16_09_10_398/spec/mdc-checkbox/classes/baseline.html.windows_ie_11.png"
192192
}
193193
},
194194
"spec/mdc-checkbox/mixins/container-colors.html": {
@@ -199,6 +199,14 @@
199199
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/31/03_19_25_902/spec/mdc-checkbox/mixins/container-colors.html.windows_ie_11.png"
200200
}
201201
},
202+
"spec/mdc-checkbox/mixins/touch-dimension.html": {
203+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/16_09_10_398/spec/mdc-checkbox/mixins/touch-dimension.html?utm_source=golden_json",
204+
"screenshots": {
205+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/13/19_16_33_458/spec/mdc-checkbox/mixins/touch-dimension.html.windows_chrome_74.png",
206+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/13/19_16_33_458/spec/mdc-checkbox/mixins/touch-dimension.html.windows_firefox_65.png",
207+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/15/16_09_10_398/spec/mdc-checkbox/mixins/touch-dimension.html.windows_ie_11.png"
208+
}
209+
},
202210
"spec/mdc-chips/classes/action.html": {
203211
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-chips/classes/action.html?utm_source=golden_json",
204212
"screenshots": {

‎test/screenshot/spec/mdc-checkbox/classes/baseline.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
<input type="checkbox"
6565
checked
6666
class="mdc-checkbox__native-control"
67-
id="checkbox-checked"/>
67+
id="checkbox-checked" autofocus />
6868
<div class="mdc-checkbox__background">
6969
<svg class="mdc-checkbox__checkmark"
7070
viewBox="0 0 24 24">

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,8 @@
2424
document.getElementById('checkbox-indeterminate').indeterminate = true;
2525
document.getElementById('checkbox-indeterminate-disabled').indeterminate = true;
2626

27+
[].slice.call(document.querySelectorAll('.mdc-checkbox')).forEach((el) => {
28+
mdc.checkbox.MDCCheckbox.attachTo(el);
29+
});
30+
2731
window.mdc.testFixture.notifyDomReady();

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,7 @@ $custom-checkbox-color: $material-color-red-300;
4141
.custom-checkbox--ink-color {
4242
@include mdc-checkbox-ink-color($custom-checkbox-color);
4343
}
44+
45+
.test-checkbox-touch-dimension {
46+
@include mdc-checkbox-touch-dimension(48px);
47+
}

‎test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2019 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>Checkbox Touch Dimension Mixin - MDC Web Screenshot Test</title>
27+
<meta name="viewport" content="width=device-width, initial-scale=1">
28+
<link rel="stylesheet" href="../../../out/mdc.checkbox.css">
29+
<link rel="stylesheet" href="../../../out/spec/fixture.css">
30+
<link rel="stylesheet" href="../../../out/spec/mdc-checkbox/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+
<div class="test-cell test-cell--checkbox">
46+
<div class="mdc-checkbox test-checkbox-touch-dimension">
47+
<input type="checkbox"
48+
class="mdc-checkbox__native-control"
49+
id="checkbox-unchecked"/>
50+
<div class="mdc-checkbox__background">
51+
<svg class="mdc-checkbox__checkmark"
52+
viewBox="0 0 24 24">
53+
<path class="mdc-checkbox__checkmark-path"
54+
fill="none"
55+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
56+
</svg>
57+
<div class="mdc-checkbox__mixedmark"></div>
58+
</div>
59+
</div>
60+
</div>
61+
62+
<div class="test-cell test-cell--checkbox">
63+
<div class="mdc-checkbox test-checkbox-touch-dimension">
64+
<input type="checkbox"
65+
checked
66+
class="mdc-checkbox__native-control"
67+
autofocus
68+
id="checkbox-checked"/>
69+
<div class="mdc-checkbox__background">
70+
<svg class="mdc-checkbox__checkmark"
71+
viewBox="0 0 24 24">
72+
<path class="mdc-checkbox__checkmark-path"
73+
fill="none"
74+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
75+
</svg>
76+
<div class="mdc-checkbox__mixedmark"></div>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<div class="test-cell test-cell--checkbox">
82+
<div class="mdc-checkbox test-checkbox-touch-dimension">
83+
<input type="checkbox"
84+
checked
85+
class="mdc-checkbox__native-control"
86+
id="checkbox-indeterminate"/>
87+
<div class="mdc-checkbox__background">
88+
<svg class="mdc-checkbox__checkmark"
89+
viewBox="0 0 24 24">
90+
<path class="mdc-checkbox__checkmark-path"
91+
fill="none"
92+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
93+
</svg>
94+
<div class="mdc-checkbox__mixedmark"></div>
95+
</div>
96+
</div>
97+
</div>
98+
99+
<div class="test-cell test-cell--checkbox">
100+
<div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-touch-dimension">
101+
<input type="checkbox"
102+
disabled
103+
class="mdc-checkbox__native-control"
104+
id="checkbox-unchecked-disabled"/>
105+
<div class="mdc-checkbox__background">
106+
<svg class="mdc-checkbox__checkmark"
107+
viewBox="0 0 24 24">
108+
<path class="mdc-checkbox__checkmark-path"
109+
fill="none"
110+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
111+
</svg>
112+
<div class="mdc-checkbox__mixedmark"></div>
113+
</div>
114+
</div>
115+
</div>
116+
117+
<div class="test-cell test-cell--checkbox">
118+
<div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-touch-dimension">
119+
<input type="checkbox"
120+
disabled
121+
checked
122+
class="mdc-checkbox__native-control"
123+
id="checkbox-checked-disabled"/>
124+
<div class="mdc-checkbox__background">
125+
<svg class="mdc-checkbox__checkmark"
126+
viewBox="0 0 24 24">
127+
<path class="mdc-checkbox__checkmark-path"
128+
fill="none"
129+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
130+
</svg>
131+
<div class="mdc-checkbox__mixedmark"></div>
132+
</div>
133+
</div>
134+
</div>
135+
136+
<div class="test-cell test-cell--checkbox">
137+
<div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-touch-dimension">
138+
<input type="checkbox"
139+
disabled
140+
class="mdc-checkbox__native-control"
141+
id="checkbox-indeterminate-disabled"/>
142+
<div class="mdc-checkbox__background">
143+
<svg class="mdc-checkbox__checkmark"
144+
viewBox="0 0 24 24">
145+
<path class="mdc-checkbox__checkmark-path"
146+
fill="none"
147+
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
148+
</svg>
149+
<div class="mdc-checkbox__mixedmark"></div>
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
</main>
155+
156+
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
157+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
158+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
159+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
160+
<script src="../../../out/material-components-web.js"></script>
161+
<script src="../../../out/spec/fixture.js"></script>
162+
<script src="../../../out/spec/mdc-checkbox/fixture.js"></script>
163+
</body>
164+
</html>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
@include mdc-checkbox-focus-indicator-color(red, $query: $query);
5151
@include mdc-checkbox-ripple($query: $query);
5252
@include mdc-checkbox-without-ripple($query: $query);
53+
@include mdc-checkbox-touch-dimension(40px, $query: $query);
5354

5455
// Chips
5556
@include mdc-chip-core-styles($query: $query);

0 commit comments

Comments
 (0)