feat(radio): Add disabled state color mixins (#5168)

Author: allan-chen

packages/mdc-radio/README.md

@@ -127,9 +127,12 @@ MDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the
 
 Mixin | Description
 --- | ---
-`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button
-`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button
-`mdc-radio-ink-color($color)` | Sets the ink color of a radio button
+`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button
+`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button
+`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button
+`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button
+`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button
+`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button
 `mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator
 `mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`.
 `mdc-radio-ripple-size($size)` | Sets custom ripple size of radio.

packages/mdc-radio/_mixins.scss

@@ -52,11 +52,14 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple";
   @include mdc-touch-target-wrapper($query);
 
   .mdc-radio {
-    @include mdc-radio-unchecked-stroke-color($mdc-radio-unchecked-color, $query);
-    @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color, $query);
-    @include mdc-radio-ink-color($mdc-radio-baseline-theme-color, $query);
-    @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color, $query);
-    @include mdc-radio-density($mdc-radio-density-scale, $query);
+    @include mdc-radio-unchecked-stroke-color($mdc-radio-unchecked-color, $query: $query);
+    @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color, $query: $query);
+    @include mdc-radio-ink-color($mdc-radio-baseline-theme-color, $query: $query);
+    @include mdc-radio-disabled-unchecked-stroke-color($mdc-radio-disabled-circle-color, $query: $query);
+    @include mdc-radio-disabled-checked-stroke-color($mdc-radio-disabled-circle-color, $query: $query);
+    @include mdc-radio-disabled-ink-color($mdc-radio-disabled-circle-color, $query: $query);
+    @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color, $query: $query);
+    @include mdc-radio-density($mdc-radio-density-scale, $query: $query);
 
     @include mdc-feature-targets($feat-structure) {
       display: inline-block;
@@ -209,18 +212,6 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple";
       @include mdc-feature-targets($feat-structure) {
         cursor: default;
       }
-
-      .mdc-radio__outer-circle {
-        @include mdc-feature-targets($feat-color) {
-          border-color: $mdc-radio-circle-color;
-        }
-      }
-
-      .mdc-radio__inner-circle {
-        @include mdc-feature-targets($feat-color) {
-          border-color: $mdc-radio-circle-color;
-        }
-      }
     }
   }
 
@@ -269,36 +260,63 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple";
   }
 }
 
+///
+/// Sets the stroke color of an unchecked, enabled radio button.
+/// @param {Color} $color - The desired stroke color.
+///
 @mixin mdc-radio-unchecked-stroke-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  // stylelint-disable-next-line selector-max-specificity
-  .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop(border-color, $color);
-    }
+  @include mdc-radio-if-enabled-unchecked_ {
+    @include mdc-radio-stroke-color_($color, $query: $query);
   }
 }
 
+///
+/// Sets the stroke color of a checked, enabled radio button.
+/// @param {Color} $color - The desired stroke color.
+///
 @mixin mdc-radio-checked-stroke-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
-
-  // stylelint-disable-next-line selector-max-specificity
-  .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop(border-color, $color);
-    }
+  @include mdc-radio-if-enabled-checked_ {
+    @include mdc-radio-stroke-color_($color, $query:$query);
   }
 }
 
+///
+/// Sets the ink color of an enabled radio button.
+/// @param {Color} $color - The desired ink color.
+///
 @mixin mdc-radio-ink-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
+  @include mdc-radio-if-enabled_ {
+    @include mdc-radio-ink-color_($color, $query: $query);
+  }
+}
 
-  // stylelint-disable-next-line selector-max-specificity
-  .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop(border-color, $color);
-    }
+///
+/// Sets the stroke color of an unchecked, disabled radio button.
+/// @param {Color} $color - The desired stroke color.
+///
+@mixin mdc-radio-disabled-unchecked-stroke-color($color, $query: mdc-feature-all()) {
+  @include mdc-radio-if-disabled-unchecked_ {
+    @include mdc-radio-stroke-color_($color, $query: $query);
+  }
+}
+
+///
+/// Sets the stroke color of a checked, disabled radio button.
+/// @param {Color} $color - The desired stroke color.
+///
+@mixin mdc-radio-disabled-checked-stroke-color($color, $query: mdc-feature-all()) {
+  @include mdc-radio-if-disabled-checked_ {
+    @include mdc-radio-stroke-color_($color, $query: $query);
+  }
+}
+
+///
+/// Sets the ink color of a disabled radio button.
+/// @param {Color} $color - The desired ink color
+///
+@mixin mdc-radio-disabled-ink-color($color, $query: mdc-feature-all()) {
+  @include mdc-radio-if-disabled_ {
+    @include mdc-radio-ink-color_($color, $query: $query);
   }
 }
 
@@ -395,3 +413,108 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple";
     margin: 0;
   }
 }
+
+///
+/// Helps select the radio background only when its native control is in the
+/// enabled state.
+/// @access private
+///
+@mixin mdc-radio-if-enabled_ {
+  .mdc-radio__native-control:enabled + {
+    @content;
+  }
+}
+
+///
+/// Helps select the radio background only when its native control is in the
+/// enabled & unchecked state.
+/// @access private
+///
+@mixin mdc-radio-if-enabled-unchecked_ {
+  .mdc-radio__native-control:enabled:not(:checked) + {
+    @content;
+  }
+}
+
+///
+/// Helps select the radio background only when its native control is in the
+/// enabled & checked state.
+/// @access private
+///
+@mixin mdc-radio-if-enabled-checked_ {
+  .mdc-radio__native-control:enabled:checked + {
+    @content;
+  }
+}
+
+///
+/// Helps select the radio background only when its native control is in the
+/// disabled state.
+/// @access private
+///
+@mixin mdc-radio-if-disabled_ {
+  [aria-disabled="true"] .mdc-radio__native-control,
+  .mdc-radio__native-control:disabled {
+    + {
+      @content;
+    }
+  }
+}
+
+///
+/// Helps select the radio background only when its native control is in the
+/// disabled & unchecked state.
+/// @access private
+///
+@mixin mdc-radio-if-disabled-unchecked_ {
+  [aria-disabled="true"] .mdc-radio__native-control,
+  .mdc-radio__native-control:disabled {
+    &:not(:checked) + {
+      @content;
+    }
+  }
+}
+
+///
+/// Helps select the radio background only when its native control is in the
+/// disabled & checked state.
+/// @access private
+///
+@mixin mdc-radio-if-disabled-checked_ {
+  [aria-disabled="true"] .mdc-radio__native-control,
+  .mdc-radio__native-control:disabled {
+    &:checked + {
+      @content;
+    }
+  }
+}
+
+///
+/// Sets the ink color for radio. This is wrapped in a mixin
+/// that qualifies state such as `mdc-radio-if-enabled_`
+/// @access private
+///
+@mixin mdc-radio-ink-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  .mdc-radio__background .mdc-radio__inner-circle {
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(border-color, $color);
+    }
+  }
+}
+
+///
+/// Sets the stroke color for radio. This is wrapped in a mixin
+/// that qualifies state such as `mdc-radio-if-enabled_`
+/// @access private
+///
+@mixin mdc-radio-stroke-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  .mdc-radio__background .mdc-radio__outer-circle {
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(border-color, $color);
+    }
+  }
+}

packages/mdc-radio/_variables.scss

@@ -29,7 +29,7 @@ $mdc-radio-transition-duration: 120ms !default;
 $mdc-radio-ripple-opacity: .14 !default;
 $mdc-radio-baseline-theme-color: secondary !default;
 $mdc-radio-unchecked-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;
-$mdc-radio-circle-color: rgba(mdc-theme-prop-value(on-surface), .26) !default;
+$mdc-radio-disabled-circle-color: rgba(mdc-theme-prop-value(on-surface), .26) !default;
 
 $mdc-radio-minimum-size: 28px !default;
 $mdc-radio-maximum-size: $mdc-radio-ripple-size !default;

test/screenshot/golden.json

@@ -960,11 +960,11 @@
     }
   },
   "spec/mdc-radio/mixins/mixins.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/20/22_06_30_583/spec/mdc-radio/mixins/mixins.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/10/10/22_20_16_416/spec/mdc-radio/mixins/mixins.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/20/22_06_30_583/spec/mdc-radio/mixins/mixins.html.windows_chrome_76.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/20/22_06_30_583/spec/mdc-radio/mixins/mixins.html.windows_firefox_69.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/20/22_06_30_583/spec/mdc-radio/mixins/mixins.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/10/10/22_20_16_416/spec/mdc-radio/mixins/mixins.html.windows_chrome_77.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/10/10/22_20_16_416/spec/mdc-radio/mixins/mixins.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/10/10/22_20_16_416/spec/mdc-radio/mixins/mixins.html.windows_ie_11.png"
     }
   },
   "spec/mdc-rtl/variables/include.html": {

test/screenshot/spec/mdc-radio/fixture.scss

@@ -25,6 +25,7 @@
 @import "../mixins";
 
 $custom-radio-color: $material-color-red-300;
+$custom-disabled-radio-color: rgba(purple, .4);
 
 .test-cell--radio {
   @include test-cell-size(71, 91);
@@ -53,14 +54,17 @@ $custom-radio-color: $material-color-red-300;
 
 .custom-radio--unchecked-stroke-color {
   @include mdc-radio-unchecked-stroke-color($custom-radio-color);
+  @include mdc-radio-disabled-unchecked-stroke-color($custom-disabled-radio-color);
 }
 
 .custom-radio--checked-stroke-color {
   @include mdc-radio-checked-stroke-color($custom-radio-color);
+  @include mdc-radio-disabled-checked-stroke-color($custom-disabled-radio-color);
 }
 
 .custom-radio--ink-color {
   @include mdc-radio-ink-color($custom-radio-color);
+  @include mdc-radio-disabled-ink-color($custom-disabled-radio-color);
 }
 
 .custom-radio-density {