fix(text-field): Fix placeholder styles for text field fullwidth vari…

…ant. (material-components#4385) (cherry picked from commit 3bd3636)
Lundalogik · Feb 19, 2019 · 1edc29f · 1edc29f
1 parent 10a384f
commit 1edc29f
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 1 deletion.
diff --git a/packages/mdc-textfield/mdc-text-field.scss b/packages/mdc-textfield/mdc-text-field.scss
@@ -101,7 +101,8 @@
     color: $mdc-text-field-placeholder-ink-color !important;
   }
 
-  // Always show placeholder for text field without label and show only on focused state when label is present.
+  // Always show placeholder for text fields that has no label and show only on focused state when label is present.
+  .mdc-text-field--fullwidth &::placeholder,
   .mdc-text-field--no-label &::placeholder,
   .mdc-text-field--focused &::placeholder {
     transition-delay: 40ms;

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -1183,6 +1183,14 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/22/20_34_34_568/spec/mdc-textfield/classes/baseline-character-counter.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-textfield/classes/baseline-fullwidth.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/02/08/19_22_02_713/spec/mdc-textfield/classes/baseline-fullwidth.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/02/08/19_22_02_713/spec/mdc-textfield/classes/baseline-fullwidth.html.windows_chrome_71.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/02/08/19_22_02_713/spec/mdc-textfield/classes/baseline-fullwidth.html.windows_firefox_64.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/02/08/19_22_02_713/spec/mdc-textfield/classes/baseline-fullwidth.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-textfield/classes/baseline-helper-text-persistent-character-counter.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/01/22/20_34_34_568/spec/mdc-textfield/classes/baseline-helper-text-persistent-character-counter.html?utm_source=golden_json",
     "screenshots": {

diff --git a/test/screenshot/spec/mdc-textfield/classes/baseline-fullwidth.html b/test/screenshot/spec/mdc-textfield/classes/baseline-fullwidth.html
@@ -0,0 +1,67 @@
+<!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>Baseline Full Width Text Field Element - MDC Web Screenshot Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../../out/mdc.textfield.css">
+    <link rel="stylesheet" href="../../../out/mdc.typography.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-textfield/fixture.css">
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-118996389-2');
+    </script>
+  </head>
+
+  <body class="test-container">
+    <main class="test-viewport test-viewport--mobile">
+      <div class="test-layout">
+        <div class="test-cell test-cell--textfield">
+          <div class="mdc-text-field mdc-text-field--fullwidth">
+            <!-- htmllint-disable -->
+            <input class="mdc-text-field__input"
+                    type="text"
+                    placeholder="Full-Width Text Field"
+                    aria-label="Full-Width Text Field">
+            <!-- htmllint-enable -->
+          </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-textfield/fixture.js"></script>
+  </body>
+</html>