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

feat(button): Add disabled state color mixins #5232

Merged
merged 1 commit into from
Nov 7, 2019
Merged

feat(button): Add disabled state color mixins #5232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 8 additions & 4 deletions packages/mdc-button/README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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