fix(list): Update meta class to use caption typogrpahy style (#4623)

material-components · Apr 19, 2019 · 0826a78 · 0826a78
1 parent 816139c
commit 0826a78
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 0 deletions.
diff --git a/packages/mdc-list/_mixins.scss b/packages/mdc-list/_mixins.scss
@@ -112,6 +112,12 @@
   // stylelint-enable plugin/selector-bem-pattern
 
   .mdc-list-item__meta {
+    // stylelint-disable selector-class-pattern
+    &:not(.material-icons) {
+      @include mdc-typography(caption, $query);
+    }
+    // stylelint-enable selector-class-pattern
+
     @include mdc-feature-targets($feat-structure) {
       @include mdc-rtl-reflexive-property(margin, auto, 0, ".mdc-list-item");
     }

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -751,6 +751,14 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/08/21_52_36_805/spec/mdc-list/classes/disabled-items.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-list/classes/meta-text.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/19/00_02_21_596/spec/mdc-list/classes/meta-text.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/19/00_02_21_596/spec/mdc-list/classes/meta-text.html.windows_chrome_73.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/19/00_02_21_596/spec/mdc-list/classes/meta-text.html.windows_firefox_65.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/04/19/00_02_21_596/spec/mdc-list/classes/meta-text.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-list/classes/radio.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/28/20_57_26_802/spec/mdc-list/classes/radio.html?utm_source=golden_json",
     "screenshots": {

diff --git a/test/screenshot/spec/mdc-list/classes/meta-text.html b/test/screenshot/spec/mdc-list/classes/meta-text.html
@@ -0,0 +1,72 @@
+<!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>List - Meta Test - MDC Web Screenshot Test</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="../../../out/mdc.list.css">
+  <link rel="stylesheet" href="../../../out/spec/fixture.css">
+  <link rel="stylesheet" href="../../../out/spec/mdc-list/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--list">
+      <ul class="mdc-list test-list-baseline">
+        <li class="mdc-list-item" tabindex="0">
+          <span class="mdc-list-item__text">Single-line item</span>
+          <span class="mdc-list-item__meta">Meta</span>
+        </li>
+        <li class="mdc-list-item">
+          <span class="mdc-list-item__text">Single-line item</span>
+          <span class="mdc-list-item__meta">Meta</span>
+        </li>
+        <li class="mdc-list-item">
+          <span class="mdc-list-item__text">Single-line item</span>
+          <span class="mdc-list-item__meta">Meta</span>
+        </li>
+      </ul>
+    </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-list/fixture.js"></script>
+</body>
+</html>