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

feat(radio): Add disabled state color mixins #5168

Merged
merged 7 commits into from
Oct 29, 2019
Merged

feat(radio): Add disabled state color mixins #5168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bde69f8
feat(radio): Add disabled state color mixins
allan-chen Oct 10, 2019
b10d74d
lint
allan-chen Oct 11, 2019
90a6f26
refactor to remove duplicate code
allan-chen Oct 15, 2019
f9b11c2
remove unused line
allan-chen Oct 16, 2019
37ad1c5
update in accordance with feedback to checkbox PR
allan-chen Oct 22, 2019
71440cf
fix name
allan-chen Oct 22, 2019
2e36e17
update disabled var name and make named param
allan-chen Oct 28, 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
9 changes: 6 additions & 3 deletions packages/mdc-radio/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
197 changes: 160 additions & 37 deletions packages/mdc-radio/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,14 @@ $mdc-radio-ripple-target: ".mdc-radio__ripple";
$feat-structure: mdc-feature-create-target($query, structure);

.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;
Expand Down Expand Up @@ -207,18 +210,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;
}
}
}
}

Expand Down Expand Up @@ -267,36 +258,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);
}
}

Expand Down Expand Up @@ -393,3 +411,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,
allan-chen marked this conversation as resolved.
Show resolved Hide resolved
.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);
}
}
}
2 changes: 1 addition & 1 deletion packages/mdc-radio/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
10 changes: 5 additions & 5 deletions test/screenshot/golden.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -952,11 +952,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",
allan-chen marked this conversation as resolved.
Show resolved Hide resolved
"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": {
Expand Down Expand Up @@ -1919,4 +1919,4 @@
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/08/08/08_47_39_000/spec/mdc-typography/mixins/mixins.html.windows_ie_11.png"
}
}
}
}
4 changes: 4 additions & 0 deletions test/screenshot/spec/mdc-radio/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-radio-color: $material-color-red-300;
$custom-disabled-radio-color: rgba(purple, .4);

.test-cell--radio {
@include test-cell-size(71, 91);
Expand Down Expand Up @@ -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 {
Expand Down