From 1da6a494e57d6fe1c7359e17248d2087d836ccb6 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 3 Mar 2021 15:12:56 -0800 Subject: [PATCH 1/2] fix(material-experimental/mdc-select): correct some differences between mat-select and native select --- .../_form-field-native-select.scss | 67 +++++++++++++++---- .../mdc-select/select.scss | 1 - 2 files changed, 55 insertions(+), 13 deletions(-) diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.scss index c3b0773cde31..4304949014fe 100644 --- a/src/material-experimental/mdc-form-field/_form-field-native-select.scss +++ b/src/material-experimental/mdc-form-field/_form-field-native-select.scss @@ -1,7 +1,9 @@ @use 'sass:map'; +@use '../mdc-helpers/mdc-helpers'; @use '../../material/core/theming/theming'; @use '../../cdk/a11y/a11y'; @use '../../material/core/theming/palette'; +@use '@material/theme/theme-color' as mdc-theme-color; // Width of the Material Design form-field select arrow. $mat-form-field-select-arrow-width: 10px; @@ -68,7 +70,6 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt border-right: ($mat-form-field-select-arrow-width / 2) solid transparent; border-top: $mat-form-field-select-arrow-height solid; position: absolute; - top: 50%; right: 0; // Make the arrow non-clickable so the user can click on the form control under it. @@ -92,20 +93,62 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt } } +// Gets the color to use for some text that is highlighted while a select has focus. +@function _get-focused-arrow-color($palette) { + @return rgba(mdc-theme-color.prop-value($palette), 0.87); +} + @mixin private-form-field-native-select-color($config) { - select.mat-mdc-input-element { - // On dark themes we set the native `select` color to some shade of white, - // however the color propagates to all of the `option` elements, which are - // always on a white background inside the dropdown, causing them to blend in. - // Since we can't change background of the dropdown, we need to explicitly - // reset the color of the options to something dark. - @if (map.get($config, is-dark)) { - option { - color: palette.$dark-primary-text; + @include mdc-helpers.mat-using-mdc-theme($config) { + $_arrow-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54); + $_disabled-arrow-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38); + + select.mat-mdc-input-element { + // On dark themes we set the native `select` color to some shade of white, + // however the color propagates to all of the `option` elements, which are + // always on a white background inside the dropdown, causing them to blend in. + // Since we can't change background of the dropdown, we need to explicitly + // reset the color of the options to something dark. + @if (map.get($config, is-dark)) { + option { + color: palette.$dark-primary-text; + } + + option:disabled { + color: palette.$dark-disabled-text; + } + } + } + + .mat-mdc-form-field-type-mat-native-select { + .mat-mdc-form-field-infix::after { + color: $_arrow-color; } - option:disabled { - color: palette.$dark-disabled-text; + &.mat-focused { + &.mat-primary { + .mat-mdc-form-field-infix::after { + color: _get-focused-arrow-color(primary); + } + } + + &.mat-accent { + .mat-mdc-form-field-infix::after { + color: _get-focused-arrow-color(secondary); + } + } + + &.mat-warn { + .mat-mdc-form-field-infix::after { + color: _get-focused-arrow-color(error); + } + } + } + + &.mat-form-field-disabled { + .mat-mdc-form-field-infix::after { + color: $_disabled-arrow-color; + } } } } diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss index 74e59e0a97b1..09e494ac80a2 100644 --- a/src/material-experimental/mdc-select/select.scss +++ b/src/material-experimental/mdc-select/select.scss @@ -61,7 +61,6 @@ $scale: 0.75 !default; } .mat-mdc-select-arrow { - margin: 0 $mat-select-arrow-margin; width: $mat-select-arrow-size * 2; height: $mat-select-arrow-size; position: relative; From ff52be45f67ab61be16355128d1a4daf2a6e0851 Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Thu, 4 Mar 2021 10:14:26 -0800 Subject: [PATCH 2/2] fixup! fix(material-experimental/mdc-select): correct some differences between --- .../mdc-form-field/_form-field-native-select.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/material-experimental/mdc-form-field/_form-field-native-select.scss b/src/material-experimental/mdc-form-field/_form-field-native-select.scss index 4304949014fe..d1d61429e173 100644 --- a/src/material-experimental/mdc-form-field/_form-field-native-select.scss +++ b/src/material-experimental/mdc-form-field/_form-field-native-select.scss @@ -100,8 +100,10 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt @mixin private-form-field-native-select-color($config) { @include mdc-helpers.mat-using-mdc-theme($config) { - $_arrow-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54); - $_disabled-arrow-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38); + // These values are taken from the MDC select implementation: + // https://github.com/material-components/material-components-web/blob/master/packages/mdc-select/_select-theme.scss + $dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54); + $disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38); select.mat-mdc-input-element { // On dark themes we set the native `select` color to some shade of white, @@ -122,7 +124,7 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt .mat-mdc-form-field-type-mat-native-select { .mat-mdc-form-field-infix::after { - color: $_arrow-color; + color: $dropdown-icon-color; } &.mat-focused { @@ -147,7 +149,7 @@ $mat-form-field-select-horizontal-end-padding: $mat-form-field-select-arrow-widt &.mat-form-field-disabled { .mat-mdc-form-field-infix::after { - color: $_disabled-arrow-color; + color: $disabled-dropdown-icon-color; } } }