Skip to content

Commit

Permalink
Merge pull request #458 from rackerlabs/dev-basic-form-controls--misc
Browse files Browse the repository at this point in the history 
Miscellaneous Updates to prepare for Checkboxes, Radios, and Dropdown Selects.
  • Loading branch information
@CITguy
CITguy authored Feb 22, 2019
2 parents 234520e + 5e19f1a commit 447a9f0
Show file tree
Hide file tree
Showing 34 changed files with 613 additions and 496 deletions.
3 changes: 3 additions & 0 deletions docs/_data/nav.json5
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
{ label: 'Pagination', path: 'pagination' },
{ label: 'Pills', path: 'pills' },
{ label: 'Popovers', path: 'popovers' },
{ label: 'Radios', path: 'radios' },
{ label: 'Reveals', path: 'reveals' },
{ label: 'Search', path: 'search' },
{ label: 'Selector Strips', path: 'selector-strips' },
Expand Down Expand Up @@ -82,9 +83,11 @@
{ label: '<hx-pill>', path: 'hx-pill' },
{ label: '<hx-popover>', path: 'hx-popover' },
{ label: '<hx-progress>', path: 'hx-progress' },
{ label: '<hx-radio>', path: 'hx-radio' },
{ label: '<hx-reveal>', path: 'hx-reveal' },
{ label: '<hx-search>', path: 'hx-search' },
{ label: '<hx-search-assistance>', path: 'hx-search-assistance' },
{ label: '<hx-select>', path: 'hx-select' },
{ label: '<hx-status>', path: 'hx-status' },
{ label: '<hx-tab>', path: 'hx-tab' },
{ label: '<hx-tabcontent>', path: 'hx-tabcontent' },
Expand Down
24 changes: 13 additions & 11 deletions docs/components/alerts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,32 +17,34 @@ <h2 id="basic-alert">Basic Alert</h2>
<div class="example" id="vue-alertDemo" v-cloak>
<header>
<form class="beta-hxForm">
<p>
<label for="selType">Type</label>
<div class="hxSelect">
<select id="selType" v-model="type">
<option v-for="_type in types" :value="_type">
{% raw %}{{ _type.label }}{% endraw %}
</option>
</select>
</p>
<hx-select></hx-select>
<label for="selType" class="beta-hxFieldName">Type</label>
</div>
<p>
<label for="txtStatus">Status</label>
<label for="txtStatus" class="beta-hxFieldName">Status</label>
<input id="txtStatus" class="hxTextCtrl" v-model="status" />
</p>
<p>
<label for="txtCta">CTA</label>
<label for="txtCta" class="beta-hxFieldName">CTA</label>
<input id="txtCta" class="hxTextCtrl" v-model="cta" />
</p>
<p>
<label for="txtContent">Content</label>
<label for="txtContent" class="beta-hxFieldName">Content</label>
<textarea id="txtContent" class="hxTextCtrl" v-model="content"></textarea>
</p>
<fieldset>
<legend>Options</legend>
<label>
<input type="checkbox" v-model="isPersistent">
Persist
</label>
<legend class="beta-hxFieldName">Options</legend>
<div class="hxCheckbox">
<input id="chkIsPersistent" type="checkbox" v-model="isPersistent">
<hx-checkbox for="chkIsPersistent"></hx-checkbox>
<label for="chkIsPersistent">Persist</label>
</div>
</fieldset>
</form>
</header>
Expand Down
28 changes: 16 additions & 12 deletions docs/components/box/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,17 @@ <h2 id="spacing">Spacing</h2>
<div class="example" id="vue-boxDemo" v-cloak>
<header>
<form class="beta-hxForm">
<p>
<label for="selSpacing">Spacing</label>
<div class="hxSelect">
<select id="selSpacing" v-model="spacing">
<option
v-for="_spacing in spacings"
v-text="_spacing.label"
:value="_spacing"
></option>
</select>
</p>
<hx-select></hx-select>
<label for="selSpacing" class="beta-hxFieldName">Spacing</label>
</div>
</form>
</header>

Expand Down Expand Up @@ -167,23 +168,26 @@ <h2 id="scrolling-containers">Scrolling Containers</h2>
<header>
<form class="beta-hxForm">
<fieldset>
<legend>Scroll Direction</legend>
<label v-for="_direction in directions">
<legend class="beta-hxFieldName">Scroll Direction</legend>
<div v-for="(_direction, idx) in directions" class="hxRadio">
<input
:id="'radDirection' + idx"
:value="_direction"
name="direction"
type="radio"
v-model="direction"
/>
<span v-text="_direction"></span>
</label>
<hx-radio :for="'radDirection' + idx"></hx-radio>
<label :for="'radDirection' + idx" v-text="_direction"></label>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<label>
<input type="checkbox" v-model="isListening" />
Log events to console
</label>
<legend class="beta-hxFieldName">Options</legend>
<div class="hxCheckbox">
<input id="chkLogEvents" type="checkbox" v-model="isListening" />
<hx-checkbox for="chkLogEvents"></hx-checkbox>
<label for="chkLogEvents">Log events to console</label>
</div>
</fieldset>
</form>
</header>
Expand Down
56 changes: 36 additions & 20 deletions docs/components/buttons/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,30 +34,38 @@ <h2 id="basic-button">Basic Button</h2>
<header>
<form class="beta-hxForm">
<fieldset>
<legend>Variant</legend>
<label v-for="_variant in variants">
<legend class="beta-hxFieldName">Variant</legend>
<div v-for="(_variant, idx) in variants" class="hxRadio">
<input
:id="'radBasicVariant' + idx"
:value="_variant"
name="variant"
type="radio"
v-model="variant"
/>
<span v-text="_variant.label"></span>
<em class="hxSubBody" v-if="_variant.default">(default)</em>
</label>
<hx-radio :for="'radBasicVariant' + idx"></hx-radio>
<label :for="'radBasicVariant' + idx">
<span v-text="_variant.label"></span>
<em class="hxSubBody" v-if="_variant.default">(default)</em>
</label>
</div>
</fieldset>
<fieldset>
<legend>Size</legend>
<label v-for="_size in sizes">
<legend class="beta-hxFieldName">Size</legend>
<div v-for="(_size, idx) in sizes" class="hxRadio">
<input
:id="'radBasicSize' + idx"
:value="_size"
name="size"
type="radio"
v-model="size"
/>
<span v-text="_size.label"></span>
<em class="hxSubBody" v-if="_size.default">(default)</em>
</label>
<hx-radio :for="'radBasicSize' + idx"></hx-radio>
<label :for="'radBasicSize' + idx">
<span v-text="_size.label"></span>
<em class="hxSubBody" v-if="_size.default">(default)</em>
</label>
</div>
</fieldset>
</form>
</header>
Expand Down Expand Up @@ -122,30 +130,38 @@ <h2 id="button-group">Button Group</h2>
<header>
<form class="beta-hxForm">
<fieldset>
<legend>Variant</legend>
<label v-for="_variant in variants">
<legend class="beta-hxFieldName">Variant</legend>
<div v-for="(_variant, idx) in variants" class="hxRadio">
<input
:id="'radGroupVariant' + idx"
:value="_variant"
name="variant"
type="radio"
v-model="variant"
/>
<span v-text="_variant.label"></span>
<em class="hxSubBody" v-if="_variant.default">(default)</em>
</label>
<hx-radio :for="'radGroupVariant' + idx"></hx-radio>
<label :for="'radGroupVariant' + idx">
<span v-text="_variant.label"></span>
<em class="hxSubBody" v-if="_variant.default">(default)</em>
</label>
</div>
</fieldset>
<fieldset>
<legend>Size</legend>
<label v-for="_size in sizes">
<legend class="beta-hxFieldName">Size</legend>
<div v-for="(_size, idx) in sizes" class="hxRadio">
<input
:id="'radGroupSize' + idx"
:value="_size"
name="size"
type="radio"
v-model="size"
/>
<span v-text="_size.label"></span>
<em class="hxSubBody" v-if="_size.default">(default)</em>
</label>
<hx-radio :for="'radGroupSize' + idx"></hx-radio>
<label :for="'radGroupSize' + idx">
<span v-text="_size.label"></span>
<em class="hxSubBody" v-if="_size.default">(default)</em>
</label>
</div>
</fieldset>
</form>
</header>
Expand Down
38 changes: 21 additions & 17 deletions docs/components/checkboxes/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,27 @@ <h2 id="basic-checkbox">Basic Checkbox</h2>
<header>
<form class="beta-hxForm">
<fieldset>
<legend>Options</legend>
<label>
<input type="checkbox" v-model="isChecked" />
Checked
</label>
<label>
<input type="checkbox" v-model="isDisabled" />
Disabled
</label>
<label>
<input type="checkbox" v-model="isIndeterminate" />
Indeterminate
</label>
<label>
<input type="checkbox" v-model="isInvalid" />
Invalid
</label>
<legend class="beta-hxFieldName">Options</legend>
<div class="hxCheckbox">
<input id="chkIsChecked" type="checkbox" v-model="isChecked" />
<hx-checkbox for="chkIsChecked"></hx-checkbox>
<label for="chkIsChecked">Checked</label>
</div>
<div class="hxCheckbox">
<input id="chkIsDisabled" type="checkbox" v-model="isDisabled" />
<hx-checkbox for="chkIsDisabled"></hx-checkbox>
<label for="chkIsDisabled">Disabled</label>
</div>
<div class="hxCheckbox">
<input id="chkIsIndeterminate" type="checkbox" v-model="isIndeterminate" />
<hx-checkbox for="chkIsIndeterminate"></hx-checkbox>
<label for="chkIsIndeterminate">Indeterminate</label>
</div>
<div class="hxCheckbox">
<input id="chkIsInvalid" type="checkbox" v-model="isInvalid" />
<hx-checkbox for="chkIsInvalid"></hx-checkbox>
<label for="chkIsInvalid">Invalid</label>
</div>
</fieldset>
</form>
</header>
Expand Down
17 changes: 8 additions & 9 deletions docs/components/choice-tiles/choice-tile-demo.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import Util from '../../_util';

if (document.getElementById('vue-choiceDemo')) {
let SIZES = [
{ value: 'hxSm', label: 'Small' },
{ value: '', label: 'Medium' },
{ value: 'hxLg', label: 'Large' },
];

new Vue({
el: '#vue-choiceDemo',
data: {
size: {
label: 'Default',
value: '',
},
sizes: [
{ value: 'hxSm', label: 'Small' },
{ value: '', label: 'Default' },
{ value: 'hxLg', label: 'Large' },
],
size: SIZES[1], // Medium
sizes: SIZES,
description: 'A couple of descriptive lines or a small bit of help text.',
isChecked: false,
isDisabled: false,
Expand Down
Loading

0 comments on commit 447a9f0

Please sign in to comment.