From 42e41d872a6ee48e1ab9a4907b6f277aafe0f2a2 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Wed, 15 May 2019 17:14:45 -0400 Subject: [PATCH] feat(checkbox): Added mixin to customize checkbox touch dimension. (#4697) BREAKING CHANGE: Removed `$mdc-checkbox-ui-pct` sass variable from `MDCCheckbox` --- packages/mdc-checkbox/README.md | 1 + packages/mdc-checkbox/_mixins.scss | 58 ++++--- packages/mdc-checkbox/_variables.scss | 1 - test/screenshot/golden.json | 16 +- .../spec/mdc-checkbox/classes/baseline.html | 2 +- test/screenshot/spec/mdc-checkbox/fixture.js | 4 + .../screenshot/spec/mdc-checkbox/fixture.scss | 4 + .../mdc-checkbox/mixins/touch-dimension.html | 164 ++++++++++++++++++ test/scss/_feature-targeting-test.scss | 1 + 9 files changed, 223 insertions(+), 28 deletions(-) create mode 100644 test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md index bf68e1f74f3..c517263c267 100644 --- a/packages/mdc-checkbox/README.md +++ b/packages/mdc-checkbox/README.md @@ -122,6 +122,7 @@ Mixin | Description `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 `mdc-checkbox-ink-color($color)` | Sets the ink color of the checked and indeterminate icons `mdc-checkbox-focus-indicator-color($color)` | Sets the color of the focus indicator +`mdc-checkbox-touch-dimension($touch-dimension)` | Sets the touch dimension of the checkbox. The ripple effect for the Checkbox component is styled using [MDC Ripple](../mdc-ripple) mixins. diff --git a/packages/mdc-checkbox/_mixins.scss b/packages/mdc-checkbox/_mixins.scss index bd034d79e74..d2410cd34f3 100644 --- a/packages/mdc-checkbox/_mixins.scss +++ b/packages/mdc-checkbox/_mixins.scss @@ -186,6 +186,7 @@ @include mdc-ripple-surface($query); @include mdc-states($mdc-checkbox-baseline-theme-color, $query: $query); @include mdc-ripple-radius-unbounded($query: $query); + @include mdc-checkbox-touch-dimension($mdc-checkbox-touch-area, $query: $query); } .mdc-ripple-upgraded--background-focused .mdc-checkbox__background::before { @@ -195,6 +196,32 @@ } } +@mixin mdc-checkbox-touch-dimension($touch-dimension, $query: mdc-feature-all()) { + $feat-structure: mdc-feature-create-target($query, structure); + $checkbox-padding: ($touch-dimension - $mdc-checkbox-size) / 2; + + @include mdc-feature-targets($feat-structure) { + padding: $checkbox-padding; + } + + .mdc-checkbox__background { + @include mdc-feature-targets($feat-structure) { + @include mdc-rtl-reflexive-position(left, $checkbox-padding, ".mdc-checkbox"); + + top: $checkbox-padding; + } + } + + .mdc-checkbox__background::before { + @include mdc-feature-targets($feat-structure) { + top: -$mdc-checkbox-border-width - $checkbox-padding; + left: -$mdc-checkbox-border-width - $checkbox-padding; + width: $touch-dimension; + height: $touch-dimension; + } + } +} + @mixin mdc-checkbox-container-colors( $unmarked-stroke-color: $mdc-checkbox-border-color, $unmarked-fill-color: transparent, @@ -298,7 +325,6 @@ box-sizing: content-box; width: $mdc-checkbox-size; height: $mdc-checkbox-size; - padding: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2; line-height: 0; white-space: nowrap; cursor: pointer; @@ -321,14 +347,6 @@ pointer-events: none; } -@mixin mdc-checkbox__child--cover-parent_ { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; -} - @mixin mdc-checkbox__child--upgraded_ { // Due to the myriad of selector combos used to properly style a CSS-only checkbox, all of // which have varying selector precedence and make use of transitions, it is cleaner and more @@ -455,17 +473,13 @@ $feat-structure: mdc-feature-create-target($query, structure); @include mdc-feature-targets($feat-structure) { - @include mdc-rtl-reflexive-position(left, ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2, ".mdc-checkbox"); - display: inline-flex; position: absolute; - top: ($mdc-checkbox-touch-area - $mdc-checkbox-size) / 2; - bottom: 0; align-items: center; justify-content: center; box-sizing: border-box; - width: $mdc-checkbox-ui-pct; - height: $mdc-checkbox-ui-pct; + width: $mdc-checkbox-size; + height: $mdc-checkbox-size; // border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin border: $mdc-checkbox-border-width solid currentColor; border-radius: 2px; @@ -494,10 +508,7 @@ $feat-structure: mdc-feature-create-target($query, structure); @include mdc-feature-targets($feat-structure) { - @include mdc-checkbox__child--cover-parent_; - - width: 100%; - height: 100%; + position: absolute; transform: scale(0, 0); border-radius: 50%; opacity: 0; @@ -518,7 +529,7 @@ $feat-structure: mdc-feature-create-target($query, structure); @include mdc-feature-targets($feat-structure) { - transform: scale(2.75, 2.75); + transform: scale(1); opacity: $mdc-checkbox-focus-indicator-opacity; } @@ -550,8 +561,11 @@ $feat-structure: mdc-feature-create-target($query, structure); @include mdc-feature-targets($feat-structure) { - @include mdc-checkbox__child--cover-parent_; - + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; width: 100%; opacity: 0; } diff --git a/packages/mdc-checkbox/_variables.scss b/packages/mdc-checkbox/_variables.scss index 051b0b79576..6f143c3989b 100644 --- a/packages/mdc-checkbox/_variables.scss +++ b/packages/mdc-checkbox/_variables.scss @@ -30,7 +30,6 @@ $mdc-checkbox-baseline-theme-color: secondary !default; $mdc-checkbox-touch-area: 40px !default; $mdc-checkbox-size: 18px !default; -$mdc-checkbox-ui-pct: percentage($mdc-checkbox-size / $mdc-checkbox-touch-area) !default; $mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size !default; $mdc-checkbox-border-width: 2px !default; $mdc-checkbox-transition-duration: 90ms !default; diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 8285da5b439..5fcf032d95e 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -184,11 +184,11 @@ } }, "spec/mdc-checkbox/classes/baseline.html": { - "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", + "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", "screenshots": { - "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", - "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", - "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" + "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", + "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", + "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" } }, "spec/mdc-checkbox/mixins/container-colors.html": { @@ -199,6 +199,14 @@ "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" } }, + "spec/mdc-checkbox/mixins/touch-dimension.html": { + "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", + "screenshots": { + "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", + "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", + "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" + } + }, "spec/mdc-chips/classes/action.html": { "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", "screenshots": { diff --git a/test/screenshot/spec/mdc-checkbox/classes/baseline.html b/test/screenshot/spec/mdc-checkbox/classes/baseline.html index fbe0ab6429e..6c0f5244ba0 100644 --- a/test/screenshot/spec/mdc-checkbox/classes/baseline.html +++ b/test/screenshot/spec/mdc-checkbox/classes/baseline.html @@ -64,7 +64,7 @@ + id="checkbox-checked" autofocus />
diff --git a/test/screenshot/spec/mdc-checkbox/fixture.js b/test/screenshot/spec/mdc-checkbox/fixture.js index 3a545347168..3390f313c4e 100644 --- a/test/screenshot/spec/mdc-checkbox/fixture.js +++ b/test/screenshot/spec/mdc-checkbox/fixture.js @@ -24,4 +24,8 @@ document.getElementById('checkbox-indeterminate').indeterminate = true; document.getElementById('checkbox-indeterminate-disabled').indeterminate = true; +[].slice.call(document.querySelectorAll('.mdc-checkbox')).forEach((el) => { + mdc.checkbox.MDCCheckbox.attachTo(el); +}); + window.mdc.testFixture.notifyDomReady(); diff --git a/test/screenshot/spec/mdc-checkbox/fixture.scss b/test/screenshot/spec/mdc-checkbox/fixture.scss index e9fc77ca6fd..49742692c2f 100644 --- a/test/screenshot/spec/mdc-checkbox/fixture.scss +++ b/test/screenshot/spec/mdc-checkbox/fixture.scss @@ -41,3 +41,7 @@ $custom-checkbox-color: $material-color-red-300; .custom-checkbox--ink-color { @include mdc-checkbox-ink-color($custom-checkbox-color); } + +.test-checkbox-touch-dimension { + @include mdc-checkbox-touch-dimension(48px); +} diff --git a/test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html b/test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html new file mode 100644 index 00000000000..418afbd5edd --- /dev/null +++ b/test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html @@ -0,0 +1,164 @@ + + + + + + Checkbox Touch Dimension Mixin - MDC Web Screenshot Test + + + + + + + + + + + +
+
+
+
+ +
+ + + +
+
+
+
+ +
+
+ +
+ + + +
+
+
+
+ +
+
+ +
+ + + +
+
+
+
+ +
+
+ +
+ + + +
+
+
+
+ +
+
+ +
+ + + +
+
+
+
+ +
+
+ +
+ + + +
+
+
+
+
+
+ + + + + + + + + + diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss index ec8e6609f63..7dd8beda617 100644 --- a/test/scss/_feature-targeting-test.scss +++ b/test/scss/_feature-targeting-test.scss @@ -50,6 +50,7 @@ @include mdc-checkbox-focus-indicator-color(red, $query: $query); @include mdc-checkbox-ripple($query: $query); @include mdc-checkbox-without-ripple($query: $query); + @include mdc-checkbox-touch-dimension(40px, $query: $query); // Chips @include mdc-chip-core-styles($query: $query);