refactor(hx-file-input): refactor hx-file-input code to match form co…

…ntrols
HelixDesignSystem · Jun 17, 2019 · 11c9550 · 11c9550
1 parent f61c9b3
commit 11c9550
Show file tree

Hide file tree

Showing 14 changed files with 785 additions and 257 deletions.
diff --git a/docs/components/file/file-input-demo.js b/docs/components/file/file-input-demo.js
@@ -2,11 +2,11 @@ import Util from '../../_util';
 
 (function () {
     const ICONS = [ 'upload', 'paperclip' ];
-    
+
     const VARIANTS = [
-        { label: 'Primary', val: 'hxPrimary' },
-        { label: 'Secondary', val: '', default: true },
-        { label: 'Tertiary', val: 'hxTertiary' },
+        { label: 'Primary', val: 'hxBtn hxPrimary' },
+        { label: 'Secondary', val: 'hxBtn', default: true },
+        { label: 'Tertiary', val: 'hxBtn hxTertiary' },
     ];
 
     if (document.getElementById('vue-fileInputDemo')) {
@@ -15,6 +15,7 @@ import Util from '../../_util';
             data: {
                 icon: ICONS[0],
                 icons: ICONS,
+                isDisabled: false,
                 isMultiple: false,
                 label: 'Upload File',
                 variant: VARIANTS[1],
@@ -31,22 +32,24 @@ import Util from '../../_util';
                 attrIcon: function () {
                     return `icon="${this.icon}"`;
                 },
-                attrLabel: function () {
-                    if (this.label !== '') {
-                        return `label="${this.label}"`;
-                    } else {
-                        return '';
-                    }
-                },
                 snippet: function () {
                     return Util.snippet(`
-                        <hx-file-input
-                          ${this.attrClass}
-                          ${this.attrIcon}  
-                          ${this.attrLabel}
-                        >
-                          <input ${this.isMultiple ? 'multiple ' : ''}type="file" />
-                        </hx-file-input>
+                        <hx-file-control>
+                          <input
+                            ${this.isDisabled ? 'disabled' : ''}
+                            ${this.isMultiple ? 'multiple ' : ''}
+                            id="fileInputDemo"
+                            type="file"
+                          />
+                          <label for="fileInputDemo">
+                            <hx-file-input
+                              ${this.attrClass}
+                              ${this.attrIcon}
+                            >
+                              ${this.label}
+                            </hx-file-input>
+                          </label>
+                        </hx-file-control>
                     `);
                 },
             },

diff --git a/docs/components/file/index.html b/docs/components/file/index.html
@@ -4,7 +4,7 @@
 also:
   components/file/test-drop-fence.html: Testing - Drop Fence
   components/file/test-drop-zone.html: Testing - Drop Zone
-  components/file/test-file-selector.html: Testing - File Selector
+  components/file/test-file-input.html: Testing - File Input
   components/file/test-file-tile.html: Testing - File Tile
   components/icon: Icon
   elements/hx-drop-fence: <hx-drop-fence>
@@ -42,11 +42,17 @@ <h2 id="drop-zone">Drop Zone</h2>
           <hx-drop-fence>
             <p>
               Drop files here or
-              <hx-file-input
-                class="hxTertiary"
-                label="browse your files">
-                <input type="file" />
-              </hx-file-input>.
+              <hx-file-control>
+                <input
+                  id="fileInputDropZoneDemo"
+                  type="file"
+                />
+                <label for="fileInputDropZoneDemo">
+                  <hx-file-input class="hxBtn hxTertiary">
+                    browse your files
+                  </hx-file-input>
+                </label>
+              </hx-file-control>
             </p>
           </hx-drop-fence>
         </hx-drop-zone>
@@ -58,11 +64,17 @@ <h2 id="drop-zone">Drop Zone</h2>
             <hx-drop-fence>
               <p>
                 Drop files here or
-                <hx-file-input
-                  class="hxTertiary"
-                  label="browse your files">
-                  <input type="file" />
-                </hx-file-input>.
+                <hx-file-control>
+                  <input
+                    id="fileInputDropZoneDemo"
+                    type="file"
+                  />
+                  <label for="fileInputDropZoneDemo">
+                    <hx-file-input class="hxBtn hxTertiary">
+                      browse your files
+                    </hx-file-input>
+                  </label>
+                </hx-file-control>
               </p>
             </hx-drop-fence>
           </hx-drop-zone>
@@ -73,7 +85,7 @@ <h2 id="drop-zone">Drop Zone</h2>
 
   <section>
     <header>
-      <h2 id="file-selector">File Selector</h2>
+      <h2 id="file-input">File Input</h2>
       <p class="hxSubBody">Added: v0.13.0</p>
       {# TODO: add section description #}
     </header>
@@ -129,6 +141,18 @@ <h2 id="file-selector">File Selector</h2>
 
           <fieldset>
             <legend class="beta-hxFieldName">Control Options</legend>
+            <hx-checkbox-control>
+              <input
+                id="chkIsDisabled"
+                type="checkbox"
+                v-model="isDisabled"
+              />
+              <label for="chkIsDisabled">
+                <hx-checkbox></hx-checkbox>
+                Disabled
+              </label>
+            </hx-checkbox-control>
+
             <hx-checkbox-control>
               <input
                 id="chkIsMultiple"
@@ -145,22 +169,36 @@ <h2 id="file-selector">File Selector</h2>
       </header>
 
       <div>
-        <hx-file-input
-          :class="variant.val"
-          :icon="icon"
-          :label="label"
-        >
+        <hx-file-control>
           <input
+            id="fileInputDemo"
             type="file"
+            :disabled="isDisabled"
             :multiple="isMultiple"
           />
-        </hx-file-input>
+          <label for="fileInputDemo">
+            <hx-file-input
+              :class="variant.val"
+              :icon="icon"
+            >
+              {% raw %}{{label}}{% endraw %}
+            </hx-file-input>
+          </label>
+        </hx-file-control>
       </div>
 
       <footer>
         <pre><code v-text="snippet"></code></pre>
       </footer>
     </div>
+    <p class="hxSubdued hxSubBody">
+      <hx-icon type="exclamation-triangle"></hx-icon>
+      Microsoft browsers never match the <code>input[type="file"]:active</code> CSS selector.
+    </p>
+    <p class="hxSubdued hxSubBody">
+      <hx-icon type="exclamation-triangle"></hx-icon>
+      Microsoft browsers apply two tab stops on <code>&lt;input type="file"&gt;</code> elements.
+    </p>
   </section>
 
   <section>