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

Commit 2161c02

Browse files
abhiomkarabhiomkar
authored
fix(checkbox): Fix checkbox terminology in sass mixins (#5014)
1 parent 85b33b5 commit 2161c02

7 files changed

Lines changed: 29 additions & 29 deletions

File tree

‎packages/mdc-checkbox/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ Mixin | Description
124124
`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
125125
`mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons
126126
`mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state.
127-
`mdc-checkbox-touch-dimension($touch-dimension)` | Sets the touch dimension of the checkbox.
127+
`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size of the checkbox.
128128

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

‎packages/mdc-checkbox/_mixins.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
189189
@include mdc-ripple-surface($query: $query, $ripple-target: $mdc-checkbox-ripple-target);
190190
@include mdc-states($color: on-surface, $query: $query, $ripple-target: $mdc-checkbox-ripple-target);
191191
@include mdc-ripple-radius-unbounded($query: $query, $ripple-target: $mdc-checkbox-ripple-target);
192-
@include mdc-checkbox-touch-dimension($mdc-checkbox-touch-area, $query: $query);
192+
@include mdc-checkbox-ripple-size($mdc-checkbox-ripple-size, $query: $query);
193193
}
194194

195195
#{$mdc-checkbox-ripple-target} {
@@ -203,9 +203,9 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
203203
}
204204
}
205205

206-
@mixin mdc-checkbox-touch-dimension($touch-dimension, $query: mdc-feature-all()) {
206+
@mixin mdc-checkbox-ripple-size($ripple-size, $query: mdc-feature-all()) {
207207
$feat-structure: mdc-feature-create-target($query, structure);
208-
$checkbox-padding: ($touch-dimension - $mdc-checkbox-size) / 2;
208+
$checkbox-padding: ($ripple-size - $mdc-checkbox-icon-size) / 2;
209209

210210
@include mdc-feature-targets($feat-structure) {
211211
padding: $checkbox-padding;
@@ -223,8 +223,8 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
223223
@include mdc-feature-targets($feat-structure) {
224224
top: -$mdc-checkbox-border-width - $checkbox-padding;
225225
left: -$mdc-checkbox-border-width - $checkbox-padding;
226-
width: $touch-dimension;
227-
height: $touch-dimension;
226+
width: $ripple-size;
227+
height: $ripple-size;
228228
}
229229
}
230230
}
@@ -336,10 +336,10 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
336336
@mixin mdc-checkbox-base_ {
337337
display: inline-block;
338338
position: relative;
339-
flex: 0 0 $mdc-checkbox-size;
339+
flex: 0 0 $mdc-checkbox-icon-size;
340340
box-sizing: content-box;
341-
width: $mdc-checkbox-size;
342-
height: $mdc-checkbox-size;
341+
width: $mdc-checkbox-icon-size;
342+
height: $mdc-checkbox-icon-size;
343343
line-height: 0;
344344
white-space: nowrap;
345345
cursor: pointer;
@@ -494,8 +494,8 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple";
494494
align-items: center;
495495
justify-content: center;
496496
box-sizing: border-box;
497-
width: $mdc-checkbox-size;
498-
height: $mdc-checkbox-size;
497+
width: $mdc-checkbox-icon-size;
498+
height: $mdc-checkbox-icon-size;
499499
// border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin
500500
border: $mdc-checkbox-border-width solid currentColor;
501501
border-radius: 2px;

‎packages/mdc-checkbox/_variables.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,9 @@ $mdc-checkbox-border-color: rgba(mdc-theme-prop-value(on-surface), .54) !default
2828
$mdc-checkbox-disabled-color: rgba(mdc-theme-prop-value(on-surface), .26) !default;
2929
$mdc-checkbox-baseline-theme-color: secondary !default;
3030

31-
$mdc-checkbox-touch-area: 40px !default;
32-
$mdc-checkbox-size: 18px !default;
33-
$mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size !default;
31+
$mdc-checkbox-ripple-size: 40px !default;
32+
$mdc-checkbox-icon-size: 18px !default;
33+
$mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-icon-size !default;
3434
$mdc-checkbox-border-width: 2px !default;
3535
$mdc-checkbox-transition-duration: 90ms !default;
3636
$mdc-checkbox-item-spacing: 4px !default;

‎test/screenshot/golden.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -199,12 +199,12 @@
199199
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/08/19_30_20_273/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/07/09/00_10_30_654/spec/mdc-checkbox/mixins/touch-dimension.html?utm_source=golden_json",
202+
"spec/mdc-checkbox/mixins/ripple-size.html": {
203+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/21/14_59_28_084/spec/mdc-checkbox/mixins/ripple-size.html?utm_source=golden_json",
204204
"screenshots": {
205-
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/08/23_48_09_872/spec/mdc-checkbox/mixins/touch-dimension.html.windows_chrome_75.png",
206-
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/09/00_10_30_654/spec/mdc-checkbox/mixins/touch-dimension.html.windows_firefox_67.png",
207-
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/02/22_30_01_092/spec/mdc-checkbox/mixins/touch-dimension.html.windows_ie_11.png"
205+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/21/14_59_28_084/spec/mdc-checkbox/mixins/ripple-size.html.windows_chrome_76.png",
206+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/21/14_59_28_084/spec/mdc-checkbox/mixins/ripple-size.html.windows_firefox_67.png",
207+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/08/21/14_59_28_084/spec/mdc-checkbox/mixins/ripple-size.html.windows_ie_11.png"
208208
}
209209
},
210210
"spec/mdc-chips/classes/action.html": {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,6 @@ $custom-checkbox-color: crimson;
4141
@include mdc-checkbox-ink-color($custom-checkbox-color);
4242
}
4343

44-
.test-checkbox-touch-dimension {
45-
@include mdc-checkbox-touch-dimension(48px);
44+
.test-checkbox-ripple-size {
45+
@include mdc-checkbox-ripple-size(48px);
4646
}

test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html renamed to test/screenshot/spec/mdc-checkbox/mixins/ripple-size.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<html lang="en">
2424
<head>
2525
<meta charset="utf-8">
26-
<title>Checkbox Touch Dimension Mixin - MDC Web Screenshot Test</title>
26+
<title>Checkbox Ripple Size Mixin - MDC Web Screenshot Test</title>
2727
<meta name="viewport" content="width=device-width, initial-scale=1">
2828
<link rel="stylesheet" href="../../../out/mdc.checkbox.css">
2929
<link rel="stylesheet" href="../../../out/spec/fixture.css">
@@ -43,7 +43,7 @@
4343
<main class="test-viewport test-viewport--mobile">
4444
<div class="test-layout">
4545
<div class="test-cell test-cell--checkbox">
46-
<div class="mdc-checkbox test-checkbox-touch-dimension">
46+
<div class="mdc-checkbox test-checkbox-ripple-size">
4747
<input type="checkbox"
4848
class="mdc-checkbox__native-control"
4949
id="checkbox-unchecked"
@@ -62,7 +62,7 @@
6262
</div>
6363

6464
<div class="test-cell test-cell--checkbox">
65-
<div class="mdc-checkbox test-checkbox-touch-dimension">
65+
<div class="mdc-checkbox test-checkbox-ripple-size">
6666
<input type="checkbox"
6767
checked
6868
class="mdc-checkbox__native-control"
@@ -81,7 +81,7 @@
8181
</div>
8282

8383
<div class="test-cell test-cell--checkbox">
84-
<div class="mdc-checkbox test-checkbox-touch-dimension">
84+
<div class="mdc-checkbox test-checkbox-ripple-size">
8585
<input type="checkbox"
8686
checked
8787
class="mdc-checkbox__native-control"
@@ -100,7 +100,7 @@
100100
</div>
101101

102102
<div class="test-cell test-cell--checkbox">
103-
<div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-touch-dimension">
103+
<div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-ripple-size">
104104
<input type="checkbox"
105105
disabled
106106
class="mdc-checkbox__native-control"
@@ -119,7 +119,7 @@
119119
</div>
120120

121121
<div class="test-cell test-cell--checkbox">
122-
<div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-touch-dimension">
122+
<div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-ripple-size">
123123
<input type="checkbox"
124124
disabled
125125
checked
@@ -139,7 +139,7 @@
139139
</div>
140140

141141
<div class="test-cell test-cell--checkbox">
142-
<div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-touch-dimension">
142+
<div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-ripple-size">
143143
<input type="checkbox"
144144
disabled
145145
class="mdc-checkbox__native-control"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
@include mdc-checkbox-focus-indicator-color(red, $query: $query);
5959
@include mdc-checkbox-ripple($query: $query);
6060
@include mdc-checkbox-without-ripple($query: $query);
61-
@include mdc-checkbox-touch-dimension(40px, $query: $query);
61+
@include mdc-checkbox-ripple-size(40px, $query: $query);
6262

6363
// Chips
6464
@include mdc-chip-core-styles($query: $query);

0 commit comments

Comments
 (0)