Skip to content

Commit 13a3c47

Browse files
Ryan A. JohnsonCathy Siller
Ryan A. Johnson
authored and
Cathy Siller
committed
fix(modals): modal positioning fixes
fixes #369 - change to position using flexbox instead of transform - transform causes browser to ignore `position: fixed;` children - deprecated hx-modalhead, hx-modalbody, and hx-modalfoot
1 parent 96af81b commit 13a3c47

File tree

14 files changed

+730
-191
lines changed

14 files changed

+730
-191
lines changed

‎docs/_data/nav.json5‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,6 @@
8585
{ label: '<hx-menu>', path: 'hx-menu' },
8686
{ label: '<hx-menuitem>', path: 'hx-menuitem' },
8787
{ label: '<hx-modal>', path: 'hx-modal' },
88-
{ label: '<hx-modalbody>', path: 'hx-modalbody' },
89-
{ label: '<hx-modalfoot>', path: 'hx-modalfoot' },
90-
{ label: '<hx-modalhead>', path: 'hx-modalhead' },
9188
{ label: '<hx-panel>', path: 'hx-panel' },
9289
{ label: '<hx-panelbody>', path: 'hx-panelbody' },
9390
{ label: '<hx-panelfoot>', path: 'hx-panelfoot' },

‎docs/components/modals/index.html‎

Lines changed: 145 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
title: Modals
33
minver: 0.2.1
44
also:
5+
components/box/#scrolling-containers: Scrolling Containers (Box)
6+
components/modals/test.html: Testing - Modals
57
elements/hx-disclosure: <hx-disclosure>
8+
elements/hx-div: <hx-div>
69
elements/hx-modal: <hx-modal>
7-
elements/hx-modalbody: <hx-modalbody>
8-
elements/hx-modalfoot: <hx-modalfoot>
9-
elements/hx-modalhead: <hx-modalhead>
1010
---
1111
{% extends 'component.njk' %}
1212
{% block content %}
@@ -19,19 +19,19 @@ <h2 id="basic-modal">Basic Modal</h2>
1919
</hx-disclosure>
2020

2121
<hx-modal id="demo-modal">
22-
<hx-modalhead>
22+
<header>
2323
<h3>Demo Modal Header</h3>
24-
</hx-modalhead>
25-
<hx-modalbody>
24+
</header>
25+
<hx-div>
2626
<p>
2727
This is the body of a demo modal. No further actions can happen
2828
on the page until this modal is closed.
2929
</p>
30-
</hx-modalbody>
31-
<hx-modalfoot>
30+
</hx-div>
31+
<footer>
3232
<button class="hxBtn hxPrimary">Confirm</button>
3333
<button class="hxBtn">Cancel</button>
34-
</hx-modalfoot>
34+
</footer>
3535
</hx-modal>
3636
</div>
3737

@@ -42,22 +42,152 @@ <h3>Demo Modal Header</h3>
4242
</hx-disclosure>
4343

4444
<hx-modal id="demo-modal">
45-
<hx-modalhead>
45+
<header>
4646
<h3>Demo Modal Header</h3>
47-
</hx-modalhead>
48-
<hx-modalbody>
47+
</header>
48+
<hx-div>
4949
<p>
5050
This is the body of a demo modal. No further actions can happen
5151
on the page until this modal is closed.
5252
</p>
53-
</hx-modalbody>
54-
<hx-modalfoot>
53+
</hx-div>
54+
<footer>
5555
<button class="hxBtn hxPrimary">Confirm</button>
5656
<button class="hxBtn">Cancel</button>
57-
</hx-modalfoot>
57+
</footer>
5858
</hx-modal>
5959
{% endcode %}
6060
</footer>
6161
</div>
6262
</section>
63+
64+
<section>
65+
<h2 id="scrolling-modal">Scrolling Modal</h2>
66+
<div class="example">
67+
<div>
68+
<hx-disclosure aria-controls="scroll-modal" class="hxBtn">
69+
Open Modal
70+
</hx-disclosure>
71+
72+
<hx-modal id="scroll-modal">
73+
<header>
74+
<h3>Demo Modal Header</h3>
75+
</header>
76+
<hx-div scroll="vertical">
77+
<p>
78+
Ice cream cheesecake jujubes. Sugar plum brownie biscuit powder toffee
79+
halvah brownie. Donut lollipop bonbon. Wafer cotton candy marshmallow
80+
macaroon souffle toffee. Fruitcake sugar plum souffle biscuit. Pie
81+
wafer pastry jujubes brownie ice cream donut cake. Cheesecake chupa
82+
chups apple pie pie sesame snaps chocolate.
83+
</p>
84+
85+
<p>
86+
I love sweet roll I love sugar plum pie. Toffee lemon drops
87+
cotton candy cake gummi bears chocolate bar. Tart chocolate
88+
cotton candy halvah oat cake jelly beans. Jelly tart pudding
89+
biscuit pastry dragee topping caramels muffin. Pastry pudding
90+
oat cake chocolate bar. Candy tart croissant. I love icing candy
91+
croissant I love carrot cake.
92+
</p>
93+
94+
<p>
95+
Powder halvah candy cookie bear claw donut fruitcake brownie.
96+
Lemon drops I love gingerbread carrot cake oat cake fruitcake
97+
brownie gummies fruitcake. Liquorice gingerbread powder sweet.
98+
Marzipan cheesecake cake. Candy cupcake bonbon carrot cake chupa
99+
chups pie pie. Donut gummies I love lemon drops gingerbread
100+
powder candy topping caramels. Pie toffee croissant jelly-o.
101+
</p>
102+
103+
<p>
104+
Wafer bonbon I love souffle marzipan candy. I love fruitcake
105+
caramels bonbon I love I love I love. Cheesecake cookie I love
106+
jelly-o. Pudding gummies tiramisu pastry tart apple pie tiramisu.
107+
Halvah candy canes chocolate bar apple pie cookie. Carrot cake
108+
pudding dragee jelly pastry oat cake lemon drops. Biscuit candy
109+
chocolate sugar plum I love biscuit ice cream chocolate oat cake.
110+
Tootsie roll sweet I love fruitcake powder.
111+
</p>
112+
113+
<p>
114+
I love jujubes topping jelly gummi bears toffee sugar
115+
plum. Jelly tiramisu carrot cake pudding toffee macaroon sesame
116+
snaps cotton candy. I love candy jelly beans. I love I love
117+
wafer bonbon. Apple pie tiramisu wafer topping. Souffle wafer
118+
sweet roll cotton candy cheesecake I love pudding. Chupa chups
119+
jelly beans muffin pie sugar plum gummies. Pudding dessert
120+
macaroon jelly-o pastry topping brownie gingerbread. Icing
121+
biscuit tiramisu chocolate bar lemon drops brownie I love
122+
caramels. Biscuit muffin cotton candy pastry cotton candy sweet.
123+
</p>
124+
125+
<p>
126+
Ice cream cheesecake jujubes. Sugar plum brownie biscuit powder toffee
127+
halvah brownie. Donut lollipop bonbon. Wafer cotton candy marshmallow
128+
macaroon souffle toffee. Fruitcake sugar plum souffle biscuit. Pie
129+
wafer pastry jujubes brownie ice cream donut cake. Cheesecake chupa
130+
chups apple pie pie sesame snaps chocolate.
131+
</p>
132+
133+
<p>
134+
I love sweet roll I love sugar plum pie. Toffee lemon drops
135+
cotton candy cake gummi bears chocolate bar. Tart chocolate
136+
cotton candy halvah oat cake jelly beans. Jelly tart pudding
137+
biscuit pastry dragee topping caramels muffin. Pastry pudding
138+
oat cake chocolate bar. Candy tart croissant. I love icing candy
139+
croissant I love carrot cake.
140+
</p>
141+
142+
<p>
143+
Powder halvah candy cookie bear claw donut fruitcake brownie.
144+
Lemon drops I love gingerbread carrot cake oat cake fruitcake
145+
brownie gummies fruitcake. Liquorice gingerbread powder sweet.
146+
Marzipan cheesecake cake. Candy cupcake bonbon carrot cake chupa
147+
chups pie pie. Donut gummies I love lemon drops gingerbread
148+
powder candy topping caramels. Pie toffee croissant jelly-o.
149+
</p>
150+
</hx-div>
151+
<footer>
152+
<button class="hxBtn hxPrimary">Confirm</button>
153+
<button class="hxBtn">Cancel</button>
154+
</footer>
155+
</hx-modal>
156+
</div>
157+
158+
<footer>
159+
{% code 'html' %}
160+
<hx-disclosure aria-controls="scroll-modal" class="hxBtn">
161+
Open Modal
162+
</hx-disclosure>
163+
164+
<hx-modal id="scroll-modal">
165+
<header>
166+
<h3>Demo Modal Header</h3>
167+
</header>
168+
<hx-div scroll="vertical">
169+
<p>...</p>
170+
<p>...</p>
171+
<p>...</p>
172+
<p>...</p>
173+
<p>...</p>
174+
<p>...</p>
175+
<p>...</p>
176+
<p>...</p>
177+
</hx-div>
178+
<footer>
179+
<button class="hxBtn hxPrimary">Confirm</button>
180+
<button class="hxBtn">Cancel</button>
181+
</footer>
182+
</hx-modal>
183+
{% endcode %}
184+
</footer>
185+
</div>
186+
<p class="hxSubdued hxSubBody">
187+
<hx-icon type="info-circle"></hx-icon>
188+
Please refer to <a href="components/box/#scrolling-containers">
189+
"Scrolling Containers"</a> documentation for more information about
190+
scrolling modal content.
191+
</p>
192+
</section>
63193
{% endblock %}

0 commit comments

Comments
 (0)