Skip to content

Commit 8cbf42a

Browse files
100stacks100stacks
authored
Merge pull request #530 from rackerlabs/fix-issue-528
fix(alignment): correct "smart" repositioning alignment
2 parents d637109 + 696496b commit 8cbf42a

File tree

5 files changed

+355
-28
lines changed

5 files changed

+355
-28
lines changed

‎docs/_templates/no-frame.njk‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="{{site.language}}">
3+
<head>
4+
<title>{% if page.title %}{{page.title}} - {% endif %}{{site.title}}</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<base href="{{site.baseHref}}">
8+
9+
<link rel="shortcut icon" href="images/favicon.png">
10+
11+
{# HelixUI Styles (generated from src/) #}
12+
<link rel="stylesheet" href="dist/styles/helix-ui.css">
13+
{# Documentation Styles (generated from docs/) #}
14+
<link rel="stylesheet" href="docs.css">
15+
16+
<!-- Converts ES5 custom element constructor functions to ES6 classes -->
17+
<script src="vendor/custom-elements-es5-adapter.js"></script>
18+
19+
<!-- loader appends polyfills, if needed -->
20+
<script src="vendor/webcomponents-loader.js"></script>
21+
</head>
22+
<body>
23+
<main role="main" class="{{mainClass}} {{contentClasses}}">
24+
{% block content %}
25+
{# page content goes here #}
26+
{% endblock %}
27+
</main>
28+
29+
{# Vue for Interactive Demos #}
30+
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
31+
{# HelixUI Behavior (generated from src/) #}
32+
<script src="dist/scripts/helix-ui.browser.js"></script>
33+
{# Documentation Behavior (generated from docs/) #}
34+
<script src="docs.js"></script>
35+
</body>
36+
</html>

‎docs/components/menu/test-positioning.html‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
title: Testing - Menu Positioning
3+
---
4+
{% extends 'no-frame.njk' %}
5+
{% set contentClasses = 'menu-positioning-spec' %}
6+
7+
{% block content %}
8+
<div id="target-center">Target</div>
9+
<div id="target-quad1">Target</div>
10+
<div id="target-quad2">Target</div>
11+
<div id="target-quad3">Target</div>
12+
<div id="target-quad4">Target</div>
13+
<div id="target-topLeft">Target</div>
14+
<div id="target-topRight">Target</div>
15+
<div id="target-bottomRight">Target</div>
16+
<div id="target-bottomLeft">Target</div>
17+
18+
<!-- CENTER TARGET -->
19+
<hx-menu relative-to="target-center" position="top" open>
20+
<section>
21+
<header>"top" Menu</header>
22+
<hx-menuitem>Action 1</hx-menuitem>
23+
<hx-menuitem>Action 2</hx-menuitem>
24+
<hx-menuitem>Action 3</hx-menuitem>
25+
</section>
26+
</hx-menu>
27+
<hx-menu relative-to="target-center" position="left" open>
28+
<section>
29+
<header>"left" Menu</header>
30+
<hx-menuitem>Action 1</hx-menuitem>
31+
<hx-menuitem>Action 2</hx-menuitem>
32+
<hx-menuitem>Action 3</hx-menuitem>
33+
</section>
34+
</hx-menu>
35+
<hx-menu relative-to="target-center" position="right" open>
36+
<section>
37+
<header>"right" Menu</header>
38+
<hx-menuitem>Action 1</hx-menuitem>
39+
<hx-menuitem>Action 2</hx-menuitem>
40+
<hx-menuitem>Action 3</hx-menuitem>
41+
</section>
42+
</hx-menu>
43+
<hx-menu relative-to="target-center" position="bottom" open>
44+
<section>
45+
<header>"bottom" Menu</header>
46+
<hx-menuitem>Action 1</hx-menuitem>
47+
<hx-menuitem>Action 2</hx-menuitem>
48+
<hx-menuitem>Action 3</hx-menuitem>
49+
</section>
50+
</hx-menu>
51+
52+
<!-- QUAD 1 TARGET -->
53+
<hx-menu relative-to="target-quad1" position="right-start" open>
54+
<section>
55+
<header>"right-start" Menu</header>
56+
<hx-menuitem>Action 1</hx-menuitem>
57+
<hx-menuitem>Action 2</hx-menuitem>
58+
<hx-menuitem>Action 3</hx-menuitem>
59+
</section>
60+
</hx-menu>
61+
<hx-menu relative-to="target-quad1" position="top-end" open>
62+
<section>
63+
<header>"top-end" Menu</header>
64+
<hx-menuitem>Action 1</hx-menuitem>
65+
<hx-menuitem>Action 2</hx-menuitem>
66+
<hx-menuitem>Action 3</hx-menuitem>
67+
</section>
68+
</hx-menu>
69+
70+
<!-- QUAD 2 TARGET -->
71+
<hx-menu relative-to="target-quad2" position="right-end" open>
72+
<section>
73+
<header>"right-end" Menu</header>
74+
<hx-menuitem>Action 1</hx-menuitem>
75+
<hx-menuitem>Action 2</hx-menuitem>
76+
<hx-menuitem>Action 3</hx-menuitem>
77+
</section>
78+
</hx-menu>
79+
<hx-menu relative-to="target-quad2" position="bottom-end" open>
80+
<section>
81+
<header>"bottom-end" Menu</header>
82+
<hx-menuitem>Action 1</hx-menuitem>
83+
<hx-menuitem>Action 2</hx-menuitem>
84+
<hx-menuitem>Action 3</hx-menuitem>
85+
</section>
86+
</hx-menu>
87+
88+
<!-- QUAD 3 TARGET -->
89+
<hx-menu relative-to="target-quad3" position="left-end" open>
90+
<section>
91+
<header>"left-end" Menu</header>
92+
<hx-menuitem>Action 1</hx-menuitem>
93+
<hx-menuitem>Action 2</hx-menuitem>
94+
<hx-menuitem>Action 3</hx-menuitem>
95+
</section>
96+
</hx-menu>
97+
<hx-menu relative-to="target-quad3" position="bottom-start" open>
98+
<section>
99+
<header>"bottom-start" Menu</header>
100+
<hx-menuitem>Action 1</hx-menuitem>
101+
<hx-menuitem>Action 2</hx-menuitem>
102+
<hx-menuitem>Action 3</hx-menuitem>
103+
</section>
104+
</hx-menu>
105+
106+
<!-- QUAD 4 TARGET -->
107+
<hx-menu relative-to="target-quad4" position="left-start" open>
108+
<section>
109+
<header>"left-start" Menu</header>
110+
<hx-menuitem>Action 1</hx-menuitem>
111+
<hx-menuitem>Action 2</hx-menuitem>
112+
<hx-menuitem>Action 3</hx-menuitem>
113+
</section>
114+
</hx-menu>
115+
<hx-menu relative-to="target-quad4" position="top-start" open>
116+
<section>
117+
<header>"top-start" Menu</header>
118+
<hx-menuitem>Action 1</hx-menuitem>
119+
<hx-menuitem>Action 2</hx-menuitem>
120+
<hx-menuitem>Action 3</hx-menuitem>
121+
</section>
122+
</hx-menu>
123+
124+
125+
<!-- SMART REPOSITIONING -->
126+
<!--
127+
Intentionally positioned offscreen so that we can test if
128+
repositioning logic is working.
129+
-->
130+
131+
<!-- TOP RIGHT TARGET -->
132+
<hx-menu relative-to="target-topRight" position="right-end" open>
133+
<section>
134+
<header>"right-end" Menu</header>
135+
<hx-menuitem>Action 1</hx-menuitem>
136+
<hx-menuitem>Action 2</hx-menuitem>
137+
<hx-menuitem>Action 3</hx-menuitem>
138+
</section>
139+
</hx-menu>
140+
<hx-menu relative-to="target-topRight" position="top-start" open>
141+
<section>
142+
<header>"top-start" Menu</header>
143+
<hx-menuitem>Action 1</hx-menuitem>
144+
<hx-menuitem>Action 2</hx-menuitem>
145+
<hx-menuitem>Action 3</hx-menuitem>
146+
</section>
147+
</hx-menu>
148+
149+
<!-- BOTTOM RIGHT TARGET -->
150+
<hx-menu relative-to="target-bottomRight" position="bottom-start" open>
151+
<section>
152+
<header>"bottom-start" Menu</header>
153+
<hx-menuitem>Action 1</hx-menuitem>
154+
<hx-menuitem>Action 2</hx-menuitem>
155+
<hx-menuitem>Action 3</hx-menuitem>
156+
</section>
157+
</hx-menu>
158+
<hx-menu relative-to="target-bottomRight" position="right-start" open>
159+
<section>
160+
<header>"right-start" Menu</header>
161+
<hx-menuitem>Action 1</hx-menuitem>
162+
<hx-menuitem>Action 2</hx-menuitem>
163+
<hx-menuitem>Action 3</hx-menuitem>
164+
</section>
165+
</hx-menu>
166+
167+
<!-- BOTTOM LEFT TARGET -->
168+
<hx-menu relative-to="target-bottomLeft" position="bottom-end" open>
169+
<section>
170+
<header>"bottom-end" Menu</header>
171+
<hx-menuitem>Action 1</hx-menuitem>
172+
<hx-menuitem>Action 2</hx-menuitem>
173+
<hx-menuitem>Action 3</hx-menuitem>
174+
</section>
175+
</hx-menu>
176+
<hx-menu relative-to="target-bottomLeft" position="left-start" open>
177+
<section>
178+
<header>"left-start" Menu</header>
179+
<hx-menuitem>Action 1</hx-menuitem>
180+
<hx-menuitem>Action 2</hx-menuitem>
181+
<hx-menuitem>Action 3</hx-menuitem>
182+
</section>
183+
</hx-menu>
184+
185+
<!-- TOP LEFT TARGET -->
186+
<hx-menu relative-to="target-topLeft" position="left-end" open>
187+
<section>
188+
<header>"left-end" Menu</header>
189+
<hx-menuitem>Action 1</hx-menuitem>
190+
<hx-menuitem>Action 2</hx-menuitem>
191+
<hx-menuitem>Action 3</hx-menuitem>
192+
</section>
193+
</hx-menu>
194+
<hx-menu relative-to="target-topLeft" position="top-end" open>
195+
<section>
196+
<header>"top-end" Menu</header>
197+
<hx-menuitem>Action 1</hx-menuitem>
198+
<hx-menuitem>Action 2</hx-menuitem>
199+
<hx-menuitem>Action 3</hx-menuitem>
200+
</section>
201+
</hx-menu>
202+
{% endblock %}

‎docs/docs.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -408,6 +408,7 @@ min-version {
408408
@import 'spec/drawer-spec';
409409
@import 'spec/dropdown-select-spec';
410410
@import 'spec/file-input-spec';
411+
@import 'spec/menu-positioning-spec';
411412
@import 'spec/panel-spec';
412413
@import 'spec/popover-spec';
413414
@import 'spec/radio-spec';

‎docs/styles/spec/menu-positioning-spec.less‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.menu-positioning-spec {
2+
[id^="target"] {
3+
align-items: center;
4+
background-color: @gray-300;
5+
display: flex;
6+
height: 6rem;
7+
justify-content: center;
8+
position: fixed;
9+
width: 6rem;
10+
}
11+
12+
// vertical target alignment
13+
[id$="quad1"],
14+
[id$="quad4"] {
15+
top: 33%;
16+
}
17+
18+
[id$="quad2"],
19+
[id$="quad3"] {
20+
top: 67%;
21+
}
22+
23+
// horizontal target alignment
24+
[id$="quad1"],
25+
[id$="quad2"] {
26+
left: 67%;
27+
}
28+
29+
[id$="quad3"],
30+
[id$="quad4"] {
31+
left: 33%;
32+
}
33+
34+
#target-center,
35+
#target-quad1,
36+
#target-quad2,
37+
#target-quad3,
38+
#target-quad4 {
39+
transform: translate(-50%, -50%);
40+
}
41+
42+
#target-center {
43+
height: 9rem;
44+
left: 50%;
45+
top: 50%;
46+
width: 9rem;
47+
}
48+
49+
#target-topLeft {
50+
left: 0;
51+
top: 0;
52+
}
53+
54+
#target-topRight {
55+
right: 0;
56+
top: 0;
57+
}
58+
59+
#target-bottomLeft {
60+
bottom: 0;
61+
left: 0;
62+
}
63+
64+
#target-bottomRight {
65+
bottom: 0;
66+
right: 0;
67+
}
68+
}

0 commit comments

Comments
 (0)