Skip to content

Commit ccb006a

Browse files
CITguyCITguy
authored
Merge pull request #293 from rackerlabs/surf-1213-file-input
new(feat): file input styles
2 parents b471d34 + d8cc94a commit ccb006a

File tree

13 files changed

+448
-3
lines changed

13 files changed

+448
-3
lines changed

‎docs/_data/nav.json5‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
{ label: '<hx-disclosure>', path: 'hx-disclosure' },
7777
{ label: '<hx-error>', path: 'hx-error' },
7878
{ label: '<hx-file-icon>', path: 'hx-file-icon' },
79+
{ label: '<hx-file-input>', path: 'hx-file-input' },
7980
{ label: '<hx-file-tile>', path: 'hx-file-tile' },
8081
{ label: '<hx-icon>', path: 'hx-icon' },
8182
{ label: '<hx-menu>', path: 'hx-menu' },

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
(function () {
2+
const VARIANTS = [
3+
{ label: 'Primary', val: 'hxPrimary' },
4+
{ label: 'Secondary', val: '', default: true },
5+
{ label: 'Tertiary', val: 'hxTertiary' },
6+
];
7+
8+
if (document.getElementById('vue-fileInputDemo')) {
9+
new Vue({
10+
el: '#vue-fileInputDemo',
11+
data: {
12+
variant: VARIANTS[1],
13+
variants: VARIANTS,
14+
icon: 'upload',
15+
label: 'Upload File',
16+
},
17+
computed: {
18+
classes: function () {
19+
return this.variant.val;
20+
},
21+
},
22+
});
23+
}
24+
})();

‎docs/components/files/index.html‎

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,78 @@
22
title: Files
33
minver: 0.12.0
44
also:
5-
components/files/test.html: Testing - Files
5+
components/files/test-file-selectors.html: Testing - File Selectors
6+
components/files/test-file-tiles.html: Testing - File Tiles
67
components/Icons: Icons
8+
elements/hx-file-input: <hx-file-input>
79
elements/hx-file-tile: <hx-file-tile>
810
---
911
{% extends 'component.njk' %}
1012
{% block content %}
1113
<section>
12-
<h2 id="basic-file-tile">Basic File Tile</h2>
14+
<h2 id="file-selector">File Selector</h2>
15+
<p class="hxSubBody">Added: v0.13.0</p>
16+
<div class="example" id="vue-fileInputDemo" v-cloak>
17+
<header>
18+
<form class="beta-hxForm">
19+
<fieldset>
20+
<legend>Variant</legend>
21+
<label v-for="_variant in variants">
22+
<input
23+
:value="_variant"
24+
name="variant"
25+
type="radio"
26+
v-model="variant"
27+
/>
28+
<span v-text="_variant.label"></span>
29+
<em class="hxSubBody" v-if="_variant.default">(default)</em>
30+
</label>
31+
</fieldset>
32+
<p>
33+
<label for="inputIcon">Icon</label>
34+
<input id="inputIcon" class="hxTextCtrl" v-model="icon" />
35+
</p>
36+
<p>
37+
<label for="inputLabel">Label</label>
38+
<input id="inputLabel" class="hxTextCtrl" v-model="label" />
39+
</p>
40+
</form>
41+
</header>
42+
<div>
43+
<hx-file-input
44+
:class="classes"
45+
:icon="icon"
46+
:label="label">
47+
<input type="file" />
48+
</hx-file-input>
49+
</div>
50+
<footer>
51+
<template v-if="classes === ''">
52+
{% code 'html' %}{% raw %}
53+
<hx-file-input
54+
icon="{{icon}}"
55+
label="{{label}}">
56+
<input type="file" />
57+
</hx-file-input>{% endraw %}
58+
{% endcode %}
59+
</template>
60+
<template v-else>
61+
{% code 'html' %}{% raw %}
62+
<hx-file-input
63+
class="{{classes}}"
64+
icon="{{icon}}"
65+
label="{{label}}">
66+
<input type="file" />
67+
</hx-file-input>{% endraw %}
68+
{% endcode %}
69+
</template>
70+
</footer>
71+
</div>
72+
</section>
73+
74+
<section>
75+
<h2 id="file-tile">File Tile</h2>
76+
<p class="hxSubBody">Added: v0.12.0</p>
1377
<div class="example" id="vue-fileTileDemo" v-cloak>
1478
<header>
1579
<form class="beta-hxForm">

‎docs/components/files/test-file-selectors.html‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: Testing - File Selectors
3+
---
4+
{% extends 'test.njk' %}
5+
{% block content %}
6+
<section>
7+
<nav class="hxBreadcrumb">
8+
<a href="components/files">Files</a>
9+
<hx-icon class="delimiter" type="angle-right"></hx-icon>
10+
<a href="#">{{page.title}}</a>
11+
</nav>
12+
</section>
13+
14+
<h2>Upload File Selectors</h2>
15+
<section>
16+
<h3>Primary with Label</h3>
17+
<hx-file-input
18+
class="hxPrimary"
19+
label="Upload File">
20+
<input type="file" />
21+
</hx-file-input>
22+
</section>
23+
24+
<section>
25+
<h3>Secondary with Label</h3>
26+
<hx-file-input
27+
label="Upload File">
28+
<input type="file" />
29+
</hx-file-input>
30+
</section>
31+
32+
<section>
33+
<h3>Tertiary with Label</h3>
34+
<hx-file-input
35+
class="hxTertiary"
36+
label="Upload File">
37+
<input type="file" />
38+
</hx-file-input>
39+
</section>
40+
41+
<section>
42+
<h3>Tertiary without Label</h3>
43+
<hx-file-input
44+
class="hxTertiary">
45+
<input type="file" />
46+
</hx-file-input>
47+
</section>
48+
49+
<br />
50+
51+
<h2>Attach File Selectors</h2>
52+
<section>
53+
<h3>Primary with Label</h3>
54+
<hx-file-input
55+
class="hxPrimary"
56+
icon="paperclip"
57+
label="Attach File">
58+
<input type="file" />
59+
</hx-file-input>
60+
</section>
61+
62+
<section>
63+
<h3>Secondary with Label</h3>
64+
<hx-file-input
65+
icon="paperclip"
66+
label="Attach File">
67+
<input type="file" />
68+
</hx-file-input>
69+
</section>
70+
71+
<section>
72+
<h3>Tertiary with Label</h3>
73+
<hx-file-input
74+
class="hxTertiary"
75+
icon="paperclip"
76+
label="Attach File">
77+
<input type="file" />
78+
</hx-file-input>
79+
</section>
80+
81+
<section>
82+
<h3>Tertiary without Icon</h3>
83+
<hx-file-input
84+
class="hxTertiary"
85+
icon="paperclip">
86+
<input type="file" />
87+
</hx-file-input>
88+
</section>
89+
{% endblock %}

‎docs/components/files/test.html‎ renamed to ‎docs/components/files/test-file-tiles.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Testing - Files
2+
title: Testing - File Tiles
33
---
44
{% extends 'test.njk' %}
55
{% block content %}

‎docs/docs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import './components/box/box-demo';
77
import './components/buttons/button-demo';
88
import './components/checkboxes/checkbox-demo';
99
import './components/choice-tiles/choice-tile-demo';
10+
import './components/files/file-input-demo';
1011
import './components/files/file-tile-demo';
1112
import './components/icons/icon-demo';
1213
import './components/lists/list-demo';

‎docs/elements/hx-file-input/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: <hx-file-input>
3+
minver: 0.13.0
4+
also:
5+
components/files: Files
6+
---
7+
{% extends 'element.njk' %}
8+
{% block content %}
9+
10+
<section>
11+
<p>
12+
The custom <code>{{page.title}}</code> element renders a button to access
13+
the system file selector dialog.
14+
</p>
15+
16+
<dl class="hxBox-md metadata hxList">
17+
<div>
18+
<dt>Permitted Parents</dt>
19+
<dd>any</dd>
20+
</div>
21+
<div>
22+
<dt>Permitted Children</dt>
23+
<dd><code>&lt;input type="file" /&gt;</code></dd>
24+
</div>
25+
<div>
26+
<dt>Events</dt>
27+
<dd><em>none</em></dd>
28+
</div>
29+
</dl>
30+
</section>
31+
32+
<section>
33+
<h2 id="methods">Methods</h2>
34+
<dl>
35+
<dt>click()</dt>
36+
<dd>Simulates a mouse click on the element.</dd>
37+
</dl>
38+
</section>
39+
{% endblock %}
40+
41+
{% block attributes %}
42+
<dl>
43+
<dt>icon {Enum&lt;String&gt;}</dt>
44+
<dd>
45+
<p>
46+
Changes the icon to one of the
47+
<a href="components/icons/#available-icons">available icons</a>.
48+
</p>
49+
</dd>
50+
51+
<dt>label {String} <i>(optional)</i></dt>
52+
<dd>
53+
<p>
54+
Sets the label of the file selector.
55+
</p>
56+
</dd>
57+
</dl>
58+
{% endblock %}
59+
60+
{% block properties %}
61+
<dl>
62+
<dt>fileInput {HTMLInputElement}</dt>
63+
<dd>
64+
<p>
65+
Returns the first <code>&lt;input type="file" /&gt;</code> child (if present).
66+
</p>
67+
</dd>
68+
<dt>icon {String}</dt>
69+
<dd>
70+
<p>
71+
Manipulates the <code>icon</code> attribute.
72+
</p>
73+
</dd>
74+
75+
<dt>label {String}</dt>
76+
<dd>
77+
<p>
78+
Manipulates the <code>label</code> attribute.
79+
</p>
80+
</dd>
81+
</dl>
82+
{% endblock %}

‎src/helix-ui/elements.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export { HXDisclosureElement } from './elements/HXDisclosureElement.js';
1111
export { HXElement } from './elements/HXElement.js';
1212
export { HXErrorElement } from './elements/HXErrorElement.js';
1313
export { HXFileIconElement } from './elements/HXFileIconElement.js';
14+
export { HXFileInputElement } from './elements/HXFileInputElement.js';
1415
export { HXFileTileElement } from './elements/HXFileTileElement.js';
1516
export { HXIconElement } from './elements/HXIconElement.js';
1617
export { HXMenuElement } from './elements/HXMenuElement.js';

‎src/helix-ui/elements/HXFileInputElement.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div id="hxFile">
2+
<div id="hxContent">
3+
<slot></slot>
4+
</div>
5+
<button id="hxButton" type="button">
6+
<hx-icon id="hxIcon" type="upload"></hx-icon>
7+
<span id="hxLabel"></span>
8+
</button>
9+
</div>

0 commit comments

Comments
 (0)