feat(icon-button): Add disabled state color mixins (#5246)

Author: allan-chen

packages/mdc-icon-button/README.md

@@ -167,6 +167,7 @@ Mixin | Description
 `mdc-icon-button-size($size)` | Sets the padding for the icon button based on overall size.
 `mdc-icon-button-icon-size($width, $height, $padding)` | Sets the width, height, font-size and padding for the icon and ripple. `$height` is optional and defaults to `$width`. `$padding` is optional and defaults to `max($width, $height)/2`. `font-size` is set to `max($width, $height)`.
 `mdc-icon-button-ink-color($color)` | Sets the font color and the ripple color to the provided color value.
+`mdc-icon-button-disabled-ink-color($color)` | Sets the font color to the provided color value for a disabled icon button.
 
 ## `MDCIconButtonToggle` Properties and Methods
 

packages/mdc-icon-button/_mixins.scss

@@ -144,18 +144,26 @@
   }
 }
 
+///
+/// Sets the font color and the ripple color to the provided color value.
+/// @param {Color} $color - The desired font and ripple color.
+///
 @mixin mdc-icon-button-ink-color($color, $query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
+  @include mdc-icon-button-ink-color_($color, $query: $query);
+  @include mdc-states($color, $query: $query);
+}
 
-  @include mdc-feature-targets($feat-color) {
-    @include mdc-theme-prop(color, $color);
+///
+/// Sets the font color to the provided color value for a disabled icon button.
+/// @param {Color} $color - The desired font color.
+///
+@mixin mdc-icon-button-disabled-ink-color($color, $query: mdc-feature-all()) {
+  @include mdc-icon-button-if-disabled_ {
+    @include mdc-icon-button-ink-color_($color, $query: $query);
   }
-
-  @include mdc-states($color, $query: $query);
 }
 
 @mixin mdc-icon-button-base_($query: mdc-feature-all()) {
-  $feat-color: mdc-feature-create-target($query, color);
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-feature-targets($feat-structure) {
@@ -182,14 +190,35 @@
     }
   }
 
-  &:disabled {
-    @include mdc-feature-targets($feat-color) {
-      @include mdc-theme-prop(color, text-disabled-on-light);
-    }
+  @include mdc-icon-button-disabled-ink-color(text-disabled-on-light, $query: $query);
 
+  @include mdc-icon-button-if-disabled_ {
     @include mdc-feature-targets($feat-structure) {
       cursor: default;
       pointer-events: none;
     }
   }
 }
+
+///
+/// Sets the font color to the provided color value. This can be wrapped in
+/// a state qualifier such as `mdc-icon-button-if-disabled_`.
+/// @access private
+///
+@mixin mdc-icon-button-ink-color_($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  @include mdc-feature-targets($feat-color) {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+///
+/// Helps style the icon button in its disabled state.
+/// @access private
+///
+@mixin mdc-icon-button-if-disabled_ {
+  &:disabled {
+    @content;
+  }
+}

test/screenshot/golden.json

@@ -720,11 +720,11 @@
     }
   },
   "spec/mdc-icon-button/mixins/ink-color.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-icon-button/mixins/ink-color.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/09/03_52_08_759/spec/mdc-icon-button/mixins/ink-color.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-icon-button/mixins/ink-color.html.windows_chrome_74.png",
-      "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/10/17_42_51_602/spec/mdc-icon-button/mixins/ink-color.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/07/17/22_50_36_536/spec/mdc-icon-button/mixins/ink-color.html.windows_ie_11.png"
+      "desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/09/03_52_08_759/spec/mdc-icon-button/mixins/ink-color.html.windows_chrome_77.png",
+      "desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/09/03_52_08_759/spec/mdc-icon-button/mixins/ink-color.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/09/03_52_08_759/spec/mdc-icon-button/mixins/ink-color.html.windows_ie_11.png"
     }
   },
   "spec/mdc-image-list/classes/standard-with-text-protection.html": {

test/screenshot/spec/mdc-icon-button/fixture.scss

@@ -26,6 +26,7 @@
 @import "../mixins";
 
 $custom-icon-button-icon-ink-color: $material-color-red-500;
+$custom-icon-button-disabled-icon-ink-color: rgba(purple, .3);
 $custom-icon-button-size: 36px;
 
 .test-cell--icon-button {
@@ -34,6 +35,7 @@ $custom-icon-button-size: 36px;
 
 .custom-icon-button--ink-color {
   @include mdc-icon-button-ink-color($custom-icon-button-icon-ink-color);
+  @include mdc-icon-button-disabled-ink-color($custom-icon-button-disabled-icon-ink-color);
 }
 
 .custom-icon-button--icon-size {