Skip to content

Commit 1305574

Browse files
author
Ryan A. Johnson
committed
fix(*): refactor Tooltips and Popovers
* opts.margin and opts.offset are no longer directly recognized by the offset calculation functions * margin will be baked into the Shadow DOM CSS * offset will be replaced with dX or dY (depending on the positioning function) * opts.dX added to allow fine-tuning of the calculated X coordinate * opts.dY added to allow fine-tuning of the calculated Y coordinate * getPosition(offsetElement, refElement, config) -> getPosition(PositionConfig) * getPositionWithArrow(offsetElement, refElement, config) -> getPositionWithArrow(PositionConfig) * add Revealable mixin * add Positionable mixin * Refactor HXTooltipElement to use new Positionable mixin * update `<hx-tooltip>` docs * update `<hx-popover>` docs * update Tooltip component docs * add additional tests to `test.html` * update Popover component docs * add additional tests to `test.html` * add `mix()` utility function to aid in consuming defined mixins * update CSS for rendering the "arrow" on `<hx-popover>` and `<hx-tooltip>` * HXTooltipElement will automatically set `tabIndex` of the control element if it's less than 0 * broken in Edge 12-17 and IE11 due to bugs in each browser * will look into applying a suitable fix in a future update * add `dl.memberList` style to documentation CSS BREAKING * all position calculation utility functions now return { x, y } object instead of [ x, y ] array * `getPosition()` and `getPositionWithArrow()` utility functions now only accept a single PositionConfig argument * click-to-open behavior removed from `<hx-tooltip>` * `.triggerEvent` property removed from HXTooltipElement * `trigger-event` attribut removed from `<hx-tooltip>` * "smart" repositioning removed from HXTooltipElement
1 parent 284bd63 commit 1305574

35 files changed

+1762
-821
lines changed

‎docs/_data/positions.json5‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
withoutArrow: [
3+
'top-start',
4+
'top-left',
5+
'top',
6+
'top-right',
7+
'top-end',
8+
'bottom-start',
9+
'bottom-left',
10+
'bottom',
11+
'bottom-right',
12+
'bottom-end',
13+
'right-start',
14+
'right-top',
15+
'right',
16+
'right-bottom',
17+
'right-end',
18+
'left-start',
19+
'left-top',
20+
'left',
21+
'left-bottom',
22+
'left-end',
23+
],
24+
withArrow: [
25+
'top-left',
26+
'top',
27+
'top-right',
28+
'bottom-left',
29+
'bottom',
30+
'bottom-right',
31+
'right-top',
32+
'right',
33+
'right-bottom',
34+
'left-top',
35+
'left',
36+
'left-bottom',
37+
],
38+
}

‎docs/_positions.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export const WITH_ARROW = [
2+
{ label: 'Top Left', value: 'top-left' },
3+
{ label: 'Top', value: 'top' },
4+
{ label: 'Top Right', value: 'top-right' },
5+
{ label: 'Right Top', value: 'right-top' },
6+
{ label: 'Right', value: 'right' },
7+
{ label: 'Right Bottom', value: 'right-bottom' },
8+
{ label: 'Bottom Right', value: 'bottom-right' },
9+
{ label: 'Bottom', value: 'bottom' },
10+
{ label: 'Bottom Left', value: 'bottom-left' },
11+
{ label: 'Left Bottom', value: 'left-bottom' },
12+
{ label: 'Left', value: 'left' },
13+
{ label: 'Left Top', value: 'left-top' },
14+
];
15+
16+
export const WITHOUT_ARROW = [
17+
{ label: 'Top Start', value: 'top-start' },
18+
{ label: 'Top Left', value: 'top-left' },
19+
{ label: 'Top', value: 'top' },
20+
{ label: 'Top Right', value: 'top-right' },
21+
{ label: 'Top End', value: 'top-end' },
22+
{ label: 'Right Start', value: 'right-start' },
23+
{ label: 'Right Top', value: 'right-top' },
24+
{ label: 'Right', value: 'right' },
25+
{ label: 'Right Bottom', value: 'right-bottom' },
26+
{ label: 'Right End', value: 'right-end' },
27+
{ label: 'Bottom End', value: 'bottom-end' },
28+
{ label: 'Bottom Right', value: 'bottom-right' },
29+
{ label: 'Bottom', value: 'bottom' },
30+
{ label: 'Bottom Left', value: 'bottom-left' },
31+
{ label: 'Bottom Start', value: 'bottom-start' },
32+
{ label: 'Left End', value: 'left-end' },
33+
{ label: 'Left Bottom', value: 'left-bottom' },
34+
{ label: 'Left', value: 'left' },
35+
{ label: 'Left Top', value: 'left-top' },
36+
{ label: 'Left Start', value: 'left-start' },
37+
];
38+
39+
export default {
40+
WITH_ARROW,
41+
WITHOUT_ARROW,
42+
};

‎docs/_templates/element.njk‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
<section>
1515
<h2 id="attributes">Attributes</h2>
1616
<p>
17-
Attributes allow you to configure an element in a
18-
declarative manner via markup.
17+
Attributes enable declarative configuration of an element,
18+
via HTML markup.
1919
</p>
2020
{% block attributes %}
2121
<p class="hxSubdued">
@@ -31,8 +31,8 @@
3131
<section>
3232
<h2 id="properties">Properties</h2>
3333
<p>
34-
Properties allow you to configure an element in an
35-
imperative manner via JavaScript.
34+
JavaScript properties enable programmatic access to an element's
35+
configuration and state.
3636
</p>
3737
{% block properties %}
3838
<p class="hxSubdued">

‎docs/_templates/partials/min-version.njk‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
<min-version data-tooltip="page-min-version">
1+
<min-version id="page-min-version">
22
{% if page.minver %}
33
v{{page.minver}}+
44
{% else %}
55
NEW
66
{% endif %}
77
</min-version>
88

9-
<hx-tooltip id="page-min-version" position="right">
9+
<hx-tooltip for="page-min-version" position="right">
1010
{% if page.minver %}
1111
HelixUI v{{page.minver}} or later required
1212
{% else %}

‎docs/components/files/test-file-tiles.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,6 @@
33
---
44
{% extends 'test.njk' %}
55
{% block content %}
6-
<style>
7-
/* Beta Auto Grid Styles */
8-
.hxRow.hxAuto > .hxCol { flex-grow: 0; }
9-
.hxRow .hxCol.hxAuto { flex: 0 0 auto; }
10-
</style>
11-
126
<section>
137
<nav class="hxBreadcrumb">
148
<a href="components/files">Files</a>

‎docs/components/modals/test.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ <h3>Modal Header</h3>
185185
Toggle Popover
186186
</hx-disclosure>
187187
<br />
188-
<hx-icon data-tooltip="tooltip1" type="help-circle"></hx-icon>
188+
<hx-icon id="tooltip1" type="help-circle"></hx-icon>
189189
</p>
190190
<hx-menu id="modalMenuId">
191191
<hx-menuitem>Action 1</hx-menuitem>
@@ -210,7 +210,7 @@ <h3>Modal Header</h3>
210210
</footer>
211211
</hx-popover>
212212

213-
<hx-tooltip id="tooltip1" position="top">
213+
<hx-tooltip for="tooltip1" position="top">
214214
Top
215215
</hx-tooltip>
216216
</hx-div>
@@ -239,7 +239,7 @@ <h3>Modal Header</h3>
239239
Toggle Popover
240240
</hx-disclosure>
241241
<br />
242-
<hx-icon data-tooltip="tooltip2" type="help-circle"></hx-icon>
242+
<hx-icon id="tooltip2" type="help-circle"></hx-icon>
243243
</p>
244244

245245
<p>
@@ -321,7 +321,7 @@ <h3>Modal Header</h3>
321321
</footer>
322322
</hx-popover>
323323

324-
<hx-tooltip id="tooltip2" position="top">
324+
<hx-tooltip for="tooltip2" position="top">
325325
Top
326326
</hx-tooltip>
327327
</hx-div>

‎docs/components/popovers/index.html‎

Lines changed: 107 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
components/buttons: Buttons
66
components/popovers/test.html: Testing - Popovers
77
elements/hx-popover: <hx-popover>
8-
api/module-HelixUI_Utils_Position_Offset.html: API - Positioning
98
---
109
{% extends 'component.njk' %}
1110
{% block content %}
@@ -25,17 +24,13 @@ <h2 id="basic-popover">Basic Popover</h2>
2524
</form>
2625
</header>
2726

28-
<div
29-
v-for="_position in positions"
30-
v-if="_position.value === position.value"
31-
>
27+
<div>
3228
<hx-disclosure aria-controls="demoPopover" class="hxBtn">
3329
Toggle
3430
</hx-disclosure>
3531

3632
<hx-popover
3733
id="demoPopover"
38-
:key="position.label"
3934
:position="position.value"
4035
>
4136
<header>
@@ -78,4 +73,110 @@ <h2 id="basic-popover">Basic Popover</h2>
7873
</footer>
7974
</div>
8075
</section>
76+
77+
<section>
78+
<h2 id="scrolling-popover">Scrolling Popover</h2>
79+
<div class="example" id="vue-scrollingPopoverDemo" v-cloak>
80+
<header>
81+
<form class="beta-hxForm">
82+
<p>
83+
<label for="selPosition">Position</label>
84+
<select id="selPosition" v-model="position">
85+
<option v-for="_position in positions" :value="_position">
86+
{% raw %}{{ _position.label }}{% endraw %}
87+
</option>
88+
</select>
89+
</p>
90+
</form>
91+
</header>
92+
93+
<div>
94+
<hx-disclosure aria-controls="scrollingPopoverDemo" class="hxBtn">
95+
Toggle
96+
</hx-disclosure>
97+
98+
<hx-popover
99+
id="scrollingPopoverDemo"
100+
:position="position.value"
101+
>
102+
<header>
103+
Popover Header
104+
</header>
105+
106+
<hx-div scroll="vertical">
107+
<p>
108+
Try to decide the major scrum, maybe it will help join the VOC
109+
impediments. A simple blocker always takes less time than a minor
110+
one. As a user, I should be able to burn out the pirate size so
111+
that I can satify the prioritized MVP models within the backlog
112+
branches. If we detail above the methodologies, we can get the
113+
monthly work in progress before the XP branch.
114+
</p>
115+
116+
<p>
117+
Given viable relationships, always refactoring the steady velocity
118+
until the cross-functional user story will almost test the big
119+
standard. If we close inside the stories, we can get the ranked
120+
documentation around the MVP model. Try to adapt the monthly
121+
stakeholder, maybe it will help satify the XP deadlines. It was
122+
discovered that by rarely reviewing the VOC trends, we can refactor
123+
the acceptance VOC model inside the rapid test. If it takes you too
124+
long to review the certified WIP bug, then you are not opening
125+
enough. Given standup items, successfully preventing the ranked
126+
project management in front of the sustainable release planning
127+
will typically practice the continuous ScrumMaster.
128+
</p>
129+
130+
<p>
131+
A simple spec always takes less time than a minimum one. We must
132+
typically open the adaptive VOC pace! Given maintainable
133+
requirements, quickly adjusting the multiple stakeholder off the
134+
pair sequence will appropriately plan the single methodology. It was
135+
discovered that by efficiently learning the MVP interactions, we can
136+
spike the alpha WIP cycle time by the pirate project management.
137+
Given predictable charts, elegantly practicing the standup sprint to
138+
the rapid product owner will perfectly work the cross-functional
139+
feedback.
140+
</p>
141+
</hx-div>
142+
143+
<footer>
144+
<button class="hxBtn hxPrimary">Submit</button>
145+
<button class="hxBtn">Cancel</button>
146+
</footer>
147+
</hx-popover>
148+
</div>
149+
150+
<footer>
151+
{% code 'html' %}{% raw %}
152+
<hx-disclosure aria-controls="scrollingPopoverDemo" class="hxBtn">
153+
Toggle
154+
</hx-disclosure>
155+
156+
<hx-popover id="scrollingPopoverDemo" position="{{ position.value }}">
157+
<header>
158+
Popover Header
159+
</header>
160+
161+
<hx-div scroll="vertical">
162+
<p>...</p>
163+
<p>...</p>
164+
<p>...</p>
165+
</hx-div>
166+
167+
<footer>
168+
<button class="hxBtn hxPrimary">Submit</button>
169+
<button class="hxBtn">Cancel</button>
170+
</footer>
171+
</hx-popover>{% endraw %}
172+
{% endcode %}
173+
</footer>
174+
</div>
175+
<p class="hxSubdued hxSubBody">
176+
<hx-icon type="info-circle"></hx-icon>
177+
Please refer to <a href="components/box/#scrolling-containers">
178+
"Scrolling Containers"</a> documentation for more information about
179+
scrolling popover content.
180+
</p>
181+
</section>
81182
{% endblock %}

‎docs/components/popovers/popover-demo.js‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,20 @@
1-
if (document.getElementById('vue-popoverDemo')) {
2-
const POSITIONS = [
3-
{ label: 'Top Start', value: 'top-start' },
4-
{ label: 'Top Left', value: 'top-left' },
5-
{ label: 'Top', value: 'top' },
6-
{ label: 'Top Right', value: 'top-right' },
7-
{ label: 'Top End', value: 'top-end' },
8-
{ label: 'Right Start', value: 'right-start' },
9-
{ label: 'Right Top', value: 'right-top' },
10-
{ label: 'Right', value: 'right' },
11-
{ label: 'Right Bottom', value: 'right-bottom' },
12-
{ label: 'Right End', value: 'right-end' },
13-
{ label: 'Bottom End', value: 'bottom-end' },
14-
{ label: 'Bottom Right', value: 'bottom-right' },
15-
{ label: 'Bottom', value: 'bottom' },
16-
{ label: 'Bottom Left', value: 'bottom-left' },
17-
{ label: 'Bottom Start', value: 'bottom-start' },
18-
{ label: 'Left End', value: 'left-end' },
19-
{ label: 'Left Bottom', value: 'left-bottom' },
20-
{ label: 'Left', value: 'left' },
21-
{ label: 'Left Top', value: 'left-top' },
22-
{ label: 'Left Start', value: 'left-start' },
23-
];
1+
import { WITH_ARROW as POSITIONS } from '../../_positions.js';
242

3+
if (document.getElementById('vue-popoverDemo')) {
254
new Vue({
265
el: '#vue-popoverDemo',
276
data: {
28-
position: POSITIONS[11],
7+
position: POSITIONS[6], // "bottom-right"
8+
positions: POSITIONS,
9+
},
10+
});
11+
}
12+
13+
if (document.getElementById('vue-scrollingPopoverDemo')) {
14+
new Vue({
15+
el: '#vue-scrollingPopoverDemo',
16+
data: {
17+
position: POSITIONS[6], // "bottom-right"
2918
positions: POSITIONS,
3019
},
3120
});

0 commit comments

Comments
 (0)