fix(select): Fix outlined select not changing color without label

packages/mdc-notched-outline/foundation.js

@@ -99,7 +99,12 @@ class MDCNotchedOutlineFoundation extends MDCFoundation {
     const height = this.adapter_.getHeight();
     const cornerWidth = radius + 1.2;
     const leadingStrokeLength = Math.abs(12 - cornerWidth);
-    const paddedNotchWidth = notchWidth + 8;
+
+    // If the notchWidth is 0, the the notched outline doesn't need to add padding.
+    let paddedNotchWidth = 0;
+    if (notchWidth > 0) {
+      paddedNotchWidth = notchWidth + 8;
+    }
 
     // The right, bottom, and left sides of the outline follow the same SVG path.
     const pathMiddle = 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius

packages/mdc-select/foundation.js

@@ -121,7 +121,7 @@ class MDCSelectFoundation extends MDCFoundation {
    * @param {boolean} openNotch
    */
   notchOutline(openNotch) {
-    if (!this.adapter_.hasOutline() || !this.adapter_.hasLabel()) {
+    if (!this.adapter_.hasOutline()) {
       return;
     }
 

test/screenshot/golden.json

@@ -386,6 +386,15 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/02/15_12_11_524/spec/mdc-radio/mixins/mixins.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-select/issues/3230.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_chrome_68.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_firefox_61.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/08/28/00_57_26_335/spec/mdc-select/issues/3230.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-switch/classes/baseline.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/rlfriedman/2018/07/23/18_31_44_533/spec/mdc-switch/classes/baseline.html",
     "screenshots": {

test/screenshot/spec/mdc-select/fixture.js

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright 2018 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+window.mdc.testFixture.fontsLoaded.then(() => {
+  [].forEach.call(document.querySelectorAll('.mdc-select'), (el) => {
+    mdc.select.MDCSelect.attachTo(el);
+  });
+});

test/screenshot/spec/mdc-select/fixture.scss

@@ -0,0 +1,26 @@
+//
+// Copyright 2018 Google Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions://
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.//
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+//
+
+.test-cell--select {
+  width: 301px;
+  height: 121px;
+}

test/screenshot/spec/mdc-select/issues/3230.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2018 Google Inc.
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Issue 3230 - MDC Web Screenshot Test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="../../../out/mdc.select.css">
+  <link rel="stylesheet" href="../../../out/mdc.typography.css">
+  <link rel="stylesheet" href="../../../out/spec/fixture.css">
+  <link rel="stylesheet" href="../../../out/spec/mdc-select/fixture.css">
+</head>
+
+<body class="test-container mdc-typography">
+<main class="test-viewport test-viewport--mobile">
+  <div class="test-layout">
+
+    <!-- This tests that the outlined select will still turn the primary color when it does not have a floating label -->
+    <!-- See https://github.com/material-components/material-components-web/issues/3230 -->
+    <div class="test-cell test-cell--select">
+      <div class="mdc-select mdc-select--outlined">
+        <select class="mdc-select__native-control" id="my-select" autofocus>
+          <option value="grains" selected>
+            Bread, Cereal, Rice, and Pasta
+          </option>
+          <option value="vegetables" disabled>
+            Vegetables
+          </option>
+        </select>
+        <div class="mdc-notched-outline mdc-notched-outline--notched">
+          <svg>
+            <path class="mdc-notched-outline__path"/>
+          </svg>
+        </div>
+        <div class="mdc-notched-outline__idle"></div>
+      </div>
+    </div>
+
+  </div>
+</main>
+
+<!-- Automatically provides/replaces `Promise` if missing or broken. -->
+<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
+<script src="../../../out/material-components-web.js"></script>
+<script src="../../../out/spec/fixture.js"></script>
+<script src="../../../out/spec/mdc-select/fixture.js"></script>
+</body>
+</html>

test/screenshot/spec/mdc-switch/fixture.scss

@@ -32,10 +32,10 @@ $custom-switch-color: $material-color-red-500;
 
 .custom-switch--thumb-color {
   @include mdc-switch-toggled-on-thumb-color($custom-switch-color);
-  @include mdc-switch-toggled-off-thumb-color($custom-switch-color)
+  @include mdc-switch-toggled-off-thumb-color($custom-switch-color);
 }
 
 .custom-switch--track-color {
   @include mdc-switch-toggled-on-track-color($custom-switch-color);
-  @include mdc-switch-toggled-off-track-color($custom-switch-color)
+  @include mdc-switch-toggled-off-track-color($custom-switch-color);
 }