Skip to content

Commit ec78e28

Browse files
author
Ryan A. Johnson
committed
feat(*): Tabs and Panels updates
- fix #446 - `<hx-tab>` emits `hxtabclick` event with additional `tab` payload data - `<hx-tabset>` listens for `hxtabclick` and uses `tab` data to calculate current tab index - add "tabbed" panel variant - `<hx-tabcontent>` will emit a `scroll` event at document level if it detects a `scroll` event on itself. This is to support positioned elements in scrolling tab content within a tabbed Panel component. - update Badge docs to correct "Tab Badge" markup - wrap plain text node children of `<hx-tab>` with `<span>` - tweak component.njk to allow setting `contentClasses` variable - add "transparent" checkerboard background to demos - refactor Panel and Tab styles to favor modern CSS layout capabilities
1 parent 31d96a6 commit ec78e28

File tree

16 files changed

+519
-219
lines changed

16 files changed

+519
-219
lines changed

‎docs/_templates/component.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% extends 'application.njk' %}
22

33
{% block layout %}
4-
<main id="content" class="hxBox hxMd">
4+
<main id="content" class="hxBox hxMd component-content {{contentClasses}}">
55
<header>
66
<h1>
77
{{ page.title }}

‎docs/_templates/test.njk‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
{% block layout %}
44
<main id="content" class="hxBox hxLg test-content {{contentClasses}}">
55
<header>
6+
{% block breadcrumbs %}
7+
{# breadcrumbs go here #}
8+
{% endblock %}
9+
610
<h1>{{ page.title }}</h1>
711

812
{% block page_header %}

‎docs/components/badges/index.html‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,26 @@
55
guides/react-compatibility/#significant-white-space: Significant White Space (React Compatibility)
66
components/badges/test.html: Testing - Badges
77
---
8+
{% set contentClasses = 'docs-badge' %}
89
{% extends 'component.njk' %}
10+
11+
{% block page_header %}
12+
<p>
13+
Badges are inline elements that communicate change to an area of the site.
14+
They are implemented by applying the <code>.hxBadge</code> CSS class
15+
to a <code>&lt;span&gt;</code> element.
16+
</p>
17+
{% endblock %}
18+
919
{% block content %}
1020
<section>
11-
<p class="comfortable">
12-
Badges are inline elements that communicate change to an area of the site.
13-
They are implemented by applying the <code>.hxBadge</code> CSS class
14-
to a <code>&lt;span&gt;</code> element.
15-
</p>
16-
</section>
21+
<header>
22+
<h2 id="link-badge">Link Badge</h2>
23+
<p>
24+
Badges may be used with a hyperlink to bring attention to new items at the destination.
25+
</p>
26+
</header>
1727

18-
<section>
19-
<h2 id="link-badge">Link Badge</h2>
20-
<p>
21-
Badges may be used with a hyperlink to bring attention to new items at the destination.
22-
</p>
2328
<div class="example">
2429
<div>
2530
<a href="">
@@ -40,10 +45,13 @@ <h2 id="link-badge">Link Badge</h2>
4045
</section>
4146

4247
<section>
43-
<h2 id="icon-badge">Icon Badge</h2>
44-
<p>
45-
Badges can be combined with icons to create a compact notification.
46-
</p>
48+
<header>
49+
<h2 id="icon-badge">Icon Badge</h2>
50+
<p>
51+
Badges can be combined with icons to create a compact notification.
52+
</p>
53+
</header>
54+
4755
<div class="example">
4856
<div>
4957
<hx-icon type="bell"></hx-icon>
@@ -84,30 +92,34 @@ <h2 id="icon-badge">Icon Badge</h2>
8492
</section>
8593

8694
<section>
87-
<h2 id="tab-badge">Tab Badge</h2>
88-
<p>
89-
Badges may be used in tabs to bring attention to new items in unselected tabs.
90-
</p>
95+
<header>
96+
<h2 id="tab-badge">Tab Badge</h2>
97+
<p>
98+
Badges may be used in tabs to bring attention to new items in unselected tabs.
99+
</p>
100+
</header>
101+
91102
<div class="example">
92103
<div>
93104
<hx-tabset>
94105
<hx-tablist>
95106
<hx-tab>
96-
First
107+
<span>First</span>
97108
<span class="hxBadge">1</span>
98109
</hx-tab>
99110
<hx-tab>
100-
Second
111+
<span>Second</span>
101112
<span class="hxBadge">32</span>
102113
</hx-tab>
103-
<hx-tab>Third
114+
<hx-tab>
115+
<span>Third</span>
104116
<span class="hxBadge">99+</span>
105117
</hx-tab>
106118
</hx-tablist>
107119
<hx-tabcontent>
108-
<hx-tabpanel>...</hx-tabpanel>
109-
<hx-tabpanel>...</hx-tabpanel>
110-
<hx-tabpanel>...</hx-tabpanel>
120+
<hx-tabpanel>Tab 1</hx-tabpanel>
121+
<hx-tabpanel>Tab 2</hx-tabpanel>
122+
<hx-tabpanel>Tab 3</hx-tabpanel>
111123
</hx-tabcontent>
112124
</hx-tabset>
113125
</div>
@@ -117,22 +129,22 @@ <h2 id="tab-badge">Tab Badge</h2>
117129
<hx-tabset>
118130
<hx-tablist>
119131
<hx-tab>
120-
First
132+
<span>First</span>
121133
<span class="hxBadge">1</span>
122134
</hx-tab>
123135
<hx-tab>
124-
Second
136+
<span>Second</span>
125137
<span class="hxBadge">32</span>
126138
</hx-tab>
127139
<hx-tab>
128-
Third
140+
<span>Third</span>
129141
<span class="hxBadge">99+</span>
130142
</hx-tab>
131143
</hx-tablist>
132144
<hx-tabcontent>
133-
<hx-tabpanel>...</hx-tabpanel>
134-
<hx-tabpanel>...</hx-tabpanel>
135-
<hx-tabpanel>...</hx-tabpanel>
145+
<hx-tabpanel>Tab 1</hx-tabpanel>
146+
<hx-tabpanel>Tab 2</hx-tabpanel>
147+
<hx-tabpanel>Tab 3</hx-tabpanel>
136148
</hx-tabcontent>
137149
</hx-tabset>
138150
{% endcode %}

‎docs/components/panels/index.html‎

Lines changed: 117 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,65 @@
55
components/panels/test.html: Testing - Panels
66
elements/hx-div: <hx-div>
77
---
8+
{% set contentClasses = 'docs-panel' %}
89
{% extends 'component.njk' %}
10+
{% from 'lorem.njk' import lorem %}
11+
12+
{% block page_header %}
13+
<p>
14+
The Panel component is a layout utility for sectioning content
15+
vertically into a header, body, and footer.
16+
</p>
17+
{% endblock %}
18+
919
{% block content %}
1020
<section>
11-
<p>
12-
A panel is a utility for sectioning content vertically into a header,
13-
body, and footer.
14-
</p>
15-
</section>
16-
<section>
17-
<h2 id="basic-panel">Basic Panel</h2>
18-
<p class="hxSubBody hxSubdued">
19-
<hx-icon type="info-circle"></hx-icon>
20-
Watch how the panel reacts when you resize the demo, vertically.
21-
</p>
22-
<div class="example" id="vue-panelDemo" v-cloak>
21+
<header>
22+
<h2 id="basic-panel">Basic Panel</h2>
23+
<p>
24+
A basic panel allows body content to scroll vertically,
25+
when the panel height is constrained.
26+
</p>
27+
</header>
28+
29+
<div id="vue-panelDemo" class="example resizable" v-cloak>
2330
<header>
2431
<form class="beta-hxForm">
2532
<fieldset>
2633
<legend class="beta-hxFieldName">Options</legend>
27-
<div>
28-
<input id="chkHasHeader" type="checkbox" v-model="hasHeader" />
29-
<label for="chkHasHeader">Include Header</label>
30-
</div>
31-
<div>
32-
<input id="chkHasFooter" type="checkbox" v-model="hasFooter" />
33-
<label for="chkHasFooter">Include Footer</label>
34-
</div>
34+
<hx-checkbox-control>
35+
<input
36+
id="chkHasHeader"
37+
type="checkbox"
38+
v-model="hasHeader"
39+
/>
40+
<label for="chkHasHeader">
41+
<hx-checkbox></hx-checkbox>
42+
Include Header
43+
</label>
44+
</hx-checkbox-control>
45+
46+
<hx-checkbox-control>
47+
<input
48+
id="chkHasFooter"
49+
type="checkbox"
50+
v-model="hasFooter"
51+
/>
52+
<label for="chkHasFooter">
53+
<hx-checkbox></hx-checkbox>
54+
Include Footer
55+
</label>
56+
</hx-checkbox-control>
3557
</fieldset>
58+
59+
<p class="hxSubBody">
60+
<hx-icon type="info-circle"></hx-icon>
61+
Watch how the panel body reacts when you resize the example container.
62+
</p>
3663
</form>
3764
</header>
3865

39-
<div class="demo panel-demo">
66+
<div id="demo-basic">
4067
<div class="hxPanel">
4168
<header v-if="hasHeader">Panel Header</header>
4269
<hx-div>
@@ -91,10 +118,76 @@ <h2 id="basic-panel">Basic Panel</h2>
91118
</template>
92119
</footer>
93120
</div>
94-
<p class="hxSubdued hxSubBody">
95-
<hx-icon type="info-circle"></hx-icon>
96-
Visual styling added for demonstration purposes.
121+
122+
<footer>
123+
<p class="hxSubdued hxSubBody">
124+
<hx-icon type="info-circle"></hx-icon>
125+
Visual styling added for demonstration purposes.
126+
</p>
127+
</footer>
128+
</section>
129+
130+
<section>
131+
<header>
132+
<h2 id="tabbed-panel">Tabbed Panel</h2>
133+
<p>
134+
A tabbed panel replaces the <code>&lt;hx-div&gt;</code> element
135+
with a <a href="components/tabs">tabset</a>, to act as the panel body.
136+
</p>
137+
</header>
138+
139+
<p>
140+
Tab content is allowed to scroll while tabs remain visible.
97141
</p>
98142

143+
<div class="example resizable">
144+
<div id="demo-tabbed">
145+
<div class="hxPanel hxTabbed">
146+
<header>Panel Header</header>
147+
148+
<hx-tabset>
149+
<hx-tablist>
150+
<hx-tab>Basic</hx-tab>
151+
<hx-tab>Scrolling</hx-tab>
152+
</hx-tablist>
153+
154+
<hx-tabcontent>
155+
<hx-tabpanel>
156+
<p>Basic Tab Panel</p>
157+
</hx-tabpanel>
158+
159+
<hx-tabpanel>
160+
<p>Scrolling Tab Panel</p>
161+
{{ lorem(5) }}
162+
</hx-tabpanel>
163+
</hx-tabcontent>
164+
</hx-tabset>
165+
166+
<footer>Panel Footer</footer>
167+
</div>
168+
</div>
169+
170+
<footer>
171+
{% code 'html' %}
172+
<div class="hxPanel hxTabbed">
173+
<header>Panel Header</header>
174+
175+
<hx-tabset>
176+
<hx-tablist>
177+
<hx-tab>Basic</hx-tab>
178+
<hx-tab>Scrolling</hx-tab>
179+
</hx-tablist>
180+
181+
<hx-tabcontent>
182+
<hx-tabpanel>...</hx-tabpanel>
183+
<hx-tabpanel>...</hx-tabpanel>
184+
</hx-tabcontent>
185+
</hx-tabset>
186+
187+
<footer>Panel Footer</footer>
188+
</div>
189+
{% endcode %}
190+
</footer>
191+
</div>
99192
</section>
100193
{% endblock %}

0 commit comments

Comments
 (0)