Skip to content

Commit 447a9f0

Browse files
CITguyCITguy
authored
Merge pull request #458 from rackerlabs/dev-basic-form-controls--misc
Miscellaneous Updates to prepare for Checkboxes, Radios, and Dropdown Selects.
2 parents 234520e + 5e19f1a commit 447a9f0

File tree

34 files changed

+613
-496
lines changed

34 files changed

+613
-496
lines changed

‎docs/_data/nav.json5‎

Lines changed: 3 additions & 0 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' },
@@ -82,9 +83,11 @@
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' },
8688
{ label: '<hx-search>', path: 'hx-search' },
8789
{ label: '<hx-search-assistance>', path: 'hx-search-assistance' },
90+
{ label: '<hx-select>', path: 'hx-select' },
8891
{ label: '<hx-status>', path: 'hx-status' },
8992
{ label: '<hx-tab>', path: 'hx-tab' },
9093
{ label: '<hx-tabcontent>', path: 'hx-tabcontent' },

‎docs/components/alerts/index.html‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,32 +17,34 @@ <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 class="hxSelect">
2221
<select id="selType" v-model="type">
2322
<option v-for="_type in types" :value="_type">
2423
{% raw %}{{ _type.label }}{% endraw %}
2524
</option>
2625
</select>
27-
</p>
26+
<hx-select></hx-select>
27+
<label for="selType" class="beta-hxFieldName">Type</label>
28+
</div>
2829
<p>
29-
<label for="txtStatus">Status</label>
30+
<label for="txtStatus" class="beta-hxFieldName">Status</label>
3031
<input id="txtStatus" class="hxTextCtrl" v-model="status" />
3132
</p>
3233
<p>
33-
<label for="txtCta">CTA</label>
34+
<label for="txtCta" class="beta-hxFieldName">CTA</label>
3435
<input id="txtCta" class="hxTextCtrl" v-model="cta" />
3536
</p>
3637
<p>
37-
<label for="txtContent">Content</label>
38+
<label for="txtContent" class="beta-hxFieldName">Content</label>
3839
<textarea id="txtContent" class="hxTextCtrl" v-model="content"></textarea>
3940
</p>
4041
<fieldset>
41-
<legend>Options</legend>
42-
<label>
43-
<input type="checkbox" v-model="isPersistent">
44-
Persist
45-
</label>
42+
<legend class="beta-hxFieldName">Options</legend>
43+
<div class="hxCheckbox">
44+
<input id="chkIsPersistent" type="checkbox" v-model="isPersistent">
45+
<hx-checkbox for="chkIsPersistent"></hx-checkbox>
46+
<label for="chkIsPersistent">Persist</label>
47+
</div>
4648
</fieldset>
4749
</form>
4850
</header>

‎docs/components/box/index.html‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,16 +52,17 @@ <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 class="hxSelect">
5756
<select id="selSpacing" v-model="spacing">
5857
<option
5958
v-for="_spacing in spacings"
6059
v-text="_spacing.label"
6160
:value="_spacing"
6261
></option>
6362
</select>
64-
</p>
63+
<hx-select></hx-select>
64+
<label for="selSpacing" class="beta-hxFieldName">Spacing</label>
65+
</div>
6566
</form>
6667
</header>
6768

@@ -167,23 +168,26 @@ <h2 id="scrolling-containers">Scrolling Containers</h2>
167168
<header>
168169
<form class="beta-hxForm">
169170
<fieldset>
170-
<legend>Scroll Direction</legend>
171-
<label v-for="_direction in directions">
171+
<legend class="beta-hxFieldName">Scroll Direction</legend>
172+
<div v-for="(_direction, idx) in directions" class="hxRadio">
172173
<input
174+
:id="'radDirection' + idx"
173175
:value="_direction"
174176
name="direction"
175177
type="radio"
176178
v-model="direction"
177179
/>
178-
<span v-text="_direction"></span>
179-
</label>
180+
<hx-radio :for="'radDirection' + idx"></hx-radio>
181+
<label :for="'radDirection' + idx" v-text="_direction"></label>
182+
</div>
180183
</fieldset>
181184
<fieldset>
182-
<legend>Options</legend>
183-
<label>
184-
<input type="checkbox" v-model="isListening" />
185-
Log events to console
186-
</label>
185+
<legend class="beta-hxFieldName">Options</legend>
186+
<div class="hxCheckbox">
187+
<input id="chkLogEvents" type="checkbox" v-model="isListening" />
188+
<hx-checkbox for="chkLogEvents"></hx-checkbox>
189+
<label for="chkLogEvents">Log events to console</label>
190+
</div>
187191
</fieldset>
188192
</form>
189193
</header>

‎docs/components/buttons/index.html‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -34,30 +34,38 @@ <h2 id="basic-button">Basic Button</h2>
3434
<header>
3535
<form class="beta-hxForm">
3636
<fieldset>
37-
<legend>Variant</legend>
38-
<label v-for="_variant in variants">
37+
<legend class="beta-hxFieldName">Variant</legend>
38+
<div v-for="(_variant, idx) in variants" class="hxRadio">
3939
<input
40+
:id="'radBasicVariant' + idx"
4041
:value="_variant"
4142
name="variant"
4243
type="radio"
4344
v-model="variant"
4445
/>
45-
<span v-text="_variant.label"></span>
46-
<em class="hxSubBody" v-if="_variant.default">(default)</em>
47-
</label>
46+
<hx-radio :for="'radBasicVariant' + idx"></hx-radio>
47+
<label :for="'radBasicVariant' + idx">
48+
<span v-text="_variant.label"></span>
49+
<em class="hxSubBody" v-if="_variant.default">(default)</em>
50+
</label>
51+
</div>
4852
</fieldset>
4953
<fieldset>
50-
<legend>Size</legend>
51-
<label v-for="_size in sizes">
54+
<legend class="beta-hxFieldName">Size</legend>
55+
<div v-for="(_size, idx) in sizes" class="hxRadio">
5256
<input
57+
:id="'radBasicSize' + idx"
5358
:value="_size"
5459
name="size"
5560
type="radio"
5661
v-model="size"
5762
/>
58-
<span v-text="_size.label"></span>
59-
<em class="hxSubBody" v-if="_size.default">(default)</em>
60-
</label>
63+
<hx-radio :for="'radBasicSize' + idx"></hx-radio>
64+
<label :for="'radBasicSize' + idx">
65+
<span v-text="_size.label"></span>
66+
<em class="hxSubBody" v-if="_size.default">(default)</em>
67+
</label>
68+
</div>
6169
</fieldset>
6270
</form>
6371
</header>
@@ -122,30 +130,38 @@ <h2 id="button-group">Button Group</h2>
122130
<header>
123131
<form class="beta-hxForm">
124132
<fieldset>
125-
<legend>Variant</legend>
126-
<label v-for="_variant in variants">
133+
<legend class="beta-hxFieldName">Variant</legend>
134+
<div v-for="(_variant, idx) in variants" class="hxRadio">
127135
<input
136+
:id="'radGroupVariant' + idx"
128137
:value="_variant"
129138
name="variant"
130139
type="radio"
131140
v-model="variant"
132141
/>
133-
<span v-text="_variant.label"></span>
134-
<em class="hxSubBody" v-if="_variant.default">(default)</em>
135-
</label>
142+
<hx-radio :for="'radGroupVariant' + idx"></hx-radio>
143+
<label :for="'radGroupVariant' + idx">
144+
<span v-text="_variant.label"></span>
145+
<em class="hxSubBody" v-if="_variant.default">(default)</em>
146+
</label>
147+
</div>
136148
</fieldset>
137149
<fieldset>
138-
<legend>Size</legend>
139-
<label v-for="_size in sizes">
150+
<legend class="beta-hxFieldName">Size</legend>
151+
<div v-for="(_size, idx) in sizes" class="hxRadio">
140152
<input
153+
:id="'radGroupSize' + idx"
141154
:value="_size"
142155
name="size"
143156
type="radio"
144157
v-model="size"
145158
/>
146-
<span v-text="_size.label"></span>
147-
<em class="hxSubBody" v-if="_size.default">(default)</em>
148-
</label>
159+
<hx-radio :for="'radGroupSize' + idx"></hx-radio>
160+
<label :for="'radGroupSize' + idx">
161+
<span v-text="_size.label"></span>
162+
<em class="hxSubBody" v-if="_size.default">(default)</em>
163+
</label>
164+
</div>
149165
</fieldset>
150166
</form>
151167
</header>

‎docs/components/checkboxes/index.html‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,27 @@ <h2 id="basic-checkbox">Basic Checkbox</h2>
1313
<header>
1414
<form class="beta-hxForm">
1515
<fieldset>
16-
<legend>Options</legend>
17-
<label>
18-
<input type="checkbox" v-model="isChecked" />
19-
Checked
20-
</label>
21-
<label>
22-
<input type="checkbox" v-model="isDisabled" />
23-
Disabled
24-
</label>
25-
<label>
26-
<input type="checkbox" v-model="isIndeterminate" />
27-
Indeterminate
28-
</label>
29-
<label>
30-
<input type="checkbox" v-model="isInvalid" />
31-
Invalid
32-
</label>
16+
<legend class="beta-hxFieldName">Options</legend>
17+
<div class="hxCheckbox">
18+
<input id="chkIsChecked" type="checkbox" v-model="isChecked" />
19+
<hx-checkbox for="chkIsChecked"></hx-checkbox>
20+
<label for="chkIsChecked">Checked</label>
21+
</div>
22+
<div class="hxCheckbox">
23+
<input id="chkIsDisabled" type="checkbox" v-model="isDisabled" />
24+
<hx-checkbox for="chkIsDisabled"></hx-checkbox>
25+
<label for="chkIsDisabled">Disabled</label>
26+
</div>
27+
<div class="hxCheckbox">
28+
<input id="chkIsIndeterminate" type="checkbox" v-model="isIndeterminate" />
29+
<hx-checkbox for="chkIsIndeterminate"></hx-checkbox>
30+
<label for="chkIsIndeterminate">Indeterminate</label>
31+
</div>
32+
<div class="hxCheckbox">
33+
<input id="chkIsInvalid" type="checkbox" v-model="isInvalid" />
34+
<hx-checkbox for="chkIsInvalid"></hx-checkbox>
35+
<label for="chkIsInvalid">Invalid</label>
36+
</div>
3337
</fieldset>
3438
</form>
3539
</header>

‎docs/components/choice-tiles/choice-tile-demo.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import Util from '../../_util';
22

33
if (document.getElementById('vue-choiceDemo')) {
4+
let SIZES = [
5+
{ value: 'hxSm', label: 'Small' },
6+
{ value: '', label: 'Medium' },
7+
{ value: 'hxLg', label: 'Large' },
8+
];
9+
410
new Vue({
511
el: '#vue-choiceDemo',
612
data: {
7-
size: {
8-
label: 'Default',
9-
value: '',
10-
},
11-
sizes: [
12-
{ value: 'hxSm', label: 'Small' },
13-
{ value: '', label: 'Default' },
14-
{ value: 'hxLg', label: 'Large' },
15-
],
13+
size: SIZES[1], // Medium
14+
sizes: SIZES,
1615
description: 'A couple of descriptive lines or a small bit of help text.',
1716
isChecked: false,
1817
isDisabled: false,

0 commit comments

Comments
 (0)