refactor(HXSelectElement): support conditional validation

* removed `[invalid]` styles * add <hx-select-control> * [hx-changed] when 'change' happens on first <select> descendant * [hx-touched] when 'blur' happens on first <select> descendant * <hx-select> and <select> styled invalid if: * hx-select-control[hx-changed] and select:invalid * hx-select-control[hx-touched] and select:invalid * hx-select-control.hxInvalid (forced styling by app author)
HelixDesignSystem · Mar 14, 2019 · 05476b0 · 05476b0
1 parent 8affbd2
commit 05476b0
Show file tree

Hide file tree

Showing 12 changed files with 596 additions and 822 deletions.
diff --git a/docs/_data/nav.json5 b/docs/_data/nav.json5
@@ -63,8 +63,8 @@
         label: 'Custom Elements',
         path: 'elements',
         children: [
-            { label: '<hx-accordion>', path: 'hx-accordion' },
             { label: '<hx-accordion-panel>', path: 'hx-accordion-panel' },
+            { label: '<hx-accordion>', path: 'hx-accordion' },
             { label: '<hx-alert>', path: 'hx-alert' },
             { label: '<hx-busy>', path: 'hx-busy' },
             { label: '<hx-checkbox>', path: 'hx-checkbox' },
@@ -85,8 +85,9 @@
             { label: '<hx-progress>', path: 'hx-progress' },
             { label: '<hx-radio>', path: 'hx-radio' },
             { label: '<hx-reveal>', path: 'hx-reveal' },
-            { label: '<hx-search>', path: 'hx-search' },
             { label: '<hx-search-assistance>', path: 'hx-search-assistance' },
+            { label: '<hx-search>', path: 'hx-search' },
+            { label: '<hx-select-control>', path: 'hx-select-control' },
             { label: '<hx-select>', path: 'hx-select' },
             { label: '<hx-status>', path: 'hx-status' },
             { label: '<hx-tab>', path: 'hx-tab' },

diff --git a/docs/components/dropdown-select/index.html b/docs/components/dropdown-select/index.html
@@ -3,6 +3,8 @@
 minver: 0.16.0
 also:
   components/dropdown-select/test.html: Testing - Dropdown Select
+  elements/hx-select-control: <hx-select-control>
+  elements/hx-select: <hx-select>
 ---
 {% extends 'component.njk' %}
 {% block content %}
@@ -31,9 +33,8 @@ <h2 id="basic-select">Basic Select</h2>
       </header>
 
       <div>
-        <div class="hxSelect">
+        <hx-select-control>
           <select
-            id="selDemo"
             :disabled="isDisabled"
             :required="isRequired"
           >
@@ -43,10 +44,7 @@ <h2 id="basic-select">Basic Select</h2>
             <option value="3">Option 3</option>
           </select>
           <hx-select></hx-select>
-          <label for="selDemo">
-            Choose an Option
-          </label>
-        </div>
+        </hx-select-control>
       </div>
 
       <footer>
@@ -57,40 +55,28 @@ <h2 id="basic-select">Basic Select</h2>
       <hx-busy></hx-busy>
       <p>Loading...</p>
     </div>
-    <p class="hxSubBody hxSubdued">
-      <hx-icon type="info-circle"></hx-icon>
-      <code>&lt;select&gt;</code> must be defined before
-      <code>&lt;hx-select&gt;</code> and <code>&lt;label&gt;</code>
-      for styles to be effective.
-    </p>
-    <p class="hxSubBody hxSubdued">
-      <hx-icon type="info-circle"></hx-icon>
-      Extra elements will be hidden.
-    </p>
   </section>
 
+  <!--
+    TODO:
+    Need centralized documentation of HelixUI form control validation behavior.
+  -->
   <section>
     <h2 id="validation">Validation</h2>
     <p class="comfortable">
       A {{page.title}} is designed to take advantage of standardized
       <a href="https://mzl.la/2SuKTmv">HTML form validation</a> capabilities.
-      Error styles will be applied as long as the <code>&lt;select&gt;</code>
-      element matches the <code>:invalid</code> CSS pseudo-class.
     </p>
     <p>
-      There are two ways to modify validity of the
-      <code>&lt;select&gt;</code> element.
+      By default, a {{page.title}} is styled as if it were valid.
+      Otherwise, any form control that is invalid on initial render
+      would display as invalid before the user has had a chance to
+      interact with the form.
+    </p>
+    <p>
+      As the user interacts with a {{page.title}}, it will automatically update
+      itself in order to communicate when it is appropriate for the browser
+      to apply invalid control styles.
     </p>
-    <ol class="hxList">
-      <li>
-        add or remove the <code>required</code> attribute
-      </li>
-      <li>
-        calling its
-        <a href="https://mzl.la/2MQYTkd">
-          <code>setCustomValidity()</code>
-        </a> method
-      </li>
-    </ol>
   </section>
 {% endblock %}
diff --git a/docs/components/dropdown-select/select-demo.js b/docs/components/dropdown-select/select-demo.js
@@ -8,21 +8,24 @@ if (document.getElementById('vue-selectDemo')) {
             isRequired: false,
         },
         computed: {
+            attrDisabled: function () {
+                return (this.isDisabled ? 'disabled' : '');
+            },
+            attrRequired: function () {
+                return (this.isRequired ? 'required' : '');
+            },
             snippet: function () {
                 return Util.snippet(`
-                    <div class="hxSelect">
+                    <hx-select-control>
                       <select
-                        ${this.isDisabled ? 'disabled' : ''}
-                        id="demoSelect"
-                        ${this.isRequired ? 'required' : ''}
+                        ${this.attrDisabled}
+                        ${this.attrRequired}
                       >
                         ...
                       </select>
 
                       <hx-select></hx-select>
-
-                      <label for="demoSelect">...</label>
-                    </div>
+                    </hx-select-control>
                 `);
             },
         },