Skip to content

Commit

Permalink
fix(select): Update disabled state
Browse files Browse the repository at this point in the history 
We'll update them under the philosophy that they should stay consistent with textfield - imagine a textfield and a select menu next to each other.

BREAKING CHANGE: variable `$outline-disabled-border` renamed to `$disabled-outline-color`; icon variable `$icon-opacity` removed, use alpha channel of `$icon-color` instead.

PiperOrigin-RevId: 310378848
  • Loading branch information
@allan-chen @copybara-github
allan-chen authored and copybara-github committed May 7, 2020
1 parent deb212d commit f83e008
Show file tree
Hide file tree
Showing 8 changed files with 143 additions and 89 deletions.
9 changes: 8 additions & 1 deletion packages/mdc-select/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -561,16 +561,23 @@ Mixin | Description
--- | ---
`ink-color($color)` | Customizes the color of the selected item displayed in the select.
`container-fill-color($color)` | Customizes the background color of the select.
`disabled-container-fill-color($color)` | Customizes the background color of the select when disabled.
`dropdown-icon-color($color)` | Customizes the dropdown icon color of the select.
`focused-dropdown-icon-color($color)` | Customizes the dropdown icon color of the select when focused.
`disabled-dropdown-icon-color($color)` | Customizes the dropdown icon color of the select when disabled.
`label-color($color)` | Customizes the label color of the select in the unfocused state.
`focused-label-color($color)` | Customizes the label color of the select when focused.
`disabled-label-color($color)` | Customizes the label color of the select when disabled.
`bottom-line-color($color)` | Customizes the color of the default bottom line of the select.
`hover-bottom-line-color($color)` | Customizes the color of the bottom line when the select is hovered.
`focused-bottom-line-color($color)` | Customizes the color of the bottom line of the select when focused.
`disabled-bottom-line-color($color)` | Customizes the color of the bottom line when the select is disabled.
`shape-radius($radius, $rtl-reflexive)` | Sets rounded shape to boxed select variant with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`outline-color($color)` | Customizes the color of the notched outline.
`outline-shape-radius($radius, $rtl-reflexive)` | Sets the border radius of of the outlined select variant. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`focused-outline-color($color)` | Customizes the color of the outline of the select when focused.
`hover-outline-color($color)` | Customizes the color of the outline when the select is hovered.
`disabled-outline-color($color)` | Customizes the color of the notched outline when the select is disabled.
`outline-shape-radius($radius, $rtl-reflexive)` | Sets the border radius of the outlined select variant. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
`height($height)` | Sets height of the filled select variant.
`min-width($min-width)` | Sets the min-width of the select and its menu.

Expand Down
186 changes: 111 additions & 75 deletions packages/mdc-select/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
@use "@material/typography/mixins" as typography-mixins;
@use "./helper-text/mixins" as helper-text-mixins;
@use "./icon/variables" as icon-variables;
@use "./icon/mixins" as icon-mixins;
@use "./variables";

@mixin core-styles($query: feature-targeting-functions.all()) {
Expand All @@ -57,7 +58,10 @@
@include ink-color(variables.$ink-color, $query: $query);
@include label-color(variables.$label-color, $query: $query);
@include bottom-line-color(variables.$bottom-line-idle-color, $query: $query);
@include dropdown-icon-color(variables.$dropdown-icon-color, $query: $query);
@include focused-dropdown-icon-color(primary, $query: $query);
@include helper-text-mixins.helper-text-color(variables.$helper-text-color, $query: $query);
@include icon-mixins.icon-color(variables.$icon-color, $query: $query);

// Focused state colors
@include focused-bottom-line-color(primary, $query: $query);
Expand All @@ -66,6 +70,15 @@
// Hover state colors
@include hover-bottom-line-color(variables.$bottom-line-hover-color, $query: $query);

// Disabled state colors
@include disabled-container-fill-color(variables.$disabled-fill-color, $query: $query);
@include disabled-label-color(variables.$disabled-label-color, $query: $query);
@include disabled-bottom-line-color(variables.$disabled-bottom-line-color, $query: $query);
@include disabled-dropdown-icon-color(variables.$disabled-dropdown-icon-color, $query: $query);
@include disabled-ink-color(variables.$disabled-ink-color, $query: $query);
@include helper-text-mixins.disabled-helper-text-color(variables.$disabled-helper-text-color, $query: $query);
@include icon-mixins.disabled-icon-color(variables.$disabled-icon-color, $query: $query);

// Floating label private mixin
@include floating-label_($query: $query);

Expand All @@ -86,7 +99,6 @@

&__dropdown-icon {
@include _dropdown-icon-base($query: $query);
@include _dropdown-icon-color(variables.$dropdown-icon-color, $query: $query);
@include _dropdown-icon-inactive($query: $query);

@include feature-targeting-mixins.targets($feat-structure) {
Expand All @@ -104,10 +116,6 @@
pointer-events: none;
}

.mdc-select--focused & {
@include _dropdown-icon-color(primary, $query: $query);
}

.mdc-select--activated & {
@include _dropdown-icon-active($query: $query);
}
Expand All @@ -126,8 +134,8 @@
cursor: pointer;
}

@include focused-line-ripple_ {
&::after {
@include _if-focused {
&.mdc-line-ripple::after {
@include feature-targeting-mixins.targets($feat-structure) {
transform: scale(1, 2);
opacity: 1;
Expand All @@ -153,6 +161,7 @@
@include focused-bottom-line-color(variables.$error-color, $query: $query);
@include focused-label-color(variables.$error-color, $query: $query);
@include helper-text-mixins.helper-text-validation-color(variables.$error-color, $query: $query);
@include dropdown-icon-color(variables.$error-color, $query: $query);

// Hover state colors
@include hover-bottom-line-color(variables.$error-color, $query: $query);
Expand Down Expand Up @@ -253,67 +262,123 @@
}

@mixin ink-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled) {
@include _if-enabled {
@include ink-color_($color, $query: $query);
}
}

@mixin disabled-ink-color($color, $query: feature-targeting-functions.all()) {
@include _if-disabled {
@include ink-color_($color, $query: $query);
}
}

@mixin container-fill-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled) {
@include _if-enabled {
@include container-fill-color_($color, $query: $query);
}
}

@mixin disabled-container-fill-color($color, $query: feature-targeting-functions.all()) {
@include _if-disabled {
@include container-fill-color_($color, $query: $query);
}
}

@mixin dropdown-icon-color($color, $query: feature-targeting-functions.all()) {
@include _if-enabled {
@include _dropdown-icon-color($color, $query: $query);
}
}

@mixin disabled-dropdown-icon-color($color, $query: feature-targeting-functions.all()) {
@include _if-disabled {
@include _dropdown-icon-color($color, $query: $query);
}
}

@mixin focused-dropdown-icon-color($color, $query: feature-targeting-functions.all()) {
@include _if-enabled {
&.mdc-select--focused {
@include _dropdown-icon-color($color, $query: $query);
}
}
}

@mixin focused-label-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled) {
@include _if-enabled {
&.mdc-select--focused .mdc-floating-label {
@include floating-label-mixins.ink-color(theme-variables.prop-value($color), $query: $query);
}
}
}

@mixin hover-bottom-line-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled):hover {
@mixin bottom-line-color($color, $query: feature-targeting-functions.all()) {
@include _if-enabled {
@include bottom-line-color_($color, $query: $query);
}
}

@mixin bottom-line-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled) {
@mixin disabled-bottom-line-color($color, $query: feature-targeting-functions.all()) {
@include _if-disabled {
@include bottom-line-color_($color, $query: $query);
}
}

@mixin hover-bottom-line-color($color, $query: feature-targeting-functions.all()) {
@include _if-enabled {
&:hover {
@include bottom-line-color_($color, $query: $query);
}
}
}

@mixin focused-bottom-line-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled) {
@include _if-enabled {
@include focused-line-ripple-color_($color, $query: $query);
}
}

@mixin label-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled) .mdc-floating-label {
@include floating-label-mixins.ink-color($color, $query: $query);
@include _if-enabled {
.mdc-floating-label {
@include floating-label-mixins.ink-color($color, $query: $query);
}
}
}

@mixin disabled-label-color($color, $query: feature-targeting-functions.all()) {
@include _if-disabled {
.mdc-floating-label {
@include floating-label-mixins.ink-color($color, $query: $query);
}
}
}

@mixin outline-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled) {
@include _if-enabled {
@include outline-color_($color, $query: $query);
}
}

@mixin hover-outline-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled) {
@include _if-enabled {
@include hover-outline-color_($color, $query: $query);
}
}

@mixin focused-outline-color($color, $query: feature-targeting-functions.all()) {
&:not(.mdc-select--disabled) {
@include _if-enabled {
@include focused-outline-color_($color, $query: $query);
}
}

@mixin disabled-outline-color($color, $query: feature-targeting-functions.all()) {
@include _if-disabled {
@include outline-color_($color, $query: $query);
}
}

@mixin shape-radius($radius, $rtl-reflexive: false, $query: feature-targeting-functions.all()) {
@if list.length($radius) > 2 {
@error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
Expand Down Expand Up @@ -368,20 +433,26 @@
}

// Private
@mixin focused-line-ripple_ {
&.mdc-select--focused .mdc-line-ripple {
/// Selector for focused state
/// @access private
@mixin _if-focused {
&.mdc-select--focused {
@content;
}
}

@mixin focused-outline_ {
&.mdc-select--focused .mdc-notched-outline {
/// Selector for enabled state
/// @access private
@mixin _if-enabled {
&:not(.mdc-select--disabled) {
@content;
}
}

@mixin focused-outline-idle_ {
&.mdc-select--focused {
/// Selector for disabled state
/// @access private
@mixin _if-disabled {
&.mdc-select--disabled {
@content;
}
}
Expand Down Expand Up @@ -413,8 +484,10 @@
}

@mixin focused-line-ripple-color_($color, $query: feature-targeting-functions.all()) {
@include focused-line-ripple_ {
@include line-ripple-mixins.active-color($color, $query: $query);
@include _if-focused {
.mdc-line-ripple {
@include line-ripple-mixins.active-color($color, $query: $query);
}
}
}

Expand Down Expand Up @@ -443,7 +516,9 @@
$feat-color: feature-targeting-functions.create-target($query, color);

@include feature-targeting-mixins.targets($feat-color) {
@include theme-mixins.prop(fill, $color);
.mdc-select__dropdown-icon {
@include theme-mixins.prop(fill, $color);
}
}
}

Expand Down Expand Up @@ -523,9 +598,11 @@
}

@mixin focused-outline-color_($color, $query: feature-targeting-functions.all()) {
@include focused-outline_ {
@include notched-outline-mixins.stroke-width(variables.$outlined-stroke-width, $query: $query);
@include notched-outline-mixins.color($color, $query: $query);
@include _if-focused {
.mdc-notched-outline {
@include notched-outline-mixins.stroke-width(variables.$outlined-stroke-width, $query: $query);
@include notched-outline-mixins.color($color, $query: $query);
}
}
}

Expand Down Expand Up @@ -632,51 +709,8 @@
}

@mixin disabled_($query: feature-targeting-functions.all()) {
$feat-color: feature-targeting-functions.create-target($query, color);
$feat-structure: feature-targeting-functions.create-target($query, structure);

@include container-fill-color_(variables.$disabled-fill-color, $query: $query);

.mdc-floating-label {
@include floating-label-mixins.ink-color(variables.$disabled-label-color, $query: $query);
}

.mdc-select__dropdown-icon {
@include _dropdown-icon-color(variables.$disabled-dropdown-icon-color, $query: $query);
}

.mdc-line-ripple {
@include line-ripple-mixins.inactive-color(variables.$disabled-ink-color, $query: $query);

&::before {
@include feature-targeting-mixins.targets($feat-structure) {
// TODO(b/146080006): Fix incorrect styling
border-bottom-style: dotted;
}
}
}

.mdc-select__icon {
@include feature-targeting-mixins.targets($feat-color) {
@include theme-mixins.prop(color, variables.$disabled-icon-color);
}
}

.mdc-select__selected-text {
@include feature-targeting-mixins.targets($feat-color) {
@include theme-mixins.prop(color, variables.$disabled-ink-color);
}

@include feature-targeting-mixins.targets($feat-structure) {
pointer-events: none;
}
}

&.mdc-select--outlined {
@include container-fill-color_(transparent, $query: $query);
@include outline-color_(variables.$outlined-disabled-border, $query: $query);
}

@include feature-targeting-mixins.targets($feat-structure) {
cursor: default;
pointer-events: none;
Expand All @@ -691,6 +725,8 @@
@include outline-color(variables.$outlined-idle-border, $query: $query);
@include hover-outline-color(variables.$outlined-hover-border, $query: $query);
@include focused-outline-color(primary, $query: $query);
@include disabled-outline-color(variables.$disabled-outline-color, $query: $query);
@include disabled-container-fill-color(transparent, $query: $query);
@include outline-shape-radius(small, $query: $query);
@include container-fill-color(transparent, $query: $query);

Expand Down
10 changes: 5 additions & 5 deletions packages/mdc-select/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,17 +53,17 @@ $fill-color: color.mix(variables.prop-value(on-surface), variables.prop-value(su

// Disabled Styles
$disabled-label-color: rgba(variables.prop-value(on-surface), .38) !default;
$disabled-icon-color: rgba(variables.prop-value(on-surface), .38) !default;
$disabled-ink-color: rgba(variables.prop-value(on-surface), .38) !default;
$disabled-icon-color: rgba(variables.prop-value(on-surface), .38) !default;$disabled-ink-color: rgba(variables.prop-value(on-surface), .38) !default;
$disabled-fill-color: color.mix(variables.prop-value(on-surface), variables.prop-value(surface), 2%) !default;
$disabled-fill-border: rgba(variables.prop-value(on-surface), .06) !default;
$disabled-helper-text-color: rgba(variables.prop-value(on-surface), .38) !default;
$disabled-bottom-line-color: rgba(variables.prop-value(on-surface), .06) !default;
$disabled-dropdown-icon-color: rgba(variables.prop-value(on-surface), .38) !default;
$disabled-outline-color: rgba(variables.prop-value(on-surface), .06) !default;

$outlined-idle-border: rgba(variables.prop-value(on-surface), .38) !default;
$outlined-hover-border: rgba(variables.prop-value(on-surface), .87) !default;

// should be .06 after mdc-select opacity is applied
$outlined-disabled-border: rgba(variables.prop-value(on-surface), .16) !default;

$label-position-y: 106% !default;
$outline-label-offset: 16px !default;
$outlined-label-position-y: get-outlined-label-position-y($height) !default;
Expand Down
Loading

0 comments on commit f83e008

Please sign in to comment.