Skip to content

Commit 9ddca4d

Browse files
CITguyCITguy
authored
Merge pull request #429 from rackerlabs/ff-smart-positioning-v0.15
[412] feat(Positionable): implement "smart" repositioning logic
2 parents f82d2b8 + feae20a commit 9ddca4d

File tree

24 files changed

+796
-595
lines changed

24 files changed

+796
-595
lines changed

‎docs/_positions.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
export const WITH_ARROW = [
22
{ label: 'Top Left', value: 'top-left' },
3-
{ label: 'Top', value: 'top' },
3+
{ label: 'Top Center', value: 'top-center' },
44
{ label: 'Top Right', value: 'top-right' },
55
{ label: 'Right Top', value: 'right-top' },
6-
{ label: 'Right', value: 'right' },
6+
{ label: 'Right Middle', value: 'right-middle' },
77
{ label: 'Right Bottom', value: 'right-bottom' },
88
{ label: 'Bottom Right', value: 'bottom-right' },
9-
{ label: 'Bottom', value: 'bottom' },
9+
{ label: 'Bottom Center', value: 'bottom-center' },
1010
{ label: 'Bottom Left', value: 'bottom-left' },
1111
{ label: 'Left Bottom', value: 'left-bottom' },
12-
{ label: 'Left', value: 'left' },
12+
{ label: 'Left Middle', value: 'left-middle' },
1313
{ label: 'Left Top', value: 'left-top' },
1414
];
1515

1616
export const WITHOUT_ARROW = [
1717
{ label: 'Top Start', value: 'top-start' },
1818
{ label: 'Top Left', value: 'top-left' },
19-
{ label: 'Top', value: 'top' },
19+
{ label: 'Top Center', value: 'top-center' },
2020
{ label: 'Top Right', value: 'top-right' },
2121
{ label: 'Top End', value: 'top-end' },
2222
{ label: 'Right Start', value: 'right-start' },
2323
{ label: 'Right Top', value: 'right-top' },
24-
{ label: 'Right', value: 'right' },
24+
{ label: 'Right Middle', value: 'right-middle' },
2525
{ label: 'Right Bottom', value: 'right-bottom' },
2626
{ label: 'Right End', value: 'right-end' },
2727
{ label: 'Bottom End', value: 'bottom-end' },
2828
{ label: 'Bottom Right', value: 'bottom-right' },
29-
{ label: 'Bottom', value: 'bottom' },
29+
{ label: 'Bottom Center', value: 'bottom-center' },
3030
{ label: 'Bottom Left', value: 'bottom-left' },
3131
{ label: 'Bottom Start', value: 'bottom-start' },
3232
{ label: 'Left End', value: 'left-end' },
3333
{ label: 'Left Bottom', value: 'left-bottom' },
34-
{ label: 'Left', value: 'left' },
34+
{ label: 'Left Middle', value: 'left-middle' },
3535
{ label: 'Left Top', value: 'left-top' },
3636
{ label: 'Left Start', value: 'left-start' },
3737
];

‎docs/_templates/props/Positionable/optimumPosition.njk‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<dt>optimumPosition {String|undefined}</dt>
2+
<dd>
3+
<p>
4+
Optimum position determined by internal positioning algorithm.
5+
</p>
6+
<p>
7+
It will return undefined if <code>{{page.title}}</code>
8+
hasn't been repositioned.
9+
</p>
10+
</dd>

‎docs/_templates/props/Positionable/relativeElement.njk‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<dt>
2+
relativeElement {HTMLElement}
3+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
4+
</dt>
5+
<dd>
6+
<p>
7+
HTML element used as a point of reference for calculating the fixed
8+
position of the <code>{{page.title}}</code>.
9+
</p>
10+
<p>
11+
If the <code>relative-to</code> attribute is defined, this will return
12+
the first element whose ID matches the <code>relativeTo</code> property.
13+
Otherwise, it will return the value of <code>controlElement</code>.
14+
</p>
15+
</dd>

‎docs/_templates/props/Positionable/relativeTo.njk‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<dt>relativeTo {String}</dt>
2+
<dd>
3+
<p>
4+
A string corresponding to the ID of the <i>relative element</i>.
5+
</p>
6+
<p class="hxSubdued hxSubBody">
7+
<hx-icon type="info-circle"></hx-icon>
8+
Reflects the <code>relative-to</code> attribute.
9+
</p>
10+
</dd>

‎docs/_templates/props/Revealable/open.njk‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<dt>open {Boolean [false]}</dt>
2+
<dd>
3+
<p>
4+
Indicates whether or not the <code>{{page.title}}</code>
5+
should be displayed.
6+
</p>
7+
</dd>

‎docs/components/tooltips/tooltip-demo.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ if (document.getElementById('vue-tooltipDemo')) {
44
new Vue({
55
el: '#vue-tooltipDemo',
66
data: {
7-
position: POSITIONS[1], // "top"
7+
position: POSITIONS[1], // "top-center"
88
positions: POSITIONS,
99
},
1010
});

‎docs/elements/hx-menu/index.html‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -62,49 +62,40 @@
6262

6363
{% block properties %}
6464
<dl class="memberList">
65+
<!-- Positionable Mixin -->
6566
<dt>
6667
controlElement {HTMLElement}
6768
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
6869
</dt>
6970
<dd>
7071
<p>
71-
Returns the HTML element with the <code>aria-controls</code>
72-
attribute that matches the <code>&lt;hx-menu&gt;</code> ID.
72+
Returns the first HTML element whose <code>aria-controls</code>
73+
attribute matches the ID of the <code>{{page.title}}</code>.
7374
</p>
74-
</dd>
75-
76-
<dt>open {Boolean [false]}</dt>
77-
<dd>
7875
<p>
79-
Manipulates the <code>open</code> attribute.
76+
The <i>control element</i> is used to attach various DOM event
77+
listeners, in order to determine when to show or hide the
78+
<code>{{page.title}}</code>.
8079
</p>
8180
</dd>
8281

82+
{% include 'props/Revealable/open.njk' %}
83+
{% include 'props/Positionable/optimumPosition.njk' %}
84+
85+
<!-- Positionable Mixin-->
8386
<dt>position {String [bottom-start]}</dt>
8487
<dd>
8588
<p>
86-
Manipulates the <code>position</code> attribute.
89+
Configures the position of the <code>{{page.title}}</code>,
90+
in relation to its <i>relative element</i>.
8791
</p>
88-
</dd>
89-
90-
<dt>
91-
relativeElement {HTMLElement}
92-
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
93-
</dt>
94-
<dd>
95-
<p>
96-
Returns the HTML element used as a reference to calculate the position of
97-
the open menu. If the <code>relative-to</code> attribute is set, this will
98-
be the element with ID matching the <code>relativeTo</code> property value.
99-
Otherwise, this will be the <code>controlElement</code>.
92+
<p class="hxSubdued hxSubBody">
93+
<hx-icon type="info-circle"></hx-icon>
94+
Reflects the <code>position</code> attribute.
10095
</p>
10196
</dd>
10297

103-
<dt>relativeTo {String}</dt>
104-
<dd>
105-
<p>
106-
Manipulates the <code>relative-to</code> attribute.
107-
</p>
108-
</dd>
98+
{% include 'props/Positionable/relativeElement.njk' %}
99+
{% include 'props/Positionable/relativeTo.njk' %}
109100
</dl>
110101
{% endblock %}

‎docs/elements/hx-popover/index.html‎

Lines changed: 5 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
</dt>
110110
<dd>
111111
<p>
112-
HTML element whose <code>aria-controls</code>
112+
Returns the first HTML element whose <code>aria-controls</code>
113113
attribute matches the ID of the <code>{{page.title}}</code>.
114114
</p>
115115
<p>
@@ -119,14 +119,8 @@
119119
</p>
120120
</dd>
121121

122-
<!-- Revealable Mixin -->
123-
<dt>open {Boolean [false]}</dt>
124-
<dd>
125-
<p>
126-
Indicates whether or not the <code>{{page.title}}</code>
127-
should be displayed.
128-
</p>
129-
</dd>
122+
{% include 'props/Revealable/open.njk' %}
123+
{% include 'props/Positionable/optimumPosition.njk' %}
130124

131125
<!-- Positionable Mixin-->
132126
<dt>position {String [bottom-right]}</dt>
@@ -141,33 +135,7 @@
141135
</p>
142136
</dd>
143137

144-
<!-- Positionable Mixin-->
145-
<dt>
146-
relativeElement {HTMLElement}
147-
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
148-
</dt>
149-
<dd>
150-
<p>
151-
HTML element used as a point of reference for calculating the fixed
152-
position of the <code>{{page.title}}</code>.
153-
</p>
154-
<p>
155-
If the <code>relative-to</code> attribute is defined, this will return
156-
the first element whose ID matches the <code>relativeTo</code> property.
157-
Otherwise, it will return the value of <code>controlElement</code>.
158-
</p>
159-
</dd>
160-
161-
<!-- Positionable Mixin-->
162-
<dt>relativeTo {String}</dt>
163-
<dd>
164-
<p>
165-
A string corresponding to the ID of the <i>relative element</i>.
166-
</p>
167-
<p class="hxSubdued hxSubBody">
168-
<hx-icon type="info-circle"></hx-icon>
169-
Reflects the <code>relative-to</code> attribute.
170-
</p>
171-
</dd>
138+
{% include 'props/Positionable/relativeElement.njk' %}
139+
{% include 'props/Positionable/relativeTo.njk' %}
172140
</dl>
173141
{% endblock %}

‎docs/elements/hx-search-assistance/index.html‎

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -56,52 +56,40 @@
5656

5757
{% block properties %}
5858
<dl class="memberList">
59+
<!-- Positionable Mixin -->
5960
<dt>
6061
controlElement {HTMLElement}
6162
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
6263
</dt>
6364
<dd>
6465
<p>
65-
Returns the HTML element with the <code>aria-controls</code>
66-
attribute that matches the <code>&lt;hx-search&gt;</code> id.
66+
Returns the first HTML element whose <code>aria-controls</code>
67+
attribute matches the ID of the <code>{{page.title}}</code>.
6768
</p>
68-
</dd>
69-
70-
<dt>open {Boolean [false]}</dt>
71-
<dd>
7269
<p>
73-
Manipulates the <code>open</code> attribute. Opens the search
74-
assistance.
70+
The <i>control element</i> is used to attach various DOM event
71+
listeners, in order to determine when to show or hide the
72+
<code>{{page.title}}</code>.
7573
</p>
7674
</dd>
7775

76+
{% include 'props/Revealable/open.njk' %}
77+
{% include 'props/Positionable/optimumPosition.njk' %}
78+
79+
<!-- Positionable Mixin-->
7880
<dt>position {String [bottom-start]}</dt>
7981
<dd>
8082
<p>
81-
Manipulates the <code>position</code> attribute.
83+
Configures the position of the <code>{{page.title}}</code>,
84+
in relation to its <i>relative element</i>.
8285
</p>
83-
</dd>
84-
85-
<dt>
86-
relativeElement {HTMLElement}
87-
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
88-
</dt>
89-
<dd>
90-
<p>
91-
Returns the HTML element used as a reference to calculate the position of
92-
the visible search assistance. If the
93-
<code>relative-to</code> attribute is set, this will be the element with
94-
ID matching the <code>relativeTo</code> property value. Otherwise, this
95-
will be the <code>controlElement</code>.
86+
<p class="hxSubdued hxSubBody">
87+
<hx-icon type="info-circle"></hx-icon>
88+
Reflects the <code>position</code> attribute.
9689
</p>
9790
</dd>
9891

99-
<dt>relativeTo {String}</dt>
100-
<dd>
101-
<p>
102-
Manipulates the <code>relative-to</code> attribute. ID of an element
103-
that the search assistance is positioned relative to.
104-
</p>
105-
</dd>
92+
{% include 'props/Positionable/relativeElement.njk' %}
93+
{% include 'props/Positionable/relativeTo.njk' %}
10694
</dl>
10795
{% endblock %}

‎docs/elements/hx-tooltip/index.html‎

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,8 @@
101101
</dt>
102102
<dd>
103103
<p>
104-
HTML element whose ID matches the <code>htmlFor</code> value.
104+
Returns the HTML element whose ID matches the
105+
<code>htmlFor</code> value.
105106
</p>
106107
<p>
107108
The <i>control element</i> is used to attach various DOM event
@@ -122,14 +123,8 @@
122123
</p>
123124
</dd>
124125

125-
<!-- Revealable Mixin -->
126-
<dt>open {Boolean [false]}</dt>
127-
<dd>
128-
<p>
129-
Indicates whether or not the <code>{{page.title}}</code>
130-
should be displayed.
131-
</p>
132-
</dd>
126+
{% include 'props/Revealable/open.njk' %}
127+
{% include 'props/Positionable/optimumPosition.njk' %}
133128

134129
<!-- Positionable Mixin-->
135130
<dt>position {String [top]}</dt>
@@ -144,33 +139,7 @@
144139
</p>
145140
</dd>
146141

147-
<!-- Positionable Mixin-->
148-
<dt>
149-
relativeElement {HTMLElement}
150-
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
151-
</dt>
152-
<dd>
153-
<p>
154-
HTML element used as a point of reference for calculating the fixed
155-
position of the <code>{{page.title}}</code>.
156-
</p>
157-
<p>
158-
If the <code>relative-to</code> attribute is defined, this will return
159-
the first element whose ID matches the <code>relativeTo</code> property.
160-
Otherwise, it will return the value of <code>controlElement</code>.
161-
</p>
162-
</dd>
163-
164-
<!-- Positionable Mixin-->
165-
<dt>relativeTo {String}</dt>
166-
<dd>
167-
<p>
168-
A string corresponding to the ID of the <i>relative element</i>.
169-
</p>
170-
<p class="hxSubdued hxSubBody">
171-
<hx-icon type="info-circle"></hx-icon>
172-
Reflects the <code>relative-to</code> attribute.
173-
</p>
174-
</dd>
142+
{% include 'props/Positionable/relativeElement.njk' %}
143+
{% include 'props/Positionable/relativeTo.njk' %}
175144
</dl>
176145
{% endblock %}

0 commit comments

Comments
 (0)