Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 5183e01

Browse files
abhiomkarabhiomkar
authored
fix(menu): Fix selection group list item spacing (#4517)
1 parent 31376f7 commit 5183e01

File tree

3 files changed

+126
-1
lines changed

3 files changed

+126
-1
lines changed

‎packages/mdc-menu/_mixins.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
@import "@material/feature-targeting/mixins";
2525
@import "@material/rtl/mixins";
2626
@import "@material/list/mixins";
27+
@import "@material/list/variables";
2728
@import "@material/ripple/mixins";
2829
@import "./variables";
2930

@@ -85,7 +86,7 @@
8586

8687
.mdc-list-item {
8788
@include mdc-feature-targets($feat-structure) {
88-
@include mdc-rtl-reflexive-box(padding, left, 56px);
89+
@include mdc-rtl-reflexive-property(padding, 56px, $mdc-list-side-padding);
8990
}
9091
}
9192

‎test/screenshot/golden.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -775,6 +775,14 @@
775775
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/15/18_35_08_782/spec/mdc-menu/classes/bottom-anchored.html.windows_ie_11.png"
776776
}
777777
},
778+
"spec/mdc-menu/classes/menu-selection-group-only.html": {
779+
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/19/17_12_22_925/spec/mdc-menu/classes/menu-selection-group-only.html?utm_source=golden_json",
780+
"screenshots": {
781+
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/19/17_12_22_925/spec/mdc-menu/classes/menu-selection-group-only.html.windows_chrome_72.png",
782+
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/19/17_12_22_925/spec/mdc-menu/classes/menu-selection-group-only.html.windows_firefox_65.png",
783+
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/19/17_12_22_925/spec/mdc-menu/classes/menu-selection-group-only.html.windows_ie_11.png"
784+
}
785+
},
778786
"spec/mdc-menu/classes/menu-selection-group.html": {
779787
"public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/03/15/18_35_08_782/spec/mdc-menu/classes/menu-selection-group.html?utm_source=golden_json",
780788
"screenshots": {

‎test/screenshot/spec/mdc-menu/classes/menu-selection-group-only.html

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright 2019 Google Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.
22+
-->
23+
<html lang="en">
24+
<head>
25+
<meta charset="utf-8">
26+
<title>Menu Selection Group Only - MDC Web Screenshot Test</title>
27+
<meta name="viewport" content="width=device-width, initial-scale=1">
28+
<link rel="stylesheet" href="../../../out/mdc.list.css">
29+
<link rel="stylesheet" href="../../../out/mdc.menu-surface.css">
30+
<link rel="stylesheet" href="../../../out/mdc.menu.css">
31+
<link rel="stylesheet" href="../../../out/mdc.button.css">
32+
<link rel="stylesheet" href="../../../out/spec/fixture.css">
33+
<link rel="stylesheet" href="../../../out/spec/mdc-menu/fixture.css">
34+
35+
<!-- Global site tag (gtag.js) - Google Analytics -->
36+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-118996389-2"></script>
37+
<script>
38+
window.dataLayer = window.dataLayer || [];
39+
function gtag(){dataLayer.push(arguments);}
40+
gtag('js', new Date());
41+
gtag('config', 'UA-118996389-2');
42+
</script>
43+
</head>
44+
45+
<body class="test-container test-container--edge-fonts">
46+
<main class="test-viewport test-viewport--mobile">
47+
<div class="test-layout">
48+
<div class="test-cell test-cell--menu">
49+
<div class="mdc-menu-surface--anchor test-menu-button-container">
50+
<button class="mdc-button test-menu-button">Open menu</button>
51+
<div class="mdc-menu mdc-menu-surface mdc-menu-surface--open" tabindex="-1" id="demo-menu" style="left: 0px; top: 36px;">
52+
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
53+
<li>
54+
<ul class="mdc-menu__selection-group">
55+
<li class="mdc-list-item" role="menuitem">
56+
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
57+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
58+
<path fill="none" d="M0 0h24v24H0z"/>
59+
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
60+
</svg>
61+
</span>
62+
<span class="mdc-list-item__text">
63+
Best match
64+
</span>
65+
</li>
66+
<li class="mdc-list-item" role="menuitem">
67+
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
68+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
69+
<path fill="none" d="M0 0h24v24H0z"/>
70+
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
71+
</svg>
72+
</span>
73+
<span class="mdc-list-item__text">
74+
Lowest rate
75+
</span>
76+
</li>
77+
<li class="mdc-list-item" role="menuitem">
78+
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
79+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
80+
<path fill="none" d="M0 0h24v24H0z"/>
81+
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
82+
</svg>
83+
</span>
84+
<span class="mdc-list-item__text">
85+
Highest rating
86+
</span>
87+
</li>
88+
<li class="mdc-list-item mdc-menu-item--selected" role="menuitem">
89+
<span class="mdc-list-item__graphic mdc-menu__selection-group-icon">
90+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
91+
<path fill="none" d="M0 0h24v24H0z"/>
92+
<path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/>
93+
</svg>
94+
</span>
95+
<span class="mdc-list-item__text">
96+
Highest discount
97+
</span>
98+
</li>
99+
</ul>
100+
</li>
101+
</ul>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
</main>
107+
108+
<!-- Automatically provides/replaces `Promise` if missing or broken. -->
109+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.js"></script>
110+
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
111+
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.13/fontfaceobserver.standalone.js"></script>
112+
<script src="../../../out/material-components-web.js"></script>
113+
<script src="../../../out/spec/fixture.js"></script>
114+
<script src="../../../out/spec/mdc-menu/fixture.js"></script>
115+
</body>
116+
</html>

0 commit comments

Comments
 (0)