From b4bd10a3bc10d6f34374a2142df49e9ad82762f3 Mon Sep 17 00:00:00 2001 From: Allan Chen Date: Fri, 8 Nov 2019 19:54:01 -0800 Subject: [PATCH 1/3] feat(icon-button): Add disabled state color mixins --- packages/mdc-icon-button/README.md | 3 +- packages/mdc-icon-button/_mixins.scss | 49 +++++++++++++++---- test/screenshot/golden.json | 8 +-- .../spec/mdc-icon-button/fixture.scss | 2 + 4 files changed, 47 insertions(+), 15 deletions(-) diff --git a/packages/mdc-icon-button/README.md b/packages/mdc-icon-button/README.md index 80ef2ecf0a8..09befa94f84 100644 --- a/packages/mdc-icon-button/README.md +++ b/packages/mdc-icon-button/README.md @@ -166,7 +166,8 @@ Mixin | Description `mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default). `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-ink-color($color)` | Sets the font color and the ripple color to the provided color value for an enabled icon button. +`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 diff --git a/packages/mdc-icon-button/_mixins.scss b/packages/mdc-icon-button/_mixins.scss index 00875d0263f..4467ac92eea 100644 --- a/packages/mdc-icon-button/_mixins.scss +++ b/packages/mdc-icon-button/_mixins.scss @@ -144,18 +144,26 @@ } } +/// +/// Sets the font color and the ripple color to the provided color value for an enabled icon button. +/// @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,10 +190,8 @@ } } - &:disabled { - @include mdc-feature-targets($feat-color) { - @include mdc-theme-prop(color, text-disabled-on-light); - } + @include mdc-icon-button-if-disabled_ { + @include mdc-icon-button-ink-color_(text-disabled-on-light, $query); @include mdc-feature-targets($feat-structure) { cursor: default; @@ -193,3 +199,26 @@ } } } + +/// +/// 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; + } +} diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 6a783524b2e..32958ed392f 100644 --- a/test/screenshot/golden.json +++ b/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": { diff --git a/test/screenshot/spec/mdc-icon-button/fixture.scss b/test/screenshot/spec/mdc-icon-button/fixture.scss index f6542018d47..37da712ae2f 100644 --- a/test/screenshot/spec/mdc-icon-button/fixture.scss +++ b/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 { From bcaf2e35dc8cbdc07c5dc330b9680c5ed93a3985 Mon Sep 17 00:00:00 2001 From: Allan Chen Date: Tue, 12 Nov 2019 12:20:51 -0800 Subject: [PATCH 2/3] extract disabled mixin --- packages/mdc-icon-button/_mixins.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mdc-icon-button/_mixins.scss b/packages/mdc-icon-button/_mixins.scss index 4467ac92eea..4b520a80690 100644 --- a/packages/mdc-icon-button/_mixins.scss +++ b/packages/mdc-icon-button/_mixins.scss @@ -190,9 +190,9 @@ } } - @include mdc-icon-button-if-disabled_ { - @include mdc-icon-button-ink-color_(text-disabled-on-light, $query); + @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; From 7cf570679b719b6c9bd508f05b08d1b77446f3cc Mon Sep 17 00:00:00 2001 From: Allan Chen Date: Tue, 12 Nov 2019 13:05:51 -0800 Subject: [PATCH 3/3] docs --- packages/mdc-icon-button/README.md | 2 +- packages/mdc-icon-button/_mixins.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mdc-icon-button/README.md b/packages/mdc-icon-button/README.md index 09befa94f84..f84d6bac54c 100644 --- a/packages/mdc-icon-button/README.md +++ b/packages/mdc-icon-button/README.md @@ -166,7 +166,7 @@ Mixin | Description `mdc-icon-button-density($density-scale)` | Sets density scale for icon button. Supported density scales range from `-5` to `0`, (`0` being the default). `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 for an enabled icon button. +`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 diff --git a/packages/mdc-icon-button/_mixins.scss b/packages/mdc-icon-button/_mixins.scss index 4b520a80690..483756aa3ea 100644 --- a/packages/mdc-icon-button/_mixins.scss +++ b/packages/mdc-icon-button/_mixins.scss @@ -145,7 +145,7 @@ } /// -/// Sets the font color and the ripple color to the provided color value for an enabled icon button. +/// 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()) {