fix(checkbox): Fix checkbox terminology in sass mixins (#5014)

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.
 

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;

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;

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": {

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);
 }

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

@@ -23,7 +23,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <title>Checkbox Touch Dimension Mixin - MDC Web Screenshot Test</title>
+    <title>Checkbox Ripple Size Mixin - MDC Web Screenshot Test</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="../../../out/mdc.checkbox.css">
     <link rel="stylesheet" href="../../../out/spec/fixture.css">
@@ -43,7 +43,7 @@
     <main class="test-viewport test-viewport--mobile">
       <div class="test-layout">
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox test-checkbox-touch-dimension">
+          <div class="mdc-checkbox test-checkbox-ripple-size">
             <input type="checkbox"
                    class="mdc-checkbox__native-control"
                    id="checkbox-unchecked"
@@ -62,7 +62,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox test-checkbox-touch-dimension">
+          <div class="mdc-checkbox test-checkbox-ripple-size">
             <input type="checkbox"
                    checked
                    class="mdc-checkbox__native-control"
@@ -81,7 +81,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox test-checkbox-touch-dimension">
+          <div class="mdc-checkbox test-checkbox-ripple-size">
             <input type="checkbox"
                    checked
                    class="mdc-checkbox__native-control"
@@ -100,7 +100,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-touch-dimension">
+          <div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-ripple-size">
             <input type="checkbox"
                    disabled
                    class="mdc-checkbox__native-control"
@@ -119,7 +119,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-touch-dimension">
+          <div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-ripple-size">
             <input type="checkbox"
                    disabled
                    checked
@@ -139,7 +139,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-touch-dimension">
+          <div class="mdc-checkbox mdc-checkbox--disabled test-checkbox-ripple-size">
             <input type="checkbox"
                    disabled
                    class="mdc-checkbox__native-control"

test/scss/_feature-targeting-test.scss

@@ -58,7 +58,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);
+    @include mdc-checkbox-ripple-size(40px, $query: $query);
 
     // Chips
     @include mdc-chip-core-styles($query: $query);