diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md index 38bb4a7574f..733d3cb7f48 100644 --- a/packages/mdc-checkbox/README.md +++ b/packages/mdc-checkbox/README.md @@ -124,7 +124,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 (ripple) when checkbox is selected or is in indeterminate state. -`mdc-checkbox-touch-dimension($touch-dimension)` | Sets the touch dimension of the checkbox. +`mdc-checkbox-ripple-size($ripple-size)` | Sets the ripple size 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 c73bf0abb05..8288e18fd1a 100644 --- a/packages/mdc-checkbox/_mixins.scss +++ b/packages/mdc-checkbox/_mixins.scss @@ -189,7 +189,7 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple"; @include mdc-ripple-surface($query: $query, $ripple-target: $mdc-checkbox-ripple-target); @include mdc-states($color: on-surface, $query: $query, $ripple-target: $mdc-checkbox-ripple-target); @include mdc-ripple-radius-unbounded($query: $query, $ripple-target: $mdc-checkbox-ripple-target); - @include mdc-checkbox-touch-dimension($mdc-checkbox-touch-area, $query: $query); + @include mdc-checkbox-ripple-size($mdc-checkbox-ripple-size, $query: $query); } #{$mdc-checkbox-ripple-target} { @@ -203,9 +203,9 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple"; } } -@mixin mdc-checkbox-touch-dimension($touch-dimension, $query: mdc-feature-all()) { +@mixin mdc-checkbox-ripple-size($ripple-size, $query: mdc-feature-all()) { $feat-structure: mdc-feature-create-target($query, structure); - $checkbox-padding: ($touch-dimension - $mdc-checkbox-size) / 2; + $checkbox-padding: ($ripple-size - $mdc-checkbox-icon-size) / 2; @include mdc-feature-targets($feat-structure) { padding: $checkbox-padding; @@ -223,8 +223,8 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple"; @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; + width: $ripple-size; + height: $ripple-size; } } } @@ -336,10 +336,10 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple"; @mixin mdc-checkbox-base_ { display: inline-block; position: relative; - flex: 0 0 $mdc-checkbox-size; + flex: 0 0 $mdc-checkbox-icon-size; box-sizing: content-box; - width: $mdc-checkbox-size; - height: $mdc-checkbox-size; + width: $mdc-checkbox-icon-size; + height: $mdc-checkbox-icon-size; line-height: 0; white-space: nowrap; cursor: pointer; @@ -494,8 +494,8 @@ $mdc-checkbox-ripple-target: ".mdc-checkbox__ripple"; align-items: center; justify-content: center; box-sizing: border-box; - width: $mdc-checkbox-size; - height: $mdc-checkbox-size; + width: $mdc-checkbox-icon-size; + height: $mdc-checkbox-icon-size; // border-color is overridden by the mdc-checkbox-unmarked-stroke-color() mixin border: $mdc-checkbox-border-width solid currentColor; border-radius: 2px; diff --git a/packages/mdc-checkbox/_variables.scss b/packages/mdc-checkbox/_variables.scss index 6f143c3989b..771a0aae61b 100644 --- a/packages/mdc-checkbox/_variables.scss +++ b/packages/mdc-checkbox/_variables.scss @@ -28,9 +28,9 @@ $mdc-checkbox-border-color: rgba(mdc-theme-prop-value(on-surface), .54) !default $mdc-checkbox-disabled-color: rgba(mdc-theme-prop-value(on-surface), .26) !default; $mdc-checkbox-baseline-theme-color: secondary !default; -$mdc-checkbox-touch-area: 40px !default; -$mdc-checkbox-size: 18px !default; -$mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-size !default; +$mdc-checkbox-ripple-size: 40px !default; +$mdc-checkbox-icon-size: 18px !default; +$mdc-checkbox-mark-stroke-size: 2/15 * $mdc-checkbox-icon-size !default; $mdc-checkbox-border-width: 2px !default; $mdc-checkbox-transition-duration: 90ms !default; $mdc-checkbox-item-spacing: 4px !default; diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 1fbb8955a38..c64217dab33 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -199,12 +199,12 @@ "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" } }, - "spec/mdc-checkbox/mixins/touch-dimension.html": { - "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", + "spec/mdc-checkbox/mixins/ripple-size.html": { + "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", "screenshots": { - "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", - "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", - "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" + "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", + "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", + "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" } }, "spec/mdc-chips/classes/action.html": { diff --git a/test/screenshot/spec/mdc-checkbox/fixture.scss b/test/screenshot/spec/mdc-checkbox/fixture.scss index 17747106c2a..8f56de8481f 100644 --- a/test/screenshot/spec/mdc-checkbox/fixture.scss +++ b/test/screenshot/spec/mdc-checkbox/fixture.scss @@ -41,6 +41,6 @@ $custom-checkbox-color: crimson; @include mdc-checkbox-ink-color($custom-checkbox-color); } -.test-checkbox-touch-dimension { - @include mdc-checkbox-touch-dimension(48px); +.test-checkbox-ripple-size { + @include mdc-checkbox-ripple-size(48px); } diff --git a/test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html b/test/screenshot/spec/mdc-checkbox/mixins/ripple-size.html similarity index 95% rename from test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html rename to test/screenshot/spec/mdc-checkbox/mixins/ripple-size.html index 85bdd0c8371..ccfa1151494 100644 --- a/test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html +++ b/test/screenshot/spec/mdc-checkbox/mixins/ripple-size.html @@ -23,7 +23,7 @@ - Checkbox Touch Dimension Mixin - MDC Web Screenshot Test + Checkbox Ripple Size Mixin - MDC Web Screenshot Test @@ -43,7 +43,7 @@
-
+
-
+
-
+
-
+
-
+
-
+