Skip to content

Commit 46041f2

Browse files
author
Ryan A. Johnson
committed
feat(Modals): add support for various Modal widths
* tweak Modals documentation to provide a single demo for all/multiple configurations * refactor Shadow CSS to remove unnecessary nesting/specificity
1 parent 3747d08 commit 46041f2

File tree

7 files changed

+311
-344
lines changed

7 files changed

+311
-344
lines changed

‎docs/_templates/helix.njk‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{% macro disclosure(label, controls, className="hxBtn") %}
2+
<hx-disclosure aria-controls="{{controls}}" class="{{className}}">
3+
{{label}}
4+
</hx-disclosure>
5+
{% endmacro %}

‎docs/components/modals/index.html‎

Lines changed: 57 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -13,70 +13,66 @@
1313
{% block content %}
1414
<section>
1515
<h2 id="basic-modal">Basic Modal</h2>
16-
<div class="example">
16+
<div class="example" id="vue-basicModalDemo" v-cloak>
17+
<header>
18+
<form class="beta-hxForm">
19+
<fieldset>
20+
<legend>Size</legend>
21+
<label v-for="_size in sizes">
22+
<input
23+
:value="_size"
24+
name="size"
25+
type="radio"
26+
v-model="size"
27+
/>
28+
<span v-text="_size.label"></span>
29+
<em class="hxSubBody" v-if="_size.default">(default)</em>
30+
</label>
31+
</fieldset>
32+
<fieldset>
33+
<legend>Options</legend>
34+
<label>
35+
<input type="checkbox" v-model="isScrollable">
36+
Scroll Body
37+
</label>
38+
</fieldset>
39+
</form>
40+
</header>
41+
1742
<div>
18-
<hx-disclosure aria-controls="demo-modal" class="hxBtn" id="open-modal">
43+
<hx-disclosure
44+
aria-controls="demo-modal"
45+
class="hxBtn"
46+
id="open-modal"
47+
>
1948
Open Modal
2049
</hx-disclosure>
2150

22-
<hx-modal id="demo-modal">
51+
<hx-modal
52+
:class="size.className"
53+
id="demo-modal"
54+
>
2355
<header>
24-
<h3>Demo Modal Header</h3>
56+
<h3>Modal Header</h3>
2557
</header>
26-
<hx-div>
58+
59+
<hx-div v-if="isScrollable" scroll="vertical">
2760
<p>
28-
This is the body of a demo modal. No further actions can happen
29-
on the page until this modal is closed.
61+
This is the body of a demo modal. Interaction
62+
with content behind this modal cannot take
63+
place until this modal is closed.
3064
</p>
65+
{{ lorem(8) }}
3166
</hx-div>
32-
<footer>
33-
<button class="hxBtn hxPrimary">Confirm</button>
34-
<button class="hxBtn">Cancel</button>
35-
</footer>
36-
</hx-modal>
37-
</div>
38-
39-
<footer>
40-
{% code 'html' %}
41-
<hx-disclosure aria-controls="demo-modal" class="hxBtn">
42-
Open Modal
43-
</hx-disclosure>
44-
45-
<hx-modal id="demo-modal">
46-
<header>
47-
<h3>Demo Modal Header</h3>
48-
</header>
49-
<hx-div>
50-
<p>
51-
This is the body of a demo modal. No further actions can happen
52-
on the page until this modal is closed.
53-
</p>
54-
</hx-div>
55-
<footer>
56-
<button class="hxBtn hxPrimary">Confirm</button>
57-
<button class="hxBtn">Cancel</button>
58-
</footer>
59-
</hx-modal>
60-
{% endcode %}
61-
</footer>
62-
</div>
63-
</section>
6467

65-
<section>
66-
<h2 id="scrolling-modal">Scrolling Modal</h2>
67-
<div class="example">
68-
<div>
69-
<hx-disclosure aria-controls="scroll-modal" class="hxBtn">
70-
Open Modal
71-
</hx-disclosure>
72-
73-
<hx-modal id="scroll-modal">
74-
<header>
75-
<h3>Demo Modal Header</h3>
76-
</header>
77-
<hx-div scroll="vertical">
78-
{{ lorem(6) }}
68+
<hx-div v-else>
69+
<p>
70+
This is the body of a demo modal. Interaction
71+
with content behind this modal cannot take
72+
place until this modal is closed.
73+
</p>
7974
</hx-div>
75+
8076
<footer>
8177
<button class="hxBtn hxPrimary">Confirm</button>
8278
<button class="hxBtn">Cancel</button>
@@ -85,36 +81,18 @@ <h3>Demo Modal Header</h3>
8581
</div>
8682

8783
<footer>
88-
{% code 'html' %}
89-
<hx-disclosure aria-controls="scroll-modal" class="hxBtn">
90-
Open Modal
91-
</hx-disclosure>
92-
93-
<hx-modal id="scroll-modal">
94-
<header>
95-
<h3>Demo Modal Header</h3>
96-
</header>
97-
<hx-div scroll="vertical">
98-
<p>...</p>
99-
<p>...</p>
100-
<p>...</p>
101-
<p>...</p>
102-
<p>...</p>
103-
<p>...</p>
104-
</hx-div>
105-
<footer>
106-
<button class="hxBtn hxPrimary">Confirm</button>
107-
<button class="hxBtn">Cancel</button>
108-
</footer>
109-
</hx-modal>
110-
{% endcode %}
84+
<pre><code v-text="snippet"></code></pre>
11185
</footer>
11286
</div>
87+
<div app-loading class="hxBox-lg">
88+
<hx-busy></hx-busy>
89+
<p>Loading...</p>
90+
</div>
11391
<p class="hxSubdued hxSubBody">
11492
<hx-icon type="info-circle"></hx-icon>
115-
Please refer to <a href="components/box/#scrolling-containers">
116-
"Scrolling Containers"</a> documentation for more information about
117-
scrolling modal content.
93+
Please refer to
94+
<a href="components/box/#scrolling-containers">"Scrolling Containers"</a>
95+
documentation for more information about scrolling modal content.
11896
</p>
11997
</section>
12098
{% endblock %}

‎docs/components/modals/modal-demo.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import Util from '../../_util';
2+
3+
const SIZES = [
4+
{ label: 'Small', className: 'hxSm' },
5+
{ label: 'Medium', className: '', default: true },
6+
{ label: 'Large', className: 'hxLg' },
7+
];
8+
9+
if (document.getElementById('vue-basicModalDemo')) {
10+
new Vue({
11+
el: '#vue-basicModalDemo',
12+
data: {
13+
size: SIZES[1],
14+
sizes: SIZES,
15+
isScrollable: false,
16+
},
17+
computed: {
18+
attrScroll: function () {
19+
return (this.isScrollable ? 'scroll="vertical"' : '');
20+
},
21+
attrClass: function () {
22+
let { className } = this.size;
23+
return (className ? `class="${className}"` : '');
24+
},
25+
snippet: function () {
26+
return Util.snippet(`
27+
<hx-disclosure
28+
aria-controls="demo-modal"
29+
class="hxBtn"
30+
>
31+
Open Modal
32+
</hx-disclosure>
33+
<hx-modal
34+
id="demo-modal"
35+
${this.attrClass}
36+
>
37+
<header>
38+
...
39+
</header>
40+
41+
<hx-div ${this.attrScroll}>
42+
...
43+
</hx-div>
44+
45+
<footer>
46+
<button class="hxBtn hxPrimary">Confirm</button>
47+
<button class="hxBtn">Cancel</button>
48+
</footer>
49+
</hx-modal>
50+
`);
51+
},
52+
},
53+
});
54+
}

0 commit comments

Comments
 (0)