Merge pull request #141 from rackerlabs/refactor-hx-checkbox

fix compatibility support for checkbox control

Author: CITguy

docs/components/checkboxes/checkbox-demo.js

@@ -7,6 +7,12 @@ if (document.getElementById('vue-checkboxDemo')) {
             isIndeterminate: false,
             isInvalid: false,
         },
+        methods: {
+            onChange: function (evt) {
+                // Use evt.currentTarget because evt.target is undefined in Firefox
+                this.isChecked = evt.currentTarget.checked;
+            },
+        },
         computed: {
             snippet: function () {
                 var raw = `<hx-checkbox

docs/components/checkboxes/index.html

@@ -35,6 +35,7 @@ <h3>Basic Checkbox</h2>
              :disabled="isDisabled"
              :indeterminate="isIndeterminate"
              :invalid="isInvalid"
+             @change="onChange"
           ></hx-checkbox>
         </div>
         {% code 'html' %}

docs/elements/hx-checkbox/index.html

@@ -21,6 +21,10 @@
         <hx-dt>Permitted Children</hx-dt>
         <hx-dd>none (content will be removed upon element upgrade)</hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd><code>change</code></hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}

src/helix-ui/elements/HXCheckboxElement.js

@@ -7,10 +7,13 @@ const template = document.createElement('template');
 
 template.innerHTML = `
   <style>${shadowStyles}</style>
-  <div id="container">
-    <hx-icon type="checkmark" id="tick"></hx-icon>
-    <hx-icon type="minus" id="minus"></hx-icon>
-  </div>
+  <label id="container">
+    <input type="checkbox" id="nativeControl"/>
+    <div id="customControl">
+      <hx-icon type="checkmark" id="tick"></hx-icon>
+      <hx-icon type="minus" id="minus"></hx-icon>
+    </div>
+  </label>
 `;
 
 export class HXCheckboxElement extends HXElement {
@@ -19,57 +22,44 @@ export class HXCheckboxElement extends HXElement {
     }
 
     static get observedAttributes () {
-        return super.observedAttributes.concat([
+        return [
             'checked',
+            'disabled',
             'indeterminate',
-        ]);
+        ];
     }
 
     constructor () {
         super(tagName, template);
+        this._input = this.shadowRoot.getElementById('nativeControl');
+        this._onChange = this._onChange.bind(this);
     }
 
     connectedCallback () {
-        super.connectedCallback();
-
-        this.$defaultAttribute('role', 'checkbox');
-        if (!this.hasAttribute('tabindex') && !this.disabled) {
-            this.setAttribute('tabindex', 0);
-        }
-
         this.$upgradeProperty('checked');
+        this.$upgradeProperty('disabled');
         this.$upgradeProperty('indeterminate');
-
-        this.addEventListener('keydown', this.$preventScroll);
-        this.addEventListener('keyup', this._onKeyUp);
-        this.addEventListener('click', this._onClick);
+        this._input.addEventListener('change', this._onChange);
     }
 
     disconnectedCallback () {
-        this.removeEventListener('keydown', this.$preventScroll);
-        this.removeEventListener('keyup', this._onKeyUp);
-        this.removeEventListener('click', this._onClick);
+        this._input.removeEventListener('change', this._onChange);
     }
 
     attributeChangedCallback (attr, oldVal, newVal) {
-        super.attributeChangedCallback(attr, oldVal, newVal);
-
         const hasValue = (newVal !== null);
         switch (attr) {
             case 'indeterminate':
-                if (hasValue) {
-                    this.setAttribute('aria-checked', 'mixed');
-                }
+                this._input.indeterminate = hasValue;
                 break;
-
             case 'checked':
-                if (!this.indeterminate) {
-                    this.setAttribute('aria-checked', hasValue);
-                    this.$emit('change', {
-                        checked: this.checked,
-                    });
+                if (this._input.checked !== hasValue) {
+                    this._input.checked = hasValue;
                 }
                 break;
+            case 'disabled':
+                this._input.disabled = hasValue;
+                break;
         }
     }//attributeChangedCallback()
 
@@ -97,26 +87,24 @@ export class HXCheckboxElement extends HXElement {
         return this.hasAttribute('indeterminate');
     }
 
-    _onKeyUp (event) {
-        if (event.altKey) {
-            return;
-        }
-
-        if (event.keyCode === KEYS.Space) {
-            event.preventDefault();
-            this._toggleChecked();
+    set disabled (value) {
+        if (value) {
+            this.setAttribute('disabled', '');
+        } else {
+            this.removeAttribute('disabled');
         }
     }
 
-    _onClick () {
-        this._toggleChecked();
+    get disabled () {
+        return this.hasAttribute('disabled');
     }
 
-    _toggleChecked () {
-        if (this.disabled) {
-            return;
-        }
-        this.indeterminate = false;
-        this.checked = !this.checked;
+    _onChange (evt) {
+        this.checked = evt.target.checked;
+
+        // Chrome doesn't emit 'input' events for checkboxes and native 'change'
+        // events do not bubble out of the ShadowDOM. Emit a custom event to
+        // ensure a 'change' event makes it out of the ShadowDOM.
+        this.$emit('change');
     }
 }//HXCheckboxElement

src/helix-ui/elements/HXElement.js

@@ -85,6 +85,11 @@ export class HXElement extends HTMLElement {
     }//$preventScroll()
 
     $emit (evtName, details) {
+        if (window.ShadyCSS && evtName === 'change') {
+            // Let native 'change' events bubble naturally.
+            return;
+        }
+
         let evt = new CustomEvent(evtName, {
             bubbles: true,
             details: details,

src/helix-ui/elements/_hx-checkbox.less

@@ -2,15 +2,37 @@
 @import "core/hx-icon";
 
 #container {
+  display: flex;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+#customControl {
   align-content: center;
   align-items: center;
+  background-color: @gray-0;
+  border: 1px solid currentColor;
+  border-radius: 2px;
+  color: @gray-500;
   display: flex;
-  font-size: 0.625em; /* ~10px */
+  font-size: 0.625rem; /* ~10px */
   height: 100%;
   justify-content: center;
+  left: 0;
+  position: absolute;
+  top: 0;
+  vertical-align: middle;
   width: 100%;
+  z-index: 10;
+
+  &:hover {
+    background-color: @cyan-50;
+    color: @cyan-500;
+  }
 }
 
+/* icons */
 #minus,
 #tick {
   display: none;
@@ -19,12 +41,89 @@
   width: 1em;
 }
 
-:host {
-  &([checked]:not([indeterminate])) #tick {
-    display: block;
+#nativeControl:checked:not(:indeterminate) ~ #customControl #tick {
+  display: block;
+}
+
+#nativeControl:indeterminate ~ #customControl #minus {
+  display: block;
+}
+
+#nativeControl {
+  /* opacity 0 because Firefox and OS focus styles */
+  opacity: 0;
+  z-index: 0;
+
+  &:focus {
+    border: none;
+    outline: none;
+
+    ~ #customControl {
+      border-color: @cyan-700;
+      box-shadow: @focus-glow;
+    }
+  }
+
+  /* default checked and indeterminate (checked or unchecked) */
+  &:checked, &:indeterminate {
+    ~ #customControl {
+      color: @cyan-900;
+
+      &:hover {
+        background-color: @cyan-50;
+        color: @cyan-500;
+      }
+    }
   }
 
-  &([indeterminate]) #minus {
-    display: block;
+  /* disabled unchecked */
+  &:disabled ~ #customControl {
+    background-color: @gray-100;
+    color: @gray-500;
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: @gray-100;
+      color: @gray-500;
+    }
+  }//[disabled]
+}//input
+
+/* invalid */
+:host([invalid]){
+  #customControl {
+    border-width: 2px;
+    color: @red-900;
+
+    &:hover {
+      background-color: @red-100;
+    }
   }
-}
+
+  #nativeControl:focus ~ #customControl {
+    border-color: @red-900;
+    box-shadow: @focus-glow-invalid;
+  }
+
+  /* below styles needed to override above, custom control styles */
+  /* invalid and checked or indeterminate */
+  #nativeControl:checked, #nativeControl:indeterminate {
+    ~ #customControl {
+      color: @red-900;
+
+      &:hover {
+        background-color: @red-100;
+      }
+    }
+  }
+
+  /* invalid and disabled */
+  #nativeControl:disabled ~ #customControl {
+    border-width: 1px;
+    color: @gray-500;
+
+    &:hover {
+      background-color: @gray-100;
+    }
+  }
+}//[invalid]

src/helix-ui/styles/core/hx-checkbox.less

@@ -1,82 +1,9 @@
 hx-checkbox {
-  background-color: @gray-0;
-  border-color: currentColor;
-  border-radius: 2px;
-  border-style: solid;
-  border-width: 1px;
-  color: @gray-500;
   display: inline-block;
   height: 1rem;
-  vertical-align: middle;
   width: 1rem;
-
+  
   & + * {
     margin-left: 0.5rem;
   }
-
-  /* default unchecked */
-  &:hover {
-    background-color: @cyan-50;
-    color: @cyan-500;
-  }
-
-  /* default checked */
-  &[checked] {
-    color: @cyan-900;
-
-    &:hover {
-      background-color: @cyan-50;
-      color: @cyan-500;
-    }
-  }
-
-  /* default indeterminate (checked or unchecked) */
-  &[indeterminate] {
-    color: @cyan-900;
-
-    &:hover {
-      color: @cyan-500;
-    }
-  }
-
-  /* invalid unchecked */
-  &[invalid] {
-    border-width: 2px;
-    color: @red-900;
-
-    &:hover {
-      background-color: @red-100;
-      color: @red-900;
-    }
-
-    /* invalid checked */
-    // ???
-
-    /* invalid indeterminate (checked or unchecked) */
-    // ???
-  }//[invalid]
-
-  /* disabled unchecked */
-  &[disabled] {
-    background-color: @gray-100;
-    color: @gray-500;
-    cursor: not-allowed;
-
-    & + label {
-      &:extend(.hxSubdued);
-    }
-
-    &:hover {
-      background-color: @gray-100;
-      color: @gray-500;
-    }
-
-    /* disabled checked */
-    // ???
-
-    /* disabled indeterminate (checked or unchecked) */
-    &[indeterminate] {
-      color: @gray-500;
-    }
-  }//[disabled]
 }