Skip to content

Commit 29f83e2

Browse files
100stacks100stacks
committed
docs(hx-search): update Search component documentation and styles
* add `<hx-search-control>` docs * update `<hx-search>` docs * update `<hx-search-assistance>` docs * refactor Light DOM LESS to SCSS * refactor `Search` component Light DOM LESS to SCSS * refactor `Search` component spec file to SCSS * add test for extra long value * propose component API documentation
1 parent 4d27192 commit 29f83e2

File tree

16 files changed

+358
-171
lines changed

16 files changed

+358
-171
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@
9292
{ label: '<hx-reveal>', path: 'hx-reveal' },
9393
{ label: '<hx-search>', path: 'hx-search' },
9494
{ label: '<hx-search-assistance>', path: 'hx-search-assistance' },
95+
{ label: '<hx-search-control>', path: 'hx-search-control' },
9596
{ label: '<hx-select>', path: 'hx-select' },
9697
{ label: '<hx-select-control>', path: 'hx-select-control' },
9798
{ label: '<hx-status>', path: 'hx-status' },

‎docs/components/icon/icon-demo.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import Util from '../../_util';
22

33
(function () {
4-
const TYPES = [
4+
const TYPES = [
55
'',
66
'key',
7-
'mime-archive',
7+
'mime-archive',
88
'mime-audio',
99
'mime-code',
1010
'mime-data',
1111
'mime-image',
12-
'mime-system',
12+
'mime-system',
1313
'mime-text',
1414
'mime-video',
1515
'paperclip',
@@ -38,7 +38,7 @@ import Util from '../../_util';
3838
},
3939
snippet: function () {
4040
return Util.snippet(`
41-
<hx-file-icon
41+
<hx-file-icon
4242
${this.attrExtension}
4343
${this.attrType}>
4444
</hx-file-icon>
@@ -73,6 +73,9 @@ if (document.getElementById('vue-availableIcons')) {
7373
onFilterUpdate: function (evt) {
7474
this.filter = evt.currentTarget.value || '';
7575
},
76+
onValueClear: function () {
77+
this.filter = '';
78+
},
7679
matchesName: function (icon) {
7780
let _name = icon.name.toLowerCase();
7881
return _name.indexOf(this.downcaseFilter) >= 0;

‎docs/components/icon/index.html‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -105,12 +105,27 @@ <h2 id="available-icons">Available Icons</h2>
105105
<div class="hxRow">
106106
<div class="hxCol hxSpan-12-xs hxSpan-6-md hxSpan-4-xl">
107107
<p>
108-
<hx-search
109-
:placeholder="searchPlaceholder"
110-
:value="filter"
111-
@input="onFilterUpdate"
112-
@clear="onFilterUpdate"
113-
></hx-search>
108+
<hx-search-control>
109+
<input
110+
id="demoSearchIcons"
111+
type="search"
112+
:placeholder="searchPlaceholder"
113+
:value="filter"
114+
@input="onFilterUpdate"
115+
/>
116+
<button
117+
type="button"
118+
class="hxClear"
119+
hidden
120+
@click="onValueClear"
121+
>
122+
<hx-icon type="times"></hx-icon>
123+
</button>
124+
<hx-search></hx-search>
125+
<label for="demoSearchIcons">
126+
Search Icons
127+
</label>
128+
</hx-search-control>
114129
</p>
115130
<p v-if="hasFilter">
116131
<small v-if="filteredIcons.length > 0">

‎docs/styles/spec/search-spec.less‎ renamed to ‎docs/components/search/_spec.scss‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
1-
@import (reference) "components/search/index";
1+
@import "components/search/SearchFacade";
22

33
.search-spec {
44
hx-search-control {
5-
/* --------------- Pristine --------------- */
5+
// --------------- Pristine ---------------
66
> input[type="search"].mock-focus ~ hx-search,
77
> button.hxClear.mock-focus ~ hx-search {
8-
.SearchFacade(pristine-focus);
8+
@include SearchFacadePristineFocus;
99
}
1010

11-
/* --------------- Disabled --------------- */
11+
// --------------- Disabled ---------------
1212
> input[type="search"]:disabled {
1313
~ hx-search {
14-
.SearchFacade(disabled);
14+
@include SearchFacadeDisabled;
1515
}
1616

1717
&.mock-focus ~ hx-search {
18-
.SearchFacade(disabled-focus);
18+
@include SearchFacadeDisabledFocus;
1919
}
2020
}
2121

22-
/* --------------- Changed / Touched --------------- */
22+
// --------------- Changed / Touched ---------------
2323
&[hx-dirty] {
2424
> input[type="search"]:enabled.mock-focus ~ hx-search {
25-
.SearchFacade(pristine-focus);
25+
@include SearchFacadePristineFocus;
2626
}
2727

2828
> input[type="search"]:invalid.mock-focus ~ hx-search {
29-
.SearchFacade(invalid-focus);
29+
@include SearchFacadeInvalidFocus;
3030
}
3131
}
3232

33-
/* --------------- Invalid --------------- */
33+
// --------------- Invalid ---------------
3434
&.hxInvalid {
3535
> input[type="search"]:enabled.mock-focus ~ hx-search,
3636
> button.hxClear.mock-focus ~ hx-search {
37-
.SearchFacade(invalid-focus);
37+
@include SearchFacadeInvalidFocus;
3838
}
3939
}
4040

41-
/* --------------- Mock-Focus on <button> --------------- */
41+
// --------------- Mock-Focus on <button> ---------------
4242
> input[type="search"] ~ button.mock-focus {
43-
.SearchFacade(button-focus);
43+
@include SearchFacadeButtonFocus;
4444
}
4545
}
4646
}

‎docs/components/search/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
---
22
title: Search
3-
minver: 0.4.0
3+
minver: 0.18.0
44
also:
55
components/search/test.html: Testing - Search
66
elements/hx-search: <hx-search>
77
elements/hx-search-assistance: <hx-search-assistance>
8+
elements/hx-search-control: <hx-search-control>
89
---
910
{% extends 'component.njk' %}
1011

1112
{% block page_header %}
12-
{# TODO: add component description #}
13+
<p>
14+
The {{page.title}} component provides augmented markup, validation, and interaction for a
15+
native <code>&lt;input type="search"&gt;</code> element.
16+
</p>
1317
{% endblock %}
1418

1519
{% block content %}

‎docs/components/search/test.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -328,4 +328,84 @@ <h3>Required</h3>
328328
</table>
329329
</section>
330330
</section>
331+
332+
<section>
333+
<header>
334+
<h2 id="test-extra-long-value">Extra Long Value</h2>
335+
<code>&lt;input type="search"&gt;</code>
336+
</header>
337+
338+
<div class="hxRow">
339+
<div class="hxCol hxSpan-4">
340+
<hx-search-control>
341+
<input
342+
id="search-with-extra-long-value"
343+
type="search"
344+
value="This is an extra long search value that tests its rendered appearance"
345+
/>
346+
<button
347+
type="button"
348+
class="hxClear"
349+
aria-label="Clear search"
350+
hidden
351+
>
352+
<hx-icon type="times"></hx-icon>
353+
</button>
354+
<hx-search></hx-search>
355+
<label
356+
for="search-with-extra-long-value"
357+
>
358+
Search with Extra Long Value
359+
</label>
360+
</hx-search-control>
361+
</div>
362+
<div class="hxCol hxSpan-4">
363+
<hx-search-control class="hxInvalid">
364+
<input
365+
id="search-with-extra-long-value-hxinvalid"
366+
type="search"
367+
value="This is an extra long search value that tests its rendered appearance"
368+
/>
369+
<button
370+
type="button"
371+
class="hxClear"
372+
aria-label="Clear search"
373+
hidden
374+
>
375+
<hx-icon type="times"></hx-icon>
376+
</button>
377+
<hx-search></hx-search>
378+
<label
379+
for="search-with-extra-long-value-hxinvalid"
380+
>
381+
Search with Extra Long Value
382+
</label>
383+
</hx-search-control>
384+
</div>
385+
<div class="hxCol hxSpan-4">
386+
<hx-search-control>
387+
<input
388+
id="search-with-extra-long-value-disabled"
389+
type="search"
390+
value="This is an extra long search value that tests its rendered appearance"
391+
disabled
392+
/>
393+
<button
394+
type="button"
395+
class="hxClear"
396+
aria-label="Clear search"
397+
hidden
398+
>
399+
<hx-icon type="times"></hx-icon>
400+
</button>
401+
<hx-search></hx-search>
402+
<label
403+
for="search-with-extra-long-value-disabled"
404+
>
405+
Search with Extra Long Value
406+
</label>
407+
</hx-search-control>
408+
</div>
409+
</div>
410+
</section>
331411
{% endblock %}

‎docs/docs.less‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,7 +320,6 @@ min-version {
320320
@import 'spec/panel-spec';
321321
@import 'spec/popover-spec';
322322
@import 'spec/radio-spec';
323-
@import 'spec/search-spec';
324323
@import 'spec/text-input-spec';
325324
@import 'spec/textarea-spec';
326325

‎docs/elements/hx-search-assistance/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
minver: 0.6.0
44
also:
55
components/search: Search
6-
elements/hx-search: <hx-search>
6+
elements/hx-search-control: <hx-search-control>
77
---
88
{% extends 'element.njk' %}
99
{% block page_header %}

‎docs/elements/hx-search-control/index.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
---
2+
title: <hx-search-control>
3+
minver: 0.18.0
4+
controlElement: <input type="search">
5+
also:
6+
components/search: Search
7+
elements/hx-search: <hx-search>
8+
elements/hx-search-assistance: <hx-search-assistance>
9+
---
10+
{% extends 'element.njk' %}
11+
{% import '_utils.njk' as utils %}
12+
{% block page_header %}
13+
<p>
14+
The <code>{{page.title}}</code> block element is a container that augments
15+
native browser styles, interaction, and validation for an
16+
<code>&lt;input type="search"&gt;</code> element. It is used to build
17+
a <a href="components/search">Search</a> component.
18+
</p>
19+
{% endblock %}
20+
21+
{% block content %}
22+
<section>
23+
<dl class="metadata hxList">
24+
<div>
25+
<dt>Permitted Parents</dt>
26+
<dd>any element that accepts flow content</dd>
27+
</div>
28+
<div>
29+
<dt>Permitted Children</dt>
30+
<dd>
31+
in this order:
32+
<ol class="hxList">
33+
<li>
34+
{{utils.element('input type="search"')}}
35+
</li>
36+
<li>
37+
{{utils.element('button class="hxClear"')}}
38+
</li>
39+
<li>
40+
{{utils.customElement('hx-search')}}
41+
</li>
42+
<li>
43+
{{utils.element('label')}}
44+
</li>
45+
</ol>
46+
</dd>
47+
</div>
48+
<div>
49+
<dt>Events</dt>
50+
<dd><i>none</i></dd>
51+
</div>
52+
</dl>
53+
</section>
54+
{% endblock%}
55+
56+
{% block attributes %}
57+
<dl class="memberList">
58+
<dt>
59+
hx-changed {Boolean}
60+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
61+
</dt>
62+
<dd>
63+
<p>
64+
Present if descendant <code>{{page.controlElement}}</code> element has
65+
emitted a <i>change</i> event.
66+
</p>
67+
</dd>
68+
<dt>
69+
hx-dirty {Boolean}
70+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
71+
</dt>
72+
<dd>
73+
<p>
74+
Present if descendant <code>{{page.controlElement}}</code> element has
75+
emitted a <i>change</i> or <i>blur</i> event.
76+
</p>
77+
</dd>
78+
<dt>
79+
hx-touched {Boolean}
80+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
81+
</dt>
82+
<dd>
83+
<p>
84+
Present if descendant <code>{{page.controlElement}}</code> element has
85+
emitted a <i>blur</i> event.
86+
</p>
87+
</dd>
88+
</dl>
89+
{% endblock %}
90+
91+
{% block properties %}
92+
<dl class="memberList">
93+
<dt>
94+
controlElement {?HTMLInputElement}
95+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
96+
</dt>
97+
<dd>
98+
<p>
99+
Returns the first <code>{{page.controlElement}}</code> descendant or
100+
<code>null</code> if none are found.
101+
</p>
102+
</dd>
103+
<dt>
104+
isDirty {Boolean [false]}
105+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
106+
</dt>
107+
<dd>
108+
<p>
109+
True if <code>controlElement</code> has emitted a <i>change</i> or
110+
<i>blur</i> event.
111+
</p>
112+
</dd>
113+
<dt>
114+
wasChanged {Boolean [false]}
115+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
116+
</dt>
117+
<dd>
118+
<p>
119+
True if <code>controlElement</code> has emitted a <i>change</i> event.
120+
</p>
121+
</dd>
122+
<dt>
123+
wasTouched {Boolean [false]}
124+
<hx-pill class="hxSubBody" persist>read-only</hx-pill>
125+
</dt>
126+
<dd>
127+
<p>
128+
True if <code>controlElement</code> has emitted a <i>blur</i> event.
129+
</p>
130+
</dd>
131+
</dl>
132+
{% endblock %}

0 commit comments

Comments
 (0)