Skip to content

Commit 61f9b18

Browse files
author
Ryan A. Johnson
committed
fix(DropdownSelect): fix and refactor Dropdown Select
- Fix focus styles - Add support for `<label>` within `<hx-select-control>` - Refactor CSS with overloaded mixins - Add extra whitespace to example demos to allow them to breathe. - Tweak documentation wording across a few components.
1 parent e2439e9 commit 61f9b18

File tree

14 files changed

+376
-308
lines changed

14 files changed

+376
-308
lines changed

‎docs/components/dropdown-select/index.html‎

Lines changed: 80 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,96 @@
77
elements/hx-select: <hx-select>
88
---
99
{% extends 'component.njk' %}
10-
{% block content %}
10+
{% block page_header %}
1111
<p class="comfortable">
12-
The {{page.title}} component provides markup that enables a consistent
13-
visual appearance of the HTML <code>&lt;select&gt;</code> element.
12+
The {{page.title}} component provides markup to define a single-selection,
13+
drop-down list control (commonly used in forms).
1414
</p>
15+
{% endblock %}
1516

17+
{% block content %}
1618
<section>
1719
<h2 id="basic-select">Basic Select</h2>
1820
<div class="example" id="vue-selectDemo" v-cloak>
1921
<header>
2022
<form class="beta-hxForm">
23+
<div>
24+
<hx-text-control>
25+
<input
26+
id="txtLabel"
27+
type="text"
28+
v-model="label"
29+
/>
30+
<label for="txtLabel">
31+
Label Text
32+
</label>
33+
</hx-text-control>
34+
</div>
35+
36+
<fieldset>
37+
<legend class="beta-hxFieldName">Label Annotation</legend>
38+
39+
<hx-checkbox-control>
40+
<input
41+
id="chkHasAsterisk"
42+
type="checkbox"
43+
v-model="hasAsterisk"
44+
/>
45+
<label for="chkHasAsterisk">
46+
<hx-checkbox></hx-checkbox>
47+
Required
48+
</label>
49+
</hx-checkbox-control>
50+
51+
<hx-checkbox-control>
52+
<input
53+
id="chkHasOptional"
54+
type="checkbox"
55+
v-model="hasOptional"
56+
/>
57+
<label for="chkHasOptional">
58+
<hx-checkbox></hx-checkbox>
59+
Optional
60+
</label>
61+
</hx-checkbox-control>
62+
</fieldset>
63+
2164
<fieldset>
22-
<legend class="beta-hxFieldName">Options</legend>
23-
<div>
24-
<input id="chkRequired" type="checkbox" v-model="isRequired" />
25-
<label for="chkRequired">Required</label>
26-
</div>
27-
<div>
28-
<input id="chkDisabled" type="checkbox" v-model="isDisabled" />
29-
<label for="chkDisabled">Disabled</label>
30-
</div>
65+
<legend class="beta-hxFieldName">Control Options</legend>
66+
<hx-checkbox-control>
67+
<input
68+
id="chkDisabled"
69+
type="checkbox"
70+
v-model="isDisabled"
71+
/>
72+
<label for="chkDisabled">
73+
<hx-checkbox></hx-checkbox>
74+
Disabled
75+
</label>
76+
</hx-checkbox-control>
77+
78+
<hx-checkbox-control>
79+
<input
80+
id="chkRequired"
81+
type="checkbox"
82+
v-model="isRequired"
83+
/>
84+
<label for="chkRequired">
85+
<hx-checkbox></hx-checkbox>
86+
Required
87+
</label>
88+
<p>
89+
(Invalid styling applied <i>after</i> user interaction.)
90+
</p>
91+
</hx-checkbox-control>
3192
</fieldset>
3293
</form>
3394
</header>
3495

3596
<div>
3697
<hx-select-control>
3798
<select
99+
id="selDemo"
38100
:disabled="isDisabled"
39101
:required="isRequired"
40102
>
@@ -44,6 +106,11 @@ <h2 id="basic-select">Basic Select</h2>
44106
<option value="3">Option 3</option>
45107
</select>
46108
<hx-select></hx-select>
109+
<label
110+
for="selDemo"
111+
v-text="label"
112+
:class="{ hxOptional: hasOptional, hxRequired: hasAsterisk }"
113+
></label>
47114
</hx-select-control>
48115
</div>
49116

@@ -60,7 +127,6 @@ <h2 id="basic-select">Basic Select</h2>
60127
<!--
61128
TODO:
62129
Need centralized documentation of HelixUI form control validation behavior.
63-
-->
64130
<section>
65131
<h2 id="validation">Validation</h2>
66132
<p class="comfortable">
@@ -79,4 +145,5 @@ <h2 id="validation">Validation</h2>
79145
to apply invalid control styles.
80146
</p>
81147
</section>
148+
-->
82149
{% endblock %}

‎docs/components/dropdown-select/select-demo.js‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ if (document.getElementById('vue-selectDemo')) {
44
new Vue({
55
el: '#vue-selectDemo',
66
data: {
7+
hasAsterisk: false,
8+
hasOptional: false,
79
isDisabled: false,
810
isRequired: false,
11+
label: 'Choose an Option',
912
},
1013
computed: {
1114
attrDisabled: function () {
@@ -14,17 +17,38 @@ if (document.getElementById('vue-selectDemo')) {
1417
attrRequired: function () {
1518
return (this.isRequired ? 'required' : '');
1619
},
20+
lblClasses: function () {
21+
let classes = [];
22+
23+
if (this.hasAsterisk) {
24+
classes.push('hxRequired');
25+
}
26+
27+
if (this.hasOptional) {
28+
classes.push('hxOptional');
29+
}
30+
31+
let classNames = classes.join(' ');
32+
33+
return (classNames === '' ? '' : `class="${classNames}"`);
34+
},
1735
snippet: function () {
1836
return Util.snippet(`
1937
<hx-select-control>
2038
<select
39+
id="selDemo"
2140
${this.attrDisabled}
2241
${this.attrRequired}
2342
>
24-
...
43+
<!-- ... -->
2544
</select>
26-
2745
<hx-select></hx-select>
46+
<label
47+
for="selDemo"
48+
${this.lblClasses}
49+
>
50+
${this.label}
51+
</label>
2852
</hx-select-control>
2953
`);
3054
},

‎docs/components/dropdown-select/test.html‎

Lines changed: 44 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
---
22
title: Testing - Dropdown Select
33
---
4+
{% set contentClasses = 'dropdown-select-spec' %}
45
{% extends 'test.njk' %}
5-
{% macro dropdown(id='', wasChanged=false, wasTouched=false, className='', isRequired=false, isDisabled=false, isFocused=false, isValid=true) %}
6-
{% set isPristine = (className === '') and not (wasChanged or wasTouched) %}
6+
{% macro dropdown(id='', isDirty=false, className='', isRequired=false, isDisabled=false, isFocused=false, isValid=true) %}
7+
{% set isPristine = (className === '') and not isDirty %}
78

89
{% set idAttr -%}hxSelect-
9-
{{- 'p' if not (wasChanged or wasTouched) -}}
10-
{{- 'c' if wasChanged -}}
11-
{{- 't' if wasTouched -}}
10+
{{- 'd' if isDirty else 'p' -}}
1211
{{- 'R' if isRequired else 'O' -}}
1312
{{- 'D' if isDisabled else 'E' -}}
1413
{{- 'V' if isValid else 'I' -}}
@@ -17,24 +16,9 @@
1716
{%- if id !== '' %}-{{id}}{% endif -%}
1817
{%- endset %}
1918

20-
<label for="{{idAttr | trim}}">
21-
{% if isPristine %}
22-
Pristine,
23-
{% else %}
24-
{% if className !== '' %}.{{ className }},{% endif %}
25-
{% if wasChanged %}Changed,{% endif %}
26-
{% if wasTouched %}Touched,{% endif %}
27-
{% endif %}
28-
{{ 'Required' if isRequired else 'Optional' }},
29-
{{ 'Disabled' if isDisabled else 'Enabled' }},
30-
{{ 'Valid' if isValid else 'Invalid' }}
31-
({{ 'focus' if isFocused else 'blur' }})
32-
</label>
33-
3419
<hx-select-control
3520
{% if className !== '' %}class="{{className}}" {% endif %}
36-
{% if wasChanged %}hx-changed {% endif %}
37-
{% if wasTouched %}hx-touched {% endif %}
21+
{% if isDirty %}hx-dirty {% endif %}
3822
>
3923
<select
4024
id="{{idAttr | trim}}"
@@ -60,9 +44,21 @@
6044
{% endif %}
6145
</select>
6246
<hx-select></hx-select>
47+
<label for="{{idAttr | trim}}">
48+
{% if isPristine %}
49+
Pristine,
50+
{% else %}
51+
{% if className !== '' %}.{{ className }},{% endif %}
52+
{% if isDirty %}Dirty,{% endif %}
53+
{% endif %}
54+
{{ 'Required' if isRequired else 'Optional' }},
55+
{{ 'Disabled' if isDisabled else 'Enabled' }},
56+
{{ 'Valid' if isValid else 'Invalid' }}
57+
({{ 'focus' if isFocused else 'blur' }})
58+
</label>
6359
</hx-select-control>
6460
{% endmacro %}
65-
{% macro stateTable(id, wasChanged=false, wasTouched=false, className="", isRequired=false) %}
61+
{% macro stateTable(id, isDirty=false, className="", isRequired=false) %}
6662
<table>
6763
<thead>
6864
<tr>
@@ -72,20 +68,20 @@
7268
</thead>
7369
<tbody>
7470
<tr><!-- select:enabled -->
75-
<td>{{dropdown(id, wasChanged, wasTouched, className, isRequired)}}</td>
76-
<td>{{dropdown(id, wasChanged, wasTouched, className, isRequired, isValid=false)}}</td>
71+
<td>{{dropdown(id, isDirty, className, isRequired)}}</td>
72+
<td>{{dropdown(id, isDirty, className, isRequired, isValid=false)}}</td>
7773
</tr>
7874
<tr><!-- select:enabled:focus -->
79-
<td>{{dropdown(id, wasChanged, wasTouched, className, isRequired, isFocused=true)}}</td>
80-
<td>{{dropdown(id, wasChanged, wasTouched, className, isRequired, isFocused=true, isValid=false)}}</td>
75+
<td>{{dropdown(id, isDirty, className, isRequired, isFocused=true)}}</td>
76+
<td>{{dropdown(id, isDirty, className, isRequired, isFocused=true, isValid=false)}}</td>
8177
</tr>
8278
<tr><!-- select:disabled -->
83-
<td>{{dropdown(id, wasChanged, wasTouched, className, isRequired, isDisabled=true)}}</td>
84-
<td>{{dropdown(id, wasChanged, wasTouched, className, isRequired, isDisabled=true, isValid=false)}}</td>
79+
<td>{{dropdown(id, isDirty, className, isRequired, isDisabled=true)}}</td>
80+
<td>{{dropdown(id, isDirty, className, isRequired, isDisabled=true, isValid=false)}}</td>
8581
</tr>
8682
<tr><!-- select:disabled:focus -->
87-
<td>{{dropdown(id, wasChanged, wasTouched, className, isRequired, isDisabled=true, isFocused=true)}}</td>
88-
<td>{{dropdown(id, wasChanged, wasTouched, className, isRequired, isDisabled=true, isFocused=true, isValid=false)}}</td>
83+
<td>{{dropdown(id, isDirty, className, isRequired, isDisabled=true, isFocused=true)}}</td>
84+
<td>{{dropdown(id, isDirty, className, isRequired, isDisabled=true, isFocused=true, isValid=false)}}</td>
8985
</tr>
9086
</tbody>
9187
</table>
@@ -96,74 +92,60 @@
9692
</p>
9793
{% endif %}
9894
{% endmacro %}
99-
{% macro stateTables(id, wasChanged=false, wasTouched=false, className="") %}
95+
{% macro stateTables(id, isDirty=false, className="") %}
10096
<section id="{{id}}-optional-states">
10197
<header>
10298
<h3>Optional</h3>
103-
<code>select:optional</code>
99+
<code>&lt;select&gt;</code>
104100
</header>
105-
{{stateTable(id, wasChanged, wasTouched, className, isRequired=false)}}
101+
{{stateTable(id, isDirty, className, isRequired=false)}}
106102
</section>
107103

108104
<section id="{{id}}-required-states">
109105
<header>
110106
<h3>Required</h3>
111-
<code>select:required</code>
107+
<code>&lt;select required&gt;</code>
112108
</header>
113-
{{stateTable(id, wasChanged, wasTouched, className, isRequired=true)}}
109+
{{stateTable(id, isDirty, className, isRequired=true)}}
114110
</section>
115111
{% endmacro %}
116112

117-
{% block content %}
113+
{% block page_header %}
118114
<nav class="hxBreadcrumb">
119115
<a href="components/dropdown-select">Dropdown Select</a>
120116
<hx-icon class="delimiter" type="angle-right"></hx-icon>
121117
<a href="#">{{page.title}}</a>
122118
</nav>
119+
{% endblock %}
123120

121+
{% block content %}
124122
<section>
125123
<header>
126-
<h2>Pristine</h2>
124+
<h2 id="test-pristine">Pristine</h2>
127125
<code>&lt;hx-select-control&gt;</code>
128126
</header>
129127
{{stateTables('pristine')}}
130128
</section>
131129

132130
<section>
133131
<header>
134-
<h2>Changed</h2>
135-
<p><code>&lt;hx-select-control hx-changed&gt;</code></p>
132+
<h2 id="test-dirty">Dirty</h2>
133+
<code>&lt;hx-select-control hx-dirty&gt;</code>
136134
</header>
137-
{{stateTables('changed', wasChanged=true)}}
135+
{{stateTables('changed', isDirty=true)}}
138136
</section>
139137

140138
<section>
141139
<header>
142-
<h2>Touched</h2>
143-
<p><code>&lt;hx-select-control hx-touched&gt;</code></p>
144-
</header>
145-
{{stateTables('touched', wasTouched=true)}}
146-
</section>
147-
148-
<section>
149-
<header>
150-
<h2>Styled Invalid (control-level)</h2>
151-
<p><code>hx-select-control.hxInvalid</code></p>
140+
<h2 id="test-visually-invalid">Visually Invalid</h2>
141+
<code>&lt;hx-select-control class="hxInvalid"&gt;</code>
152142
</header>
153143
{{stateTables('invalid', className="hxInvalid")}}
154144
</section>
155145

156-
<section class="hxInvalid">
157-
<header>
158-
<h2>Styled Invalid (ancestor-level)</h2>
159-
<p><code>.hxInvalid hx-select-control</code></p>
160-
</header>
161-
{{stateTables('ancestor-invalid')}}
162-
</section>
163-
164146
<section>
165147
<header>
166-
<h2>Layout</h2>
148+
<h2 id="test-layout">Layout</h2>
167149
<p class="hxSubdued hxSubBody">
168150
<hx-icon type="info-circle"></hx-icon>
169151
Extra elements should not be visible.
@@ -249,7 +231,9 @@ <h2>Layout</h2>
249231
</section>
250232

251233
<section>
252-
<h2>Miscellaneous</h2>
234+
<header>
235+
<h2 id="test-misc">Miscellaneous</h2>
236+
</header>
253237

254238
<div class="hxRow">
255239
<div class="hxCol hxSpan-4">

0 commit comments

Comments
 (0)