Skip to content

Commit ef5f722

Browse files
Davis MartinRyan A. Johnson
Davis Martin
authored and
Ryan A. Johnson
committed
feat(search): add Search Box
* Search demo using `<hx-checkbox>` in options w/ VueJS * corrected checkbox style bug * updated regression baselines
1 parent 44b62f1 commit ef5f722

File tree

17 files changed

+895
-32
lines changed

17 files changed

+895
-32
lines changed

‎docs/_data/nav.json5‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
{ label: 'Panels', path: 'panels' },
4646
{ label: 'Popovers', path: 'popovers' },
4747
{ label: 'Reveals', path: 'reveals' },
48+
{ label: 'Search', path: 'search' },
4849
{ label: 'Status Pills', path: 'status-pills' },
4950
{ label: 'Tables', path: 'tables' },
5051
{ label: 'Tabs', path: 'tabs' },
@@ -81,6 +82,7 @@
8182
{ label: '<hx-panelhead>', path: 'hx-panelhead' },
8283
{ label: '<hx-popover>', path: 'hx-popover' },
8384
{ label: '<hx-reveal>', path: 'hx-reveal' },
85+
{ label: '<hx-search>', path: 'hx-search' },
8486
{ label: '<hx-status>', path: 'hx-status' },
8587
{ label: '<hx-tab>', path: 'hx-tab' },
8688
{ label: '<hx-tabcontent>', path: 'hx-tabcontent' },

‎docs/components/search/index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
title: Search
3+
also:
4+
elements/hx-search: <hx-search>
5+
---
6+
{% extends 'component.njk' %}
7+
{% block content %}
8+
<section>
9+
<h2 id="demos">Demos</h2>
10+
<div id="vue-searchDemo" class="hxRow" v-cloak>
11+
<div class="hxCol hxSpan-12-xs hxSpan-9-lg">
12+
<h3>Basic Search Box</h3>
13+
<div class="demo">
14+
<hx-search
15+
:disabled="isDisabled"
16+
:invalid="isInvalid"
17+
:placeholder="placeholder"
18+
:value="searchValue"
19+
@input="onSearchUpdate"
20+
@change="onSearchUpdate"
21+
></hx-search>
22+
</div>
23+
24+
<pre><code>{% raw %}{{snippet}}{% endraw %}</code></pre>
25+
</div>
26+
<div class="hxCol hxSpan-12-xs hxSpan-3-lg">
27+
<h3>Options</h3>
28+
<p>
29+
<b>Placeholder:</b><br />
30+
<input
31+
type="text"
32+
class="hxTextCtrl"
33+
placeholder="e.g. Search..."
34+
v-model="placeholder"
35+
/>
36+
</p>
37+
<p>
38+
<b>Value:</b><br />
39+
<input
40+
type="text"
41+
class="hxTextCtrl"
42+
placeholder="e.g. kittens"
43+
v-model="searchValue"
44+
/>
45+
</p>
46+
<p>
47+
<hx-checkbox
48+
:checked="isDisabled"
49+
@change="onChkChange($event, 'isDisabled')">
50+
</hx-checkbox>
51+
<label>Disabled</label>
52+
</p>
53+
<p>
54+
<hx-checkbox
55+
:checked="isInvalid"
56+
@change="onChkChange($event, 'isInvalid')">
57+
</hx-checkbox>
58+
<label>Invalid</label>
59+
</p>
60+
</div>
61+
</div>
62+
</section>
63+
64+
<section data-visreg="search-states">
65+
<h2>States</h2>
66+
<table class="hxTable hxTable--condensed">
67+
<tbody>
68+
<tr>
69+
<th>Default</th>
70+
<td>
71+
<hx-search></hx-search>
72+
</td>
73+
<td>
74+
<hx-search placeholder="Search..."></hx-search>
75+
</td>
76+
<td>
77+
<hx-search value="kittens"></hx-search>
78+
</td>
79+
</tr>
80+
<tr>
81+
<th>Invalid</th>
82+
<td>
83+
<hx-search invalid></hx-search>
84+
</td>
85+
<td>
86+
<hx-search invalid placeholder="Search..."></hx-search>
87+
</td>
88+
<td>
89+
<hx-search invalid value="kittens"></hx-search>
90+
</td>
91+
</tr>
92+
<tr>
93+
<th>Disabled</th>
94+
<td>
95+
<hx-search disabled></hx-search>
96+
</td>
97+
<td>
98+
<hx-search disabled placeholder="Search..."></hx-search>
99+
</td>
100+
<td>
101+
<hx-search disabled value="kittens"></hx-search>
102+
</td>
103+
</tr>
104+
<tr>
105+
<th>Disabled and Invalid</th>
106+
<td>
107+
<hx-search invalid disabled></hx-search>
108+
</td>
109+
<td>
110+
<hx-search invalid disabled placeholder="Search..."></hx-search>
111+
</td>
112+
<td>
113+
<hx-search invalid disabled value="kittens"></hx-search>
114+
</td>
115+
</tr>
116+
</tbody>
117+
</table>
118+
</section>
119+
{% endblock %}

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import Util from '../../_util';
2+
3+
if (document.getElementById('vue-searchDemo')) {
4+
new Vue({
5+
el: '#vue-searchDemo',
6+
data: {
7+
isDisabled: false,
8+
isInvalid: false,
9+
searchValue: '',
10+
placeholder: '',
11+
},
12+
methods: {
13+
// Used on "input" and "change" events
14+
onSearchUpdate: function (evt) {
15+
this.searchValue = evt.target.value;
16+
},
17+
onChkChange: function (evt, datum) {
18+
this[datum] = evt.currentTarget.checked;
19+
},
20+
},
21+
computed: {
22+
hasPlaceholder: function () {
23+
return (this.placeholder !== '');
24+
},
25+
hasValue: function () {
26+
return (this.searchValue && this.searchValue !== '');
27+
},
28+
snippet: function () {
29+
return Util.snippet(`
30+
<hx-search
31+
${this.isDisabled ? 'disabled' : ''}
32+
${this.isInvalid ? 'invalid' : ''}
33+
${this.hasPlaceholder ? `placeholder="${this.placeholder}"` : ''}
34+
${this.hasValue ? `value="${this.searchValue}"` : ''}>
35+
<!-- inner content will be removed -->
36+
</hx-search>
37+
`);
38+
},
39+
},
40+
});
41+
}

‎docs/docs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import './components/lists/list-demo';
1010
import './components/panels/panel-demo';
1111
import './components/popovers/popover-demo';
1212
import './components/reveals/reveal-demo';
13+
import './components/search/search-demo';
1314
import './components/status-pills/status-demo';
1415
import './components/stepper/stepper-demo';
1516
import './components/tables/table-demo';

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

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: <hx-search>
3+
also:
4+
components/search: Search
5+
---
6+
{% extends 'element.njk' %}
7+
{% block content %}
8+
<section>
9+
<p>
10+
The custom <code>{{page.title}}</code> element renders a search control
11+
that accepts user input.
12+
</p>
13+
<hx-dl class="hxBox-md metadata">
14+
<hx-def>
15+
<hx-dt>Permitted Parents</hx-dt>
16+
<hx-dd>any</hx-dd>
17+
</hx-def>
18+
<hx-def>
19+
<hx-dt>Permitted Children</hx-dt>
20+
<hx-dd>none (content will be removed upon element upgrade)</hx-dd>
21+
</hx-def>
22+
<hx-def>
23+
<hx-dt>Events</hx-dt>
24+
<hx-dd>
25+
Any of the following:
26+
<ul>
27+
<li><code>input</code> as user types</li>
28+
<li><code>change</code> on clear</li>
29+
</ul>
30+
</hx-dd>
31+
</hx-def>
32+
</hx-dl>
33+
</section>
34+
{% endblock %}
35+
36+
{% block attributes %}
37+
<dl>
38+
<dt>disabled</dt>
39+
<dd>Disables user interaction</dd>
40+
41+
<dt>invalid</dt>
42+
<dd>Marks input as invalid</dd>
43+
44+
<dt>placeholder</dt>
45+
<dd>Hint of what can be entered into the control</dd>
46+
47+
<dt>value</dt>
48+
<dd>Initial value of the control</dd>
49+
</dl>
50+
{% endblock %}
51+
52+
{% block properties %}
53+
<dl>
54+
<dt>disabled <small>(Boolean [false])</small></dt>
55+
<dd>
56+
Get / Set the disabled state of the control.
57+
</dd>
58+
59+
<dt>invalid <small>(Boolean [false])</small></dt>
60+
<dd>
61+
Get / Set the invalid state of the control.
62+
</dd>
63+
64+
<dt>placeholder <small>(String)</small></dt>
65+
<dd>
66+
Get / Set the control's placeholder text.
67+
The placeholder text must not contain carriage returns or line-feeds
68+
</dd>
69+
70+
<dt>value <small>(String)</small></dt>
71+
<dd>
72+
Get / Set the current value of the control.
73+
</dd>
74+
</dl>
75+
{% endblock %}

‎src/helix-ui.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ figure {
6161
@import 'core/hx-panel';
6262
@import 'core/hx-popover';
6363
@import 'core/hx-reveal';
64+
@import 'core/hx-search';
6465
@import 'core/hx-status';
6566
@import 'core/hx-tab';
6667
@import 'core/hx-tabcontent';

‎src/helix-ui/elements.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export { HXMenuitemElement } from './elements/HXMenuitemElement.js';
1010
export { HXModalElement } from './elements/HXModalElement.js';
1111
export { HXPopoverElement } from './elements/HXPopoverElement.js';
1212
export { HXRevealElement } from './elements/HXRevealElement.js';
13+
export { HXSearchElement } from './elements/HXSearchElement.js';
1314
export { HXTabcontentElement } from './elements/HXTabcontentElement.js';
1415
export { HXTabElement } from './elements/HXTabElement.js';
1516
export { HXTablistElement } from './elements/HXTablistElement.js';

0 commit comments

Comments
 (0)