From 1d919efdf9356ab857a6d289f61ed87ae8228b4e Mon Sep 17 00:00:00 2001
From: Will Ernest <34519388+williamernest@users.noreply.github.com>
Date: Fri, 14 Dec 2018 09:36:46 -0800
Subject: [PATCH] fix(menu): Increase specificity of selection group class
 (#4172)

---
 demos/menu.html                               |   8 +-
 packages/mdc-menu/README.md                   |   4 +-
 packages/mdc-menu/mdc-menu.scss               |  11 +-
 test/screenshot/golden.json                   |   9 ++
 .../classes/menu-selection-group.html         | 131 ++++++++++++++++++
 test/screenshot/spec/mdc-menu/fixture.js      |  26 ++++
 test/screenshot/spec/mdc-menu/fixture.scss    |  28 ++++
 7 files changed, 206 insertions(+), 11 deletions(-)
 create mode 100644 test/screenshot/spec/mdc-menu/classes/menu-selection-group.html
 create mode 100644 test/screenshot/spec/mdc-menu/fixture.js
 create mode 100644 test/screenshot/spec/mdc-menu/fixture.scss

diff --git a/demos/menu.html b/demos/menu.html
index 3cf6fd1a118..4d0375f87bf 100644
--- a/demos/menu.html
+++ b/demos/menu.html
@@ -92,7 +92,7 @@
                 <li>
                   <ul class="mdc-menu__selection-group">
                     <li class="mdc-list-item" role="menuitem">
-                      <span class="mdc-menu__selection-group-icon">
+                      <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                           <path fill="none" d="M0 0h24v24H0z"/>
                           <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
@@ -103,7 +103,7 @@
                       </span>
                     </li>
                     <li class="mdc-list-item mdc-list-item--disabled" role="menuitem">
-                      <span class="mdc-menu__selection-group-icon">
+                      <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                           <path fill="none" d="M0 0h24v24H0z"/>
                           <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
@@ -114,7 +114,7 @@
                       </span>
                     </li>
                     <li class="mdc-list-item" role="menuitem">
-                      <span class="mdc-menu__selection-group-icon">
+                      <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                           <path fill="none" d="M0 0h24v24H0z"/>
                           <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
@@ -125,7 +125,7 @@
                       </span>
                     </li>
                     <li class="mdc-list-item mdc-menu-item--selected" role="menuitem">
-                      <span class="mdc-menu__selection-group-icon">
+                      <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                           <path fill="none" d="M0 0h24v24H0z"/>
                           <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
diff --git a/packages/mdc-menu/README.md b/packages/mdc-menu/README.md
index f345189aaa3..865f8823569 100644
--- a/packages/mdc-menu/README.md
+++ b/packages/mdc-menu/README.md
@@ -84,13 +84,13 @@ Menus can contain a group of list items that can represent the selection state o
     <li>
       <ul class="mdc-menu__selection-group">
         <li class="mdc-list-item" role="menuitem">
-          <span class="mdc-menu__selection-group-icon">
+          <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
             ...
           </span>
           <span class="mdc-list-item__text">Single</span>
         </li>
         <li class="mdc-list-item" role="menuitem">
-          <span class="mdc-menu__selection-group-icon">
+          <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
            ...
           </span>
           <span class="mdc-list-item__text">1.15</span>
diff --git a/packages/mdc-menu/mdc-menu.scss b/packages/mdc-menu/mdc-menu.scss
index d31f96d8633..b2a502ea8dd 100644
--- a/packages/mdc-menu/mdc-menu.scss
+++ b/packages/mdc-menu/mdc-menu.scss
@@ -63,13 +63,14 @@
   .mdc-list-item {
     @include mdc-rtl-reflexive-box(padding, left, 56px);
   }
-}
 
-.mdc-menu__selection-group-icon {
-  @include mdc-rtl-reflexive-position(left, 16px);
+  // Extra specificity required to override `display` property on `mdc-list-item__graphic`.
+  .mdc-menu__selection-group-icon {
+    @include mdc-rtl-reflexive-position(left, 16px);
 
-  display: none;
-  position: absolute;
+    display: none;
+    position: absolute;
+  }
 }
 
 // stylelint-disable-next-line plugin/selector-bem-pattern
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
index 054f6ef252c..1e04dbc2e7d 100644
--- a/test/screenshot/golden.json
+++ b/test/screenshot/golden.json
@@ -852,6 +852,15 @@
       "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/11/28/20_57_26_802/spec/mdc-list/classes/selected.html.windows_ie_11.png"
     }
   },
+  "spec/mdc-menu/classes/menu-selection-group.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/13/21_10_43_629/spec/mdc-menu/classes/menu-selection-group.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/13/21_10_43_629/spec/mdc-menu/classes/menu-selection-group.html.windows_chrome_71.png",
+      "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/13/21_10_43_629/spec/mdc-menu/classes/menu-selection-group.html.windows_edge_17.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/13/21_10_43_629/spec/mdc-menu/classes/menu-selection-group.html.windows_firefox_63.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/13/21_10_43_629/spec/mdc-menu/classes/menu-selection-group.html.windows_ie_11.png"
+    }
+  },
   "spec/mdc-radio/classes/baseline.html": {
     "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/09/10/17_42_51_602/spec/mdc-radio/classes/baseline.html?utm_source=golden_json",
     "screenshots": {
diff --git a/test/screenshot/spec/mdc-menu/classes/menu-selection-group.html b/test/screenshot/spec/mdc-menu/classes/menu-selection-group.html
new file mode 100644
index 00000000000..19958485a60
--- /dev/null
+++ b/test/screenshot/spec/mdc-menu/classes/menu-selection-group.html
@@ -0,0 +1,131 @@
+<!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>Menu Selection Group - 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/mdc.menu-surface.css">
+    <link rel="stylesheet" href="../../../out/mdc.menu.css">
+    <link rel="stylesheet" href="../../../out/spec/fixture.css">
+    <link rel="stylesheet" href="../../../out/spec/mdc-menu/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--menu">
+
+          <div class="mdc-menu mdc-menu-surface mdc-menu-surface--open" tabindex="-1" id="demo-menu">
+            <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
+              <li>
+                <ul class="mdc-menu__selection-group">
+                  <li class="mdc-list-item" role="menuitem">
+                    <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <path fill="none" d="M0 0h24v24H0z"/>
+                        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+                      </svg>
+                    </span>
+                    <span class="mdc-list-item__text">
+                      Single
+                    </span>
+                  </li>
+                  <li class="mdc-list-item mdc-list-item--disabled" role="menuitem">
+                    <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <path fill="none" d="M0 0h24v24H0z"/>
+                        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+                      </svg>
+                    </span>
+                    <span class="mdc-list-item__text">
+                      1.15
+                    </span>
+                  </li>
+                  <li class="mdc-list-item" role="menuitem">
+                    <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <path fill="none" d="M0 0h24v24H0z"/>
+                        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+                      </svg>
+                    </span>
+                    <span class="mdc-list-item__text">
+                      Double
+                    </span>
+                  </li>
+                  <li class="mdc-list-item mdc-menu-item--selected" role="menuitem">
+                    <span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                        <path fill="none" d="M0 0h24v24H0z"/>
+                        <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
+                      </svg>
+                    </span>
+                    <span class="mdc-list-item__text">
+                      Custom: 1.2
+                    </span>
+                  </li>
+                </ul>
+              </li>
+              <li class="mdc-list-divider" role="separator"></li>
+              <li class="mdc-list-item" role="menuitem">
+                <span class="mdc-list-item__text">
+                  Add space before paragraph
+                </span>
+              </li>
+              <li class="mdc-list-item" role="menuitem">
+                <span class="mdc-list-item__text">
+                  Add space after paragraph
+                </span>
+              </li>
+              <li class="mdc-list-divider" role="separator"></li>
+              <li class="mdc-list-item" role="menuitem">
+                <span class="mdc-list-item__text">
+                  Custom spacing...
+                </span>
+              </li>
+            </ul>
+          </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-menu/fixture.js"></script>
+  </body>
+</html>
diff --git a/test/screenshot/spec/mdc-menu/fixture.js b/test/screenshot/spec/mdc-menu/fixture.js
new file mode 100644
index 00000000000..eaffb1feebf
--- /dev/null
+++ b/test/screenshot/spec/mdc-menu/fixture.js
@@ -0,0 +1,26 @@
+/**
+ * @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(() => {
+  window.mdc.testFixture.notifyDomReady();
+});
diff --git a/test/screenshot/spec/mdc-menu/fixture.scss b/test/screenshot/spec/mdc-menu/fixture.scss
new file mode 100644
index 00000000000..eab9615e12f
--- /dev/null
+++ b/test/screenshot/spec/mdc-menu/fixture.scss
@@ -0,0 +1,28 @@
+//  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.
+//
+
+@import "../mixins";
+
+.test-cell--menu {
+  @include test-cell-size(260, 410);
+
+  position: relative;
+}