Skip to content

Commit 11c9550

Browse files
author
Cathy Siller
committed
refactor(hx-file-input): refactor hx-file-input code to match form controls
1 parent f61c9b3 commit 11c9550

File tree

14 files changed

+785
-257
lines changed

14 files changed

+785
-257
lines changed

‎docs/components/file/file-input-demo.js‎

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

33
(function () {
44
const ICONS = [ 'upload', 'paperclip' ];
5-
5+
66
const VARIANTS = [
7-
{ label: 'Primary', val: 'hxPrimary' },
8-
{ label: 'Secondary', val: '', default: true },
9-
{ label: 'Tertiary', val: 'hxTertiary' },
7+
{ label: 'Primary', val: 'hxBtn hxPrimary' },
8+
{ label: 'Secondary', val: 'hxBtn', default: true },
9+
{ label: 'Tertiary', val: 'hxBtn hxTertiary' },
1010
];
1111

1212
if (document.getElementById('vue-fileInputDemo')) {
@@ -15,6 +15,7 @@ import Util from '../../_util';
1515
data: {
1616
icon: ICONS[0],
1717
icons: ICONS,
18+
isDisabled: false,
1819
isMultiple: false,
1920
label: 'Upload File',
2021
variant: VARIANTS[1],
@@ -31,22 +32,24 @@ import Util from '../../_util';
3132
attrIcon: function () {
3233
return `icon="${this.icon}"`;
3334
},
34-
attrLabel: function () {
35-
if (this.label !== '') {
36-
return `label="${this.label}"`;
37-
} else {
38-
return '';
39-
}
40-
},
4135
snippet: function () {
4236
return Util.snippet(`
43-
<hx-file-input
44-
${this.attrClass}
45-
${this.attrIcon}
46-
${this.attrLabel}
47-
>
48-
<input ${this.isMultiple ? 'multiple ' : ''}type="file" />
49-
</hx-file-input>
37+
<hx-file-control>
38+
<input
39+
${this.isDisabled ? 'disabled' : ''}
40+
${this.isMultiple ? 'multiple ' : ''}
41+
id="fileInputDemo"
42+
type="file"
43+
/>
44+
<label for="fileInputDemo">
45+
<hx-file-input
46+
${this.attrClass}
47+
${this.attrIcon}
48+
>
49+
${this.label}
50+
</hx-file-input>
51+
</label>
52+
</hx-file-control>
5053
`);
5154
},
5255
},

‎docs/components/file/index.html‎

Lines changed: 56 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
also:
55
components/file/test-drop-fence.html: Testing - Drop Fence
66
components/file/test-drop-zone.html: Testing - Drop Zone
7-
components/file/test-file-selector.html: Testing - File Selector
7+
components/file/test-file-input.html: Testing - File Input
88
components/file/test-file-tile.html: Testing - File Tile
99
components/icon: Icon
1010
elements/hx-drop-fence: <hx-drop-fence>
@@ -42,11 +42,17 @@ <h2 id="drop-zone">Drop Zone</h2>
4242
<hx-drop-fence>
4343
<p>
4444
Drop files here or
45-
<hx-file-input
46-
class="hxTertiary"
47-
label="browse your files">
48-
<input type="file" />
49-
</hx-file-input>.
45+
<hx-file-control>
46+
<input
47+
id="fileInputDropZoneDemo"
48+
type="file"
49+
/>
50+
<label for="fileInputDropZoneDemo">
51+
<hx-file-input class="hxBtn hxTertiary">
52+
browse your files
53+
</hx-file-input>
54+
</label>
55+
</hx-file-control>
5056
</p>
5157
</hx-drop-fence>
5258
</hx-drop-zone>
@@ -58,11 +64,17 @@ <h2 id="drop-zone">Drop Zone</h2>
5864
<hx-drop-fence>
5965
<p>
6066
Drop files here or
61-
<hx-file-input
62-
class="hxTertiary"
63-
label="browse your files">
64-
<input type="file" />
65-
</hx-file-input>.
67+
<hx-file-control>
68+
<input
69+
id="fileInputDropZoneDemo"
70+
type="file"
71+
/>
72+
<label for="fileInputDropZoneDemo">
73+
<hx-file-input class="hxBtn hxTertiary">
74+
browse your files
75+
</hx-file-input>
76+
</label>
77+
</hx-file-control>
6678
</p>
6779
</hx-drop-fence>
6880
</hx-drop-zone>
@@ -73,7 +85,7 @@ <h2 id="drop-zone">Drop Zone</h2>
7385

7486
<section>
7587
<header>
76-
<h2 id="file-selector">File Selector</h2>
88+
<h2 id="file-input">File Input</h2>
7789
<p class="hxSubBody">Added: v0.13.0</p>
7890
{# TODO: add section description #}
7991
</header>
@@ -129,6 +141,18 @@ <h2 id="file-selector">File Selector</h2>
129141

130142
<fieldset>
131143
<legend class="beta-hxFieldName">Control Options</legend>
144+
<hx-checkbox-control>
145+
<input
146+
id="chkIsDisabled"
147+
type="checkbox"
148+
v-model="isDisabled"
149+
/>
150+
<label for="chkIsDisabled">
151+
<hx-checkbox></hx-checkbox>
152+
Disabled
153+
</label>
154+
</hx-checkbox-control>
155+
132156
<hx-checkbox-control>
133157
<input
134158
id="chkIsMultiple"
@@ -145,22 +169,36 @@ <h2 id="file-selector">File Selector</h2>
145169
</header>
146170

147171
<div>
148-
<hx-file-input
149-
:class="variant.val"
150-
:icon="icon"
151-
:label="label"
152-
>
172+
<hx-file-control>
153173
<input
174+
id="fileInputDemo"
154175
type="file"
176+
:disabled="isDisabled"
155177
:multiple="isMultiple"
156178
/>
157-
</hx-file-input>
179+
<label for="fileInputDemo">
180+
<hx-file-input
181+
:class="variant.val"
182+
:icon="icon"
183+
>
184+
{% raw %}{{label}}{% endraw %}
185+
</hx-file-input>
186+
</label>
187+
</hx-file-control>
158188
</div>
159189

160190
<footer>
161191
<pre><code v-text="snippet"></code></pre>
162192
</footer>
163193
</div>
194+
<p class="hxSubdued hxSubBody">
195+
<hx-icon type="exclamation-triangle"></hx-icon>
196+
Microsoft browsers never match the <code>input[type="file"]:active</code> CSS selector.
197+
</p>
198+
<p class="hxSubdued hxSubBody">
199+
<hx-icon type="exclamation-triangle"></hx-icon>
200+
Microsoft browsers apply two tab stops on <code>&lt;input type="file"&gt;</code> elements.
201+
</p>
164202
</section>
165203

166204
<section>

0 commit comments

Comments
 (0)