Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Nov 12, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b4bd10a
feat(icon-button): Add disabled state color mixins
allan-chen Nov 9, 2019
bcaf2e3
extract disabled mixin
allan-chen Nov 12, 2019
7cf5706
docs
allan-chen Nov 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/mdc-icon-button/README.md
View file
Open in desktop
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
Open in desktop
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);
allan-chen marked this conversation as resolved.
Show resolved Hide resolved
@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
Open in desktop
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
Open in desktop
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