Skip to content

Commit 8db2144

Browse files
CITguyCITguy
authored
Merge pull request #459 from rackerlabs/dev-basic-form-controls
[Phase 1] Basic Form Controls
2 parents 5571231 + a574561 commit 8db2144

File tree

132 files changed

+4950
-2298
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

132 files changed

+4950
-2298
lines changed

‎docs/_data/nav.json5‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
{ label: 'Pagination', path: 'pagination' },
4747
{ label: 'Pills', path: 'pills' },
4848
{ label: 'Popovers', path: 'popovers' },
49+
{ label: 'Radios', path: 'radios' },
4950
{ label: 'Reveals', path: 'reveals' },
5051
{ label: 'Search', path: 'search' },
5152
{ label: 'Selector Strips', path: 'selector-strips' },
@@ -62,8 +63,8 @@
6263
label: 'Custom Elements',
6364
path: 'elements',
6465
children: [
65-
{ label: '<hx-accordion>', path: 'hx-accordion' },
6666
{ label: '<hx-accordion-panel>', path: 'hx-accordion-panel' },
67+
{ label: '<hx-accordion>', path: 'hx-accordion' },
6768
{ label: '<hx-alert>', path: 'hx-alert' },
6869
{ label: '<hx-busy>', path: 'hx-busy' },
6970
{ label: '<hx-checkbox>', path: 'hx-checkbox' },
@@ -82,9 +83,12 @@
8283
{ label: '<hx-pill>', path: 'hx-pill' },
8384
{ label: '<hx-popover>', path: 'hx-popover' },
8485
{ label: '<hx-progress>', path: 'hx-progress' },
86+
{ label: '<hx-radio>', path: 'hx-radio' },
8587
{ label: '<hx-reveal>', path: 'hx-reveal' },
86-
{ label: '<hx-search>', path: 'hx-search' },
8788
{ label: '<hx-search-assistance>', path: 'hx-search-assistance' },
89+
{ label: '<hx-search>', path: 'hx-search' },
90+
{ label: '<hx-select-control>', path: 'hx-select-control' },
91+
{ label: '<hx-select>', path: 'hx-select' },
8892
{ label: '<hx-status>', path: 'hx-status' },
8993
{ label: '<hx-tab>', path: 'hx-tab' },
9094
{ label: '<hx-tabcontent>', path: 'hx-tabcontent' },

‎docs/_templates/component.njk‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@
22

33
{% block layout %}
44
<main id="content" class="hxBox hxMd">
5-
<h1>{{ page.title }}
6-
{% include 'partials/min-version.njk' %}
7-
</h1>
5+
<header>
6+
<h1>
7+
{{ page.title }}
8+
{% include 'partials/min-version.njk' %}
9+
</h1>
10+
11+
{% block page_header %}
12+
{# extra header content goes here #}
13+
{% endblock %}
14+
</header>
815

916
{% block content %}
1017
{# freeform page content goes here #}
@@ -15,14 +22,6 @@
1522
{% endif %}
1623
</main>
1724
<aside class="hxSiderail hxBox hxMd">
18-
<h1 class="hxHeading-4">On this page:</h1>
19-
<nav class="article-toc">
20-
{{ page.raw | toc | safe }}
21-
{% if page.also %}
22-
<a href="#see-also">See Also</a>
23-
{% endif %}
24-
<hr class="hxDivider" />
25-
<a class="top-link" href="#top">Back to Top</a>
26-
</nav>
25+
{% include 'partials/sidebar.njk' %}
2726
</aside>
2827
{% endblock %}

‎docs/_templates/element.njk‎

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,53 @@
22

33
{% block layout %}
44
<main id="content" class="hxBox hxMd">
5-
<h1>{{ page.title }}
6-
{% include 'partials/min-version.njk' %}
7-
</h1>
5+
<header>
6+
<h1>
7+
{{ page.title }}
8+
{% include 'partials/min-version.njk' %}
9+
</h1>
10+
11+
{% block page_header %}
12+
{# extra header content goes here #}
13+
{% endblock %}
14+
</header>
815

916
{% block content %}
1017
{# freeform page content goes here #}
1118
{% endblock %}
1219

1320
{# ATTRIBUTES #}
1421
<section>
15-
<h2 id="attributes">Attributes</h2>
16-
<p>
17-
Attributes enable declarative configuration of an element,
18-
via HTML markup.
19-
</p>
22+
<header>
23+
<h2 id="attributes">Attributes</h2>
24+
<p>
25+
Attributes enable declarative configuration of an element,
26+
via HTML markup.
27+
</p>
28+
</header>
29+
2030
{% block attributes %}
21-
<p class="hxSubdued">
22-
<small>
23-
<hx-icon type="info-circle"></hx-icon>
24-
This element does not have any configurable attributes.
25-
</small>
31+
<p class="hxSubdued hxSubBody">
32+
<hx-icon type="info-circle"></hx-icon>
33+
This element does not have any configurable attributes.
2634
</p>
2735
{% endblock %}
2836
</section>
2937

3038
{# PROPERTIES #}
3139
<section>
32-
<h2 id="properties">Properties</h2>
33-
<p>
34-
JavaScript properties enable programmatic access to an element's
35-
configuration and state.
36-
</p>
40+
<header>
41+
<h2 id="properties">Properties</h2>
42+
<p>
43+
JavaScript properties enable programmatic access to an element's
44+
configuration and state.
45+
</p>
46+
</header>
47+
3748
{% block properties %}
38-
<p class="hxSubdued">
39-
<small>
40-
<hx-icon type="info-circle"></hx-icon>
41-
This element does not have any configurable properties.
42-
</small>
49+
<p class="hxSubdued hxSubBody">
50+
<hx-icon type="info-circle"></hx-icon>
51+
This element does not have any configurable properties.
4352
</p>
4453
{% endblock %}
4554
</section>
@@ -48,8 +57,12 @@
4857
{% include 'partials/see-also.njk' %}
4958
{% endif %}
5059
</main>
60+
5161
<aside class="hxSiderail hxBox hxMd">
52-
<h1 class="hxHeading-4">On this page:</h1>
62+
<header>
63+
<h1 class="hxHeading-4">On this page:</h1>
64+
</header>
65+
5366
<nav class="article-toc">
5467
{{ page.raw | toc | safe }}
5568
<a href="#attributes">Attributes</a>

‎docs/_templates/guide.njk‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22

33
{% block layout %}
44
<main id="content" class="hxBox hxMd">
5-
<h1>{{ page.title }}</h1>
5+
<header>
6+
<h1>{{ page.title }}</h1>
7+
8+
{% block page_header %}
9+
{# extra header content goes here #}
10+
{% endblock %}
11+
</header>
612

713
{% block content %}
814
{# page content goes here #}

‎docs/_templates/partials/sidebar.njk‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
<h1 class="hxHeading-4">On this page:</h1>
1+
<header>
2+
<h1 class="hxHeading-4">On this page:</h1>
3+
</header>
4+
25
<nav class="article-toc">
36
{{ page.raw | toc | safe }}
47
{% if page.also %}

‎docs/_templates/test.njk‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
{% extends 'application.njk' %}
22

3-
{% block after_footer %}
4-
<script src="scripts/test-helpers.js"></script>
5-
{% endblock %}
6-
73
{% block layout %}
8-
<main id="content" class="hxBox hxLg test-content">
9-
<h1>{{ page.title }}</h1>
4+
<main id="content" class="hxBox hxLg test-content {{contentClasses}}">
5+
<header>
6+
<h1>{{ page.title }}</h1>
7+
8+
{% block page_header %}
9+
{# extra header content goes here #}
10+
{% endblock %}
11+
</header>
1012

1113
{% block content %}
1214
{# freeform page content goes here #}

‎docs/components/accordions/test.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Testing - Accordions
33
---
4+
{% set contentClasses = 'accordions-test' %}
45
{% extends 'test.njk' %}
56
{% block content %}
67
<section>

‎docs/components/alerts/index.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,32 @@ <h2 id="basic-alert">Basic Alert</h2>
1717
<div class="example" id="vue-alertDemo" v-cloak>
1818
<header>
1919
<form class="beta-hxForm">
20-
<p>
21-
<label for="selType">Type</label>
20+
<div>
21+
<label for="selType" class="beta-hxFieldName">Type</label>
2222
<select id="selType" v-model="type">
2323
<option v-for="_type in types" :value="_type">
2424
{% raw %}{{ _type.label }}{% endraw %}
2525
</option>
2626
</select>
27-
</p>
27+
</div>
2828
<p>
29-
<label for="txtStatus">Status</label>
29+
<label for="txtStatus" class="beta-hxFieldName">Status</label>
3030
<input id="txtStatus" class="hxTextCtrl" v-model="status" />
3131
</p>
3232
<p>
33-
<label for="txtCta">CTA</label>
33+
<label for="txtCta" class="beta-hxFieldName">CTA</label>
3434
<input id="txtCta" class="hxTextCtrl" v-model="cta" />
3535
</p>
3636
<p>
37-
<label for="txtContent">Content</label>
37+
<label for="txtContent" class="beta-hxFieldName">Content</label>
3838
<textarea id="txtContent" class="hxTextCtrl" v-model="content"></textarea>
3939
</p>
4040
<fieldset>
41-
<legend>Options</legend>
42-
<label>
43-
<input type="checkbox" v-model="isPersistent">
44-
Persist
45-
</label>
41+
<legend class="beta-hxFieldName">Options</legend>
42+
<div>
43+
<input id="chkIsPersistent" type="checkbox" v-model="isPersistent">
44+
<label for="chkIsPersistent">Persist</label>
45+
</div>
4646
</fieldset>
4747
</form>
4848
</header>

‎docs/components/box/index.html‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,16 +52,16 @@ <h2 id="spacing">Spacing</h2>
5252
<div class="example" id="vue-boxDemo" v-cloak>
5353
<header>
5454
<form class="beta-hxForm">
55-
<p>
56-
<label for="selSpacing">Spacing</label>
55+
<div>
56+
<label for="selSpacing" class="beta-hxFieldName">Spacing</label>
5757
<select id="selSpacing" v-model="spacing">
5858
<option
5959
v-for="_spacing in spacings"
6060
v-text="_spacing.label"
6161
:value="_spacing"
6262
></option>
6363
</select>
64-
</p>
64+
</div>
6565
</form>
6666
</header>
6767

@@ -167,23 +167,24 @@ <h2 id="scrolling-containers">Scrolling Containers</h2>
167167
<header>
168168
<form class="beta-hxForm">
169169
<fieldset>
170-
<legend>Scroll Direction</legend>
171-
<label v-for="_direction in directions">
170+
<legend class="beta-hxFieldName">Scroll Direction</legend>
171+
<div v-for="(_direction, idx) in directions">
172172
<input
173+
:id="'radDirection' + idx"
173174
:value="_direction"
174175
name="direction"
175176
type="radio"
176177
v-model="direction"
177178
/>
178-
<span v-text="_direction"></span>
179-
</label>
179+
<label :for="'radDirection' + idx" v-text="_direction"></label>
180+
</div>
180181
</fieldset>
181182
<fieldset>
182-
<legend>Options</legend>
183-
<label>
184-
<input type="checkbox" v-model="isListening" />
185-
Log events to console
186-
</label>
183+
<legend class="beta-hxFieldName">Options</legend>
184+
<div>
185+
<input id="chkLogEvents" type="checkbox" v-model="isListening" />
186+
<label for="chkLogEvents">Log events to console</label>
187+
</div>
187188
</fieldset>
188189
</form>
189190
</header>

0 commit comments

Comments
 (0)