From b5c6d66b40765c4eacf079e91230506339c1346b Mon Sep 17 00:00:00 2001 From: Allan Chen Date: Tue, 29 Oct 2019 10:51:36 -0700 Subject: [PATCH] feat(radio): Add disabled state color mixins (#5168) --- packages/mdc-radio/README.md | 9 +- packages/mdc-radio/_mixins.scss | 197 ++++++++++++++++---- packages/mdc-radio/_variables.scss | 2 +- test/screenshot/golden.json | 8 +- test/screenshot/spec/mdc-radio/fixture.scss | 4 + 5 files changed, 175 insertions(+), 45 deletions(-) diff --git a/packages/mdc-radio/README.md b/packages/mdc-radio/README.md index 2c7849a16d3..f810d009dea 100644 --- a/packages/mdc-radio/README.md +++ b/packages/mdc-radio/README.md @@ -127,9 +127,12 @@ MDC Radio uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the Mixin | Description --- | --- -`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked radio button -`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked radio button -`mdc-radio-ink-color($color)` | Sets the ink color of a radio button +`mdc-radio-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, enabled radio button +`mdc-radio-checked-stroke-color($color)` | Sets the stroke color of a checked, enabled radio button +`mdc-radio-ink-color($color)` | Sets the ink color of an enabled radio button +`mdc-radio-disabled-unchecked-stroke-color($color)` | Sets the stroke color of an unchecked, disabled radio button +`mdc-radio-disabled-checked-stroke-color($color)` | Sets the stroke color of a checked, disabled radio button +`mdc-radio-disabled-ink-color($color)` | Sets the ink color of a disabled radio button `mdc-radio-focus-indicator-color($color)` | Sets the color of the focus indicator `mdc-radio-touch-target($size, $ripple-size)` | Sets radio touch target size which can be more than the ripple size. Param `$ripple-size` is required for custom ripple size, defaults to `$mdc-radio-ripple-size`. `mdc-radio-ripple-size($size)` | Sets custom ripple size of radio. diff --git a/packages/mdc-radio/_mixins.scss b/packages/mdc-radio/_mixins.scss index ebf1290858a..21774060e5b 100644 --- a/packages/mdc-radio/_mixins.scss +++ b/packages/mdc-radio/_mixins.scss @@ -52,11 +52,14 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple"; @include mdc-touch-target-wrapper($query); .mdc-radio { - @include mdc-radio-unchecked-stroke-color($mdc-radio-unchecked-color, $query); - @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color, $query); - @include mdc-radio-ink-color($mdc-radio-baseline-theme-color, $query); - @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color, $query); - @include mdc-radio-density($mdc-radio-density-scale, $query); + @include mdc-radio-unchecked-stroke-color($mdc-radio-unchecked-color, $query: $query); + @include mdc-radio-checked-stroke-color($mdc-radio-baseline-theme-color, $query: $query); + @include mdc-radio-ink-color($mdc-radio-baseline-theme-color, $query: $query); + @include mdc-radio-disabled-unchecked-stroke-color($mdc-radio-disabled-circle-color, $query: $query); + @include mdc-radio-disabled-checked-stroke-color($mdc-radio-disabled-circle-color, $query: $query); + @include mdc-radio-disabled-ink-color($mdc-radio-disabled-circle-color, $query: $query); + @include mdc-radio-focus-indicator-color($mdc-radio-baseline-theme-color, $query: $query); + @include mdc-radio-density($mdc-radio-density-scale, $query: $query); @include mdc-feature-targets($feat-structure) { display: inline-block; @@ -209,18 +212,6 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple"; @include mdc-feature-targets($feat-structure) { cursor: default; } - - .mdc-radio__outer-circle { - @include mdc-feature-targets($feat-color) { - border-color: $mdc-radio-circle-color; - } - } - - .mdc-radio__inner-circle { - @include mdc-feature-targets($feat-color) { - border-color: $mdc-radio-circle-color; - } - } } } @@ -269,36 +260,63 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple"; } } +/// +/// Sets the stroke color of an unchecked, enabled radio button. +/// @param {Color} $color - The desired stroke color. +/// @mixin mdc-radio-unchecked-stroke-color($color, $query: mdc-feature-all()) { - $feat-color: mdc-feature-create-target($query, color); - - // stylelint-disable-next-line selector-max-specificity - .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle { - @include mdc-feature-targets($feat-color) { - @include mdc-theme-prop(border-color, $color); - } + @include mdc-radio-if-enabled-unchecked_ { + @include mdc-radio-stroke-color_($color, $query: $query); } } +/// +/// Sets the stroke color of a checked, enabled radio button. +/// @param {Color} $color - The desired stroke color. +/// @mixin mdc-radio-checked-stroke-color($color, $query: mdc-feature-all()) { - $feat-color: mdc-feature-create-target($query, color); - - // stylelint-disable-next-line selector-max-specificity - .mdc-radio__native-control:enabled:checked + .mdc-radio__background .mdc-radio__outer-circle { - @include mdc-feature-targets($feat-color) { - @include mdc-theme-prop(border-color, $color); - } + @include mdc-radio-if-enabled-checked_ { + @include mdc-radio-stroke-color_($color, $query:$query); } } +/// +/// Sets the ink color of an enabled radio button. +/// @param {Color} $color - The desired ink color. +/// @mixin mdc-radio-ink-color($color, $query: mdc-feature-all()) { - $feat-color: mdc-feature-create-target($query, color); + @include mdc-radio-if-enabled_ { + @include mdc-radio-ink-color_($color, $query: $query); + } +} - // stylelint-disable-next-line selector-max-specificity - .mdc-radio__native-control:enabled + .mdc-radio__background .mdc-radio__inner-circle { - @include mdc-feature-targets($feat-color) { - @include mdc-theme-prop(border-color, $color); - } +/// +/// Sets the stroke color of an unchecked, disabled radio button. +/// @param {Color} $color - The desired stroke color. +/// +@mixin mdc-radio-disabled-unchecked-stroke-color($color, $query: mdc-feature-all()) { + @include mdc-radio-if-disabled-unchecked_ { + @include mdc-radio-stroke-color_($color, $query: $query); + } +} + +/// +/// Sets the stroke color of a checked, disabled radio button. +/// @param {Color} $color - The desired stroke color. +/// +@mixin mdc-radio-disabled-checked-stroke-color($color, $query: mdc-feature-all()) { + @include mdc-radio-if-disabled-checked_ { + @include mdc-radio-stroke-color_($color, $query: $query); + } +} + +/// +/// Sets the ink color of a disabled radio button. +/// @param {Color} $color - The desired ink color +/// +@mixin mdc-radio-disabled-ink-color($color, $query: mdc-feature-all()) { + @include mdc-radio-if-disabled_ { + @include mdc-radio-ink-color_($color, $query: $query); } } @@ -395,3 +413,108 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple"; margin: 0; } } + +/// +/// Helps select the radio background only when its native control is in the +/// enabled state. +/// @access private +/// +@mixin mdc-radio-if-enabled_ { + .mdc-radio__native-control:enabled + { + @content; + } +} + +/// +/// Helps select the radio background only when its native control is in the +/// enabled & unchecked state. +/// @access private +/// +@mixin mdc-radio-if-enabled-unchecked_ { + .mdc-radio__native-control:enabled:not(:checked) + { + @content; + } +} + +/// +/// Helps select the radio background only when its native control is in the +/// enabled & checked state. +/// @access private +/// +@mixin mdc-radio-if-enabled-checked_ { + .mdc-radio__native-control:enabled:checked + { + @content; + } +} + +/// +/// Helps select the radio background only when its native control is in the +/// disabled state. +/// @access private +/// +@mixin mdc-radio-if-disabled_ { + [aria-disabled="true"] .mdc-radio__native-control, + .mdc-radio__native-control:disabled { + + { + @content; + } + } +} + +/// +/// Helps select the radio background only when its native control is in the +/// disabled & unchecked state. +/// @access private +/// +@mixin mdc-radio-if-disabled-unchecked_ { + [aria-disabled="true"] .mdc-radio__native-control, + .mdc-radio__native-control:disabled { + &:not(:checked) + { + @content; + } + } +} + +/// +/// Helps select the radio background only when its native control is in the +/// disabled & checked state. +/// @access private +/// +@mixin mdc-radio-if-disabled-checked_ { + [aria-disabled="true"] .mdc-radio__native-control, + .mdc-radio__native-control:disabled { + &:checked + { + @content; + } + } +} + +/// +/// Sets the ink color for radio. This is wrapped in a mixin +/// that qualifies state such as `mdc-radio-if-enabled_` +/// @access private +/// +@mixin mdc-radio-ink-color_($color, $query: mdc-feature-all()) { + $feat-color: mdc-feature-create-target($query, color); + + .mdc-radio__background .mdc-radio__inner-circle { + @include mdc-feature-targets($feat-color) { + @include mdc-theme-prop(border-color, $color); + } + } +} + +/// +/// Sets the stroke color for radio. This is wrapped in a mixin +/// that qualifies state such as `mdc-radio-if-enabled_` +/// @access private +/// +@mixin mdc-radio-stroke-color_($color, $query: mdc-feature-all()) { + $feat-color: mdc-feature-create-target($query, color); + + .mdc-radio__background .mdc-radio__outer-circle { + @include mdc-feature-targets($feat-color) { + @include mdc-theme-prop(border-color, $color); + } + } +} diff --git a/packages/mdc-radio/_variables.scss b/packages/mdc-radio/_variables.scss index 23064639dd9..db25ce90812 100644 --- a/packages/mdc-radio/_variables.scss +++ b/packages/mdc-radio/_variables.scss @@ -29,7 +29,7 @@ $mdc-radio-transition-duration: 120ms !default; $mdc-radio-ripple-opacity: .14 !default; $mdc-radio-baseline-theme-color: secondary !default; $mdc-radio-unchecked-color: rgba(mdc-theme-prop-value(on-surface), .54) !default; -$mdc-radio-circle-color: rgba(mdc-theme-prop-value(on-surface), .26) !default; +$mdc-radio-disabled-circle-color: rgba(mdc-theme-prop-value(on-surface), .26) !default; $mdc-radio-minimum-size: 28px !default; $mdc-radio-maximum-size: $mdc-radio-ripple-size !default; diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 23e1446fcce..38f732e98a3 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -960,11 +960,11 @@ } }, "spec/mdc-radio/mixins/mixins.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/20/22_06_30_583/spec/mdc-radio/mixins/mixins.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/10/10/22_20_16_416/spec/mdc-radio/mixins/mixins.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/20/22_06_30_583/spec/mdc-radio/mixins/mixins.html.windows_chrome_76.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/20/22_06_30_583/spec/mdc-radio/mixins/mixins.html.windows_firefox_69.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/20/22_06_30_583/spec/mdc-radio/mixins/mixins.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/10/10/22_20_16_416/spec/mdc-radio/mixins/mixins.html.windows_chrome_77.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/10/10/22_20_16_416/spec/mdc-radio/mixins/mixins.html.windows_firefox_69.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/allanchen/2019/10/10/22_20_16_416/spec/mdc-radio/mixins/mixins.html.windows_ie_11.png" } }, "spec/mdc-rtl/variables/include.html": { diff --git a/test/screenshot/spec/mdc-radio/fixture.scss b/test/screenshot/spec/mdc-radio/fixture.scss index d4977b0dde1..0955f45869b 100644 --- a/test/screenshot/spec/mdc-radio/fixture.scss +++ b/test/screenshot/spec/mdc-radio/fixture.scss @@ -25,6 +25,7 @@ @import "../mixins"; $custom-radio-color: $material-color-red-300; +$custom-disabled-radio-color: rgba(purple, .4); .test-cell--radio { @include test-cell-size(71, 91); @@ -53,14 +54,17 @@ $custom-radio-color: $material-color-red-300; .custom-radio--unchecked-stroke-color { @include mdc-radio-unchecked-stroke-color($custom-radio-color); + @include mdc-radio-disabled-unchecked-stroke-color($custom-disabled-radio-color); } .custom-radio--checked-stroke-color { @include mdc-radio-checked-stroke-color($custom-radio-color); + @include mdc-radio-disabled-checked-stroke-color($custom-disabled-radio-color); } .custom-radio--ink-color { @include mdc-radio-ink-color($custom-radio-color); + @include mdc-radio-disabled-ink-color($custom-disabled-radio-color); } .custom-radio-density {