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

Commit

Permalink
feat(button): Add disabled state color mixins (#5232)
Browse files Browse the repository at this point in the history
  • Loading branch information
@allan-chen
allan-chen authored Nov 7, 2019
1 parent 067b754 commit b5eb51e
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 68 deletions.
12 changes: 8 additions & 4 deletions packages/mdc-button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,14 +194,18 @@ These mixins will override the color of the container, ink, outline or ripple. I

Mixin | Description
--- | ---
`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color.
`mdc-button-icon-color($color)` | Sets the icon color to the given color.
`mdc-button-ink-color($color)` | Sets the ink color to the given color, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.
`mdc-button-container-fill-color($color)` | Sets the container fill color to the given color for an enabled button.
`mdc-button-disabled-container-fill-color($color)` | Sets the container fill color to the given color for a disabled button.
`mdc-button-icon-color($color)` | Sets the icon color to the given color for an enabled button.
`mdc-button-disabled-icon-color($color)` | Sets the icon color to the given color for a disabled button.
`mdc-button-ink-color($color)` | Sets the ink color to the given color for an enabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.
`mdc-button-disabled-ink-color($color)` | Sets the ink color to the given color for a disabled button, and sets the icon color to the given color unless `mdc-button-icon-color` is also used.
`mdc-button-density($density-scale)` | Sets density scale for button. Supported density scale values (`-3`, `-2`, `-1`, `0`).
`mdc-button-height($height)` | Sets custom height of button.
`mdc-button-shape-radius($radius, $density-scale, $rtl-reflexive)` | Sets rounded shape to button with given radius size. `$density-scale` is only required when `$radius` value is in percentage unit, defaults to `$mdc-button-density-default-scale`. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number.
`mdc-button-outline-color($color)` | Sets the outline color to the given color.
`mdc-button-outline-color($color)` | Sets the outline color to the given color for an enabled button.
`mdc-button-disabled-outline-color($color)` | Sets the outline color to the given color for a disabled button.
`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value.

##### Caveat: Edge and CSS Custom Properties
Expand Down
176 changes: 128 additions & 48 deletions packages/mdc-button/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
@include mdc-button-base_($query);
@include mdc-button-shape-radius(small, $query: $query);
@include mdc-button-container-fill-color(transparent, $query);

@include mdc-button-disabled-container-fill-color(transparent, $query);
// The icon CSS class overrides styles defined in the .material-icons CSS
// class, which is loaded separately so the order of CSS definitions is not
// guaranteed. Therefore, increase specifity by nesting this class to ensure
Expand All @@ -76,6 +76,7 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
}

@include mdc-button-ink-color(primary, $query);
@include mdc-button-disabled-ink-color($mdc-button-disabled-ink-color, $query);
}

.mdc-button__label + .mdc-button__icon {
Expand Down Expand Up @@ -111,8 +112,6 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
.mdc-button--raised,
.mdc-button--unelevated {
@include mdc-button--filled_($query);
@include mdc-button-container-fill-color(primary, $query);
@include mdc-button-ink-color(on-primary, $query);
}

.mdc-button--raised {
Expand All @@ -121,8 +120,6 @@ $mdc-button-ripple-target: ".mdc-button__ripple";

.mdc-button--outlined {
@include mdc-button--outlined_($query);
@include mdc-button-outline-width($mdc-button-outlined-border-width, $query: $query);
@include mdc-button-outline-color(primary, $query);
}

.mdc-button--touch {
Expand Down Expand Up @@ -191,45 +188,89 @@ $mdc-button-ripple-target: ".mdc-button__ripple";
}
}

///
/// Sets the container fill color to the given color for an enabled button.
/// @param {Color} $color - The desired container fill color.
///
@mixin mdc-button-container-fill-color($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

// :not(:disabled) is used to support link styled as button
// as link does not support :enabled style
&:not(:disabled) {
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
}
@include mdc-button-container-fill-color_($color, $query: $query);
}
}

@mixin mdc-button-outline-color($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);
///
/// Sets the container fill color to the given color for a disabled button.
/// @param {Color} $color - The desired container fill color.
///
@mixin mdc-button-disabled-container-fill-color($color, $query: mdc-feature-all()) {
&:disabled {
@include mdc-button-container-fill-color_($color, $query: $query);
}
}

///
/// Sets the outline color to the given color for an enabled button.
/// @param {Color} $color - The desired outline color.
///
@mixin mdc-button-outline-color($color, $query: mdc-feature-all()) {
&:not(:disabled) {
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(border-color, $color);
}
@include mdc-button-outline-color_($color, $query: $query);
}
}

///
/// Sets the outline color to the given color for a disabled button.
/// @param {Color} $color - The desired outline color.
///
@mixin mdc-button-disabled-outline-color($color, $query: mdc-feature-all()) {
&:disabled {
@include mdc-button-outline-color_($color, $query: $query);
}
}

///
/// Sets the icon color to the given color for an enabled button.
/// @param {Color} $color - The desired icon color.
///
@mixin mdc-button-icon-color($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);
&:not(:disabled) {
@include mdc-button-icon-color_($color, $query: $query);
}
}

&:not(:disabled) .mdc-button__icon {
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(color, $color);
}
///
/// Sets the icon color to the given color for a disabled button.
/// @param {Color} $color - The desired icon color.
///
@mixin mdc-button-disabled-icon-color($color, $query: mdc-feature-all()) {
&:disabled {
@include mdc-button-icon-color_($color, $query: $query);
}
}

///
/// Sets the ink color to the given color for an enabled button,
/// and sets the icon color to the given color unless `mdc-button-icon-color`
/// is also used.
/// @param {Color} $color - The desired ink color.
///
@mixin mdc-button-ink-color($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

&:not(:disabled) {
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(color, $color);
}
@include mdc-button-ink-color_($color, $query: $query);
}
}

///
/// Sets the ink color to the given color for a disabled button,
/// and sets the icon color to the given color unless `mdc-button-icon-color`
/// is also used.
/// @param {Color} $color - The desired ink color.
///
@mixin mdc-button-disabled-ink-color($color, $query: mdc-feature-all()) {
&:disabled {
@include mdc-button-ink-color_($color, $query: $query);
}
}

Expand Down Expand Up @@ -382,12 +423,6 @@ $query: mdc-feature-all()) {
}

&:disabled {
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(background-color, transparent);

color: $mdc-button-disabled-ink-color;
}

@include mdc-feature-targets($feat-structure) {
cursor: default;
pointer-events: none;
Expand Down Expand Up @@ -422,32 +457,23 @@ $query: mdc-feature-all()) {
}

@mixin mdc-button--outlined_($query) {
$feat-color: mdc-feature-create-target($query, color);
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-button-outline-width($mdc-button-outlined-border-width, $query: $query);
@include mdc-button-outline-color(primary, $query);
@include mdc-button-disabled-outline-color($mdc-button-disabled-ink-color, $query);

@include mdc-feature-targets($feat-structure) {
border-style: solid;
}

&:disabled {
@include mdc-feature-targets($feat-color) {
border-color: $mdc-button-disabled-ink-color;
}
}
}

@mixin mdc-button--filled_($query) {
$feat-color: mdc-feature-create-target($query, color);
$feat-structure: mdc-feature-create-target($query, structure);

@include mdc-button-horizontal-padding($mdc-button-contained-horizontal-padding, $query);

&:disabled {
@include mdc-feature-targets($feat-color) {
background-color: rgba(mdc-theme-prop-value(on-surface), .12);
color: $mdc-button-disabled-ink-color;
}
}
@include mdc-button-container-fill-color(primary, $query);
@include mdc-button-ink-color(on-primary, $query);
@include mdc-button-disabled-container-fill-color($mdc-button-disabled-container-fill-color, $query);
@include mdc-button-disabled-ink-color($mdc-button-disabled-ink-color, $query);
}

@mixin mdc-button--raised_($query) {
Expand All @@ -473,3 +499,57 @@ $query: mdc-feature-all()) {
transition: mdc-elevation-transition-value();
}
}

///
/// Sets the container fill color to the given color. This mixin should be
/// wrapped in a selector that qualifies button state.
/// @access private
///
@mixin mdc-button-container-fill-color_($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(background-color, $color, $edgeOptOut: true);
}
}

///
/// Sets the outline color to the given color. This mixin should be
/// wrapped in a selector that qualifies button state.
/// @access private
///
@mixin mdc-button-outline-color_($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(border-color, $color);
}
}

///
/// Sets the icon color to the given color. This mixin should be
/// wrapped in a selector that qualifies button state.
/// @access private
///
@mixin mdc-button-icon-color_($color, $query: mdc-feature-all()) {
$feat-color: mdc-feature-create-target($query, color);

.mdc-button__icon {
@include mdc-feature-targets($feat-color) {
@include mdc-theme-prop(color, $color);
}
}
}

///
/// Sets the ink color to the given color. This mixin should be
/// wrapped in a selector that qualifies button state.
/// @access private
///
@mixin mdc-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);
}
}
1 change: 1 addition & 0 deletions packages/mdc-button/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,5 @@ $mdc-button-density-config: (
$mdc-button-outlined-border-width: 1px !default;
$mdc-button-shape-radius: small !default;

$mdc-button-disabled-container-fill-color: rgba(mdc-theme-prop-value(on-surface), .12);
$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
32 changes: 16 additions & 16 deletions test/screenshot/golden.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,11 @@
}
},
"spec/mdc-button/mixins/container-fill-color.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/10/14_25_41_111/spec/mdc-button/mixins/container-fill-color.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/container-fill-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-button/mixins/container-fill-color.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/container-fill-color.html.windows_firefox_62.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/container-fill-color.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/container-fill-color.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/container-fill-color.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/container-fill-color.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/density.html": {
Expand Down Expand Up @@ -72,19 +72,19 @@
}
},
"spec/mdc-button/mixins/icon-color.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/15_45_24_303/spec/mdc-button/mixins/icon-color.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/icon-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-button/mixins/icon-color.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/10/15_45_24_303/spec/mdc-button/mixins/icon-color.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/icon-color.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/icon-color.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/icon-color.html.windows_ie_11.png"
}
},
"spec/mdc-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-button/mixins/ink-color.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-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-button/mixins/ink-color.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/ink-color.html.windows_firefox_62.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/ink-color.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/ink-color.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/ink-color.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/ink-color.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/shape-radius.html": {
Expand All @@ -96,11 +96,11 @@
}
},
"spec/mdc-button/mixins/stroke-color.html": {
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/07/12/16_55_31_009/spec/mdc-button/mixins/stroke-color.html?utm_source=golden_json",
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/stroke-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-button/mixins/stroke-color.html.windows_chrome_74.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/stroke-color.html.windows_firefox_65.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/16/15_32_13_143/spec/mdc-button/mixins/stroke-color.html.windows_ie_11.png"
"desktop_windows_chrome@77": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/stroke-color.html.windows_chrome_77.png",
"desktop_windows_firefox@69": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/stroke-color.html.windows_firefox_69.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/11/05/23_59_34_394/spec/mdc-button/mixins/stroke-color.html.windows_ie_11.png"
}
},
"spec/mdc-button/mixins/stroke-width.html": {
Expand Down
5 changes: 5 additions & 0 deletions test/screenshot/spec/mdc-button/fixture.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
@import "../mixins";

$custom-button-color: $material-color-red-300;
$custom-disabled-button-color: rgba(purple, .3);
$custom-button-custom-shape-radius: 50%;
$custom-button-custom-outline-width: 4px;
$custom-button-custom-horizontal-padding: 24px;
Expand All @@ -46,10 +47,12 @@ $custom-button-custom-horizontal-padding: 24px;

.custom-button--ink-color {
@include mdc-button-ink-color($custom-button-color);
@include mdc-button-disabled-ink-color($custom-disabled-button-color);
}

.custom-button--container-fill-color {
@include mdc-button-container-fill-color($custom-button-color);
@include mdc-button-disabled-container-fill-color($custom-disabled-button-color);
}

.custom-button--filled-accessible {
Expand All @@ -58,6 +61,7 @@ $custom-button-custom-horizontal-padding: 24px;

.custom-button--outline-color {
@include mdc-button-outline-color($custom-button-color);
@include mdc-button-disabled-outline-color($custom-disabled-button-color);
}

.custom-button--outline-width {
Expand All @@ -70,6 +74,7 @@ $custom-button-custom-horizontal-padding: 24px;

.custom-button--icon-color {
@include mdc-button-icon-color($custom-button-color);
@include mdc-button-disabled-icon-color($custom-disabled-button-color);
}

.custom-button--horizontal-padding {
Expand Down

0 comments on commit b5eb51e

Please sign in to comment.