fix(list): Fix font size and placement for avatar graphic (#4021)

material-components · Nov 15, 2018 · 5abe685 · 5abe685
1 parent 2516c25
commit 5abe685
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 6 deletions.
diff --git a/packages/mdc-list/_mixins.scss b/packages/mdc-list/_mixins.scss
@@ -89,5 +89,4 @@
 
   width: $size;
   height: $size;
-  font-size: $size; // To support icon font
 }
diff --git a/packages/mdc-list/mdc-list.scss b/packages/mdc-list/mdc-list.scss
@@ -90,13 +90,19 @@
 .mdc-list-item__graphic {
   @include mdc-list-graphic-size_(24px);
 
-  display: inline-flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   fill: currentColor;
 }
 
+// Extra specificity is to override .material-icons display style if used in conjunction with mdc-list-item__graphic
+// stylelint-disable plugin/selector-bem-pattern
+.mdc-list .mdc-list-item__graphic {
+  display: inline-flex;
+}
+// stylelint-enable plugin/selector-bem-pattern
+
 .mdc-list-item__meta {
   @include mdc-rtl-reflexive-property(margin, auto, 0, ".mdc-list-item");
 }

diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -423,12 +423,12 @@
     }
   },
   "spec/mdc-dialog/classes/baseline-simple.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-simple.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/30/19_55_44_006/spec/mdc-dialog/classes/baseline-simple.html?utm_source=golden_json",
     "screenshots": {
-      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-simple.html.windows_chrome_69.png",
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/30/19_55_44_006/spec/mdc-dialog/classes/baseline-simple.html.windows_chrome_69.png",
       "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-simple.html.windows_edge_17.png",
-      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-simple.html.windows_firefox_62.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/09/21/16_50_45_748/spec/mdc-dialog/classes/baseline-simple.html.windows_ie_11.png"
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/30/19_55_44_006/spec/mdc-dialog/classes/baseline-simple.html.windows_firefox_62.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/10/30/19_55_44_006/spec/mdc-dialog/classes/baseline-simple.html.windows_ie_11.png"
     }
   },
   "spec/mdc-dialog/classes/manual-window-resize.html": {

diff --git a/test/screenshot/spec/mdc-dialog/fixture.scss b/test/screenshot/spec/mdc-dialog/fixture.scss
@@ -48,6 +48,12 @@ $custom-dialog-color: $material-color-red-300;
   font-size: 100%; // stylelint-disable-line declaration-property-unit-whitelist
 }
 
+// stylelint-disable-next-line selector-class-pattern
+.test-dialog--simple .mdc-list-item__graphic {
+  background-color: rgba(0, 0, 0, .3);
+  color: #fff;
+}
+
 .test-dialog--container-fill-color {
   @include mdc-dialog-container-fill-color($custom-dialog-color);
 }