fix(select): Fix dropdown color/opacity and options background (#3553)

material-components · Sep 19, 2018 · 3e26342 · 3e26342
1 parent 71c7291
commit 3e26342
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/packages/mdc-select/_mixins.scss b/packages/mdc-select/_mixins.scss
@@ -147,7 +147,10 @@
   }
 }
 
-@mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number: 000000, $opacity: .54) {
+@mixin mdc-select-dd-arrow-svg-bg_($fill-hex-number, $opacity) {
+  // Remove leading #
+  $fill-hex-number: str-slice(#{$fill-hex-number}, 2);
+
   background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23#{$fill-hex-number}%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22#{$opacity}%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
 }
 

diff --git a/packages/mdc-select/_variables.scss b/packages/mdc-select/_variables.scss
@@ -27,8 +27,10 @@ $mdc-select-label-padding: 16px;
 $mdc-select-border-radius: 4px;
 
 $mdc-select-ink-color: rgba(mdc-theme-prop-value(on-surface), .87);
+$mdc-select-dropdown-color: mdc-theme-prop-value(on-surface);
 $mdc-select-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);
-$mdc-select-disabled-arrow-color: mdc-theme-prop-value(on-surface);
+$mdc-select-dropdown-opacity: .54;
+$mdc-select-disabled-dropdown-opacity: .37;
 
 $mdc-select-label-color: rgba(mdc-theme-prop-value(on-surface), .6);
 $mdc-select-focused-label-color: rgba(mdc-theme-prop-value(primary), .87);

diff --git a/packages/mdc-select/mdc-select.scss b/packages/mdc-select/mdc-select.scss
@@ -41,7 +41,7 @@
   @include mdc-states-base-color($mdc-select-ink-color);
   @include mdc-states-hover-opacity(mdc-states-opacity($mdc-select-ink-color, hover));
   @include mdc-states-focus-opacity(mdc-states-opacity($mdc-select-ink-color, focus));
-  @include mdc-select-dd-arrow-svg-bg_;
+  @include mdc-select-dd-arrow-svg-bg_($mdc-select-dropdown-color, $mdc-select-dropdown-opacity);
   @include mdc-select-ink-color($mdc-select-ink-color);
   @include mdc-select-label-color($mdc-select-label-color);
   @include mdc-select-bottom-line-color($mdc-select-bottom-line-idle-color);
@@ -89,6 +89,8 @@
 
     // stylelint-disable-next-line selector-max-type, plugin/selector-bem-pattern
     > option {
+      @include mdc-theme-prop(background-color, surface);
+
       color: inherit; // Override default user agent stylesheet
     }
 
@@ -149,7 +151,7 @@
 }
 
 .mdc-select--disabled {
-  @include mdc-select-dd-arrow-svg-bg_($mdc-select-disabled-arrow-color);
+  @include mdc-select-dd-arrow-svg-bg_($mdc-select-dropdown-color, $mdc-select-disabled-dropdown-opacity);
   @include mdc-select-container-fill-color_($mdc-select-box-disabled-fill-color);
 
   .mdc-floating-label {

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -717,12 +717,12 @@
     }
   },
   "spec/mdc-select/classes/disabled.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/10/17_42_51_602/spec/mdc-select/classes/disabled.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/13/01_27_31_830/spec/mdc-select/classes/disabled.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/05/08_47_52_369/spec/mdc-select/classes/disabled.html.windows_chrome_68.png",
-      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/05/20_16_07_201/spec/mdc-select/classes/disabled.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/10/17_42_51_602/spec/mdc-select/classes/disabled.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/05/21_09_40_395/spec/mdc-select/classes/disabled.html.windows_ie_11.png"
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/13/01_27_31_830/spec/mdc-select/classes/disabled.html.windows_chrome_69.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/13/01_27_31_830/spec/mdc-select/classes/disabled.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/13/01_27_31_830/spec/mdc-select/classes/disabled.html.windows_firefox_62.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/13/01_27_31_830/spec/mdc-select/classes/disabled.html.windows_ie_11.png"
     }
   },
   "spec/mdc-select/issues/3230-3496.html": {