fix(checkbox): Fixed hover focus colors for unchecked checkbox (#4868)

material-components · Jul 10, 2019 · 1d8fbf5 · 1d8fbf5
1 parent d393fb5
commit 1d8fbf5
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 30 deletions.
diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md
@@ -121,7 +121,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-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.
 
 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
@@ -55,11 +55,12 @@
     @include mdc-feature-targets($feat-structure) {
       @include mdc-checkbox-base_;
     }
+
+    @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color, $query: $query);
   }
 
   @include mdc-checkbox-container-colors($query: $query);
   @include mdc-checkbox-ink-color($mdc-checkbox-mark-color, $query);
-  @include mdc-checkbox-focus-indicator-color($mdc-checkbox-baseline-theme-color, $query);
 
   @include mdc-feature-targets($feat-color) {
     @include mdc-checkbox-disabled-container-color_;
@@ -184,7 +185,7 @@
 
   .mdc-checkbox {
     @include mdc-ripple-surface($query);
-    @include mdc-states($mdc-checkbox-baseline-theme-color, $query: $query);
+    @include mdc-states(on-surface, $query: $query);
     @include mdc-ripple-radius-unbounded($query: $query);
     @include mdc-checkbox-touch-dimension($mdc-checkbox-touch-area, $query: $query);
   }
@@ -306,12 +307,20 @@
 @mixin mdc-checkbox-focus-indicator-color($color, $query: mdc-feature-all()) {
   $feat-color: mdc-feature-create-target($query, color);
 
-  // The ::before element is used as a focus indicator for the checkbox
-  .mdc-checkbox__background::before {
+  .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background::before,
+  .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background::before {
     @include mdc-feature-targets($feat-color) {
       @include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
     }
   }
+
+  &.mdc-checkbox--selected {
+    @include mdc-states($color, $query: $query);
+  }
+
+  &.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected {
+    @include mdc-states-base-color($color, $query: $query);
+  }
 }
 
 //
@@ -471,6 +480,7 @@
 @mixin mdc-checkbox__background_($query: mdc-feature-all()) {
   $feat-animation: mdc-feature-create-target($query, animation);
   $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-color: mdc-feature-create-target($query, color);
 
   @include mdc-feature-targets($feat-structure) {
     display: inline-flex;
@@ -488,6 +498,12 @@
     will-change: background-color, border-color;
   }
 
+  .mdc-checkbox__background::before {
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(background-color, on-surface, $edgeOptOut: true);
+    }
+  }
+
   @include mdc-feature-targets($feat-animation) {
     transition:
       mdc-checkbox-transition-exit(background-color),

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -184,27 +184,27 @@
     }
   },
   "spec/mdc-checkbox/classes/baseline.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_35_21_026/spec/mdc-checkbox/classes/baseline.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/02/22_30_01_092/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/06/12/17_35_21_026/spec/mdc-checkbox/classes/baseline.html.windows_chrome_75.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_35_21_026/spec/mdc-checkbox/classes/baseline.html.windows_firefox_67.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_35_21_026/spec/mdc-checkbox/classes/baseline.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/02/22_30_01_092/spec/mdc-checkbox/classes/baseline.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/02/22_30_01_092/spec/mdc-checkbox/classes/baseline.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/classes/baseline.html.windows_ie_11.png"
     }
   },
   "spec/mdc-checkbox/mixins/container-colors.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/31/03_19_25_902/spec/mdc-checkbox/mixins/container-colors.html",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/08/19_30_20_273/spec/mdc-checkbox/mixins/container-colors.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/31/03_19_25_902/spec/mdc-checkbox/mixins/container-colors.html.windows_chrome_67.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/31/03_19_25_902/spec/mdc-checkbox/mixins/container-colors.html.windows_firefox_61.png",
-      "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"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/08/19_30_20_273/spec/mdc-checkbox/mixins/container-colors.html.windows_chrome_75.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/08/19_30_20_273/spec/mdc-checkbox/mixins/container-colors.html.windows_firefox_67.png",
+      "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/06/12/17_35_21_026/spec/mdc-checkbox/mixins/touch-dimension.html?utm_source=golden_json",
+    "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",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/06/12/17_35_21_026/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/06/12/17_35_21_026/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/06/12/17_35_21_026/spec/mdc-checkbox/mixins/touch-dimension.html.windows_ie_11.png"
+      "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"
     }
   },
   "spec/mdc-chips/classes/action.html": {

diff --git a/test/screenshot/spec/mdc-checkbox/classes/baseline.html b/test/screenshot/spec/mdc-checkbox/classes/baseline.html
@@ -46,7 +46,7 @@
           <div class="mdc-checkbox">
             <input type="checkbox"
                    class="mdc-checkbox__native-control"
-                   id="checkbox-unchecked" autofocus/>
+                   id="checkbox-unchecked" />
             <div class="mdc-checkbox__background">
               <svg class="mdc-checkbox__checkmark"
                    viewBox="0 0 24 24">
@@ -60,7 +60,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox">
+          <div class="mdc-checkbox mdc-checkbox--selected">
             <input type="checkbox"
                    checked
                    class="mdc-checkbox__native-control"
@@ -78,7 +78,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox">
+          <div class="mdc-checkbox mdc-checkbox--selected">
             <input type="checkbox"
                    checked
                    class="mdc-checkbox__native-control"
@@ -114,7 +114,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox mdc-checkbox--disabled">
+          <div class="mdc-checkbox mdc-checkbox--selected mdc-checkbox--disabled">
             <input type="checkbox"
                    disabled
                    checked
@@ -133,7 +133,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox mdc-checkbox--disabled">
+          <div class="mdc-checkbox mdc-checkbox--selected mdc-checkbox--disabled">
             <input type="checkbox"
                    disabled
                    class="mdc-checkbox__native-control"

diff --git a/test/screenshot/spec/mdc-checkbox/fixture.js b/test/screenshot/spec/mdc-checkbox/fixture.js
@@ -26,6 +26,7 @@ document.getElementById('checkbox-indeterminate-disabled').indeterminate = true;
 
 [].slice.call(document.querySelectorAll('.mdc-checkbox')).forEach((el) => {
   mdc.checkbox.MDCCheckbox.attachTo(el);
+  el.querySelector('input[data-autofocus]').focus();
 });
 
 window.mdc.testFixture.notifyDomReady();
diff --git a/test/screenshot/spec/mdc-checkbox/fixture.scss b/test/screenshot/spec/mdc-checkbox/fixture.scss
@@ -21,18 +21,17 @@
 //
 
 @import "../../../../packages/mdc-checkbox/mixins";
-@import "../../../../packages/mdc-theme/color-palette";
 @import "../mixins";
 
-$custom-checkbox-color: $material-color-red-300;
+$custom-checkbox-color: crimson;
 
 .test-cell--checkbox {
   @include test-cell-size(91);
 }
 
 .custom-checkbox--container-colors {
+  @include mdc-checkbox-focus-indicator-color($custom-checkbox-color);
   @include mdc-checkbox-container-colors(
-    $unmarked-stroke-color: $custom-checkbox-color,
     $marked-stroke-color: $custom-checkbox-color,
     $marked-fill-color: $custom-checkbox-color
   );

diff --git a/test/screenshot/spec/mdc-checkbox/mixins/container-colors.html b/test/screenshot/spec/mdc-checkbox/mixins/container-colors.html
@@ -60,7 +60,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox custom-checkbox--container-colors">
+          <div class="mdc-checkbox mdc-checkbox--selected custom-checkbox--container-colors">
             <input type="checkbox"
                    checked
                    class="mdc-checkbox__native-control"
@@ -78,7 +78,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox custom-checkbox--container-colors">
+          <div class="mdc-checkbox mdc-checkbox--selected custom-checkbox--container-colors">
             <input type="checkbox"
                    checked
                    class="mdc-checkbox__native-control"
@@ -114,7 +114,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox mdc-checkbox--disabled custom-checkbox--container-colors">
+          <div class="mdc-checkbox mdc-checkbox--selected mdc-checkbox--disabled custom-checkbox--container-colors">
             <input type="checkbox"
                    disabled
                    checked
@@ -133,7 +133,7 @@
         </div>
 
         <div class="test-cell test-cell--checkbox">
-          <div class="mdc-checkbox mdc-checkbox--disabled custom-checkbox--container-colors">
+          <div class="mdc-checkbox mdc-checkbox--selected mdc-checkbox--disabled custom-checkbox--container-colors">
             <input type="checkbox"
                    disabled
                    class="mdc-checkbox__native-control"

diff --git a/test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html b/test/screenshot/spec/mdc-checkbox/mixins/touch-dimension.html
@@ -47,7 +47,7 @@
             <input type="checkbox"
                    class="mdc-checkbox__native-control"
                    id="checkbox-unchecked"
-                   autofocus />
+                   data-autofocus />
             <div class="mdc-checkbox__background">
               <svg class="mdc-checkbox__checkmark"
                    viewBox="0 0 24 24">