Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

Commit

Permalink
feat(icon-button): Add disabled state color mixins (#5246)
Browse files Browse the repository at this point in the history
  • Loading branch information
@allan-chen
allan-chen authored Nov 12, 2019
1 parent db4b4e2 commit 7161170
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 14 deletions.
1 change: 1 addition & 0 deletions packages/mdc-icon-button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
49 changes: 39 additions & 10 deletions packages/mdc-icon-button/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
}
}
8 changes: 4 additions & 4 deletions test/screenshot/golden.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
2 changes: 2 additions & 0 deletions test/screenshot/spec/mdc-icon-button/fixture.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down

0 comments on commit 7161170

Please sign in to comment.