fix(button): add disable button behavior (#76)

* bug(button): add disable button behavior

* fix(button): add disabled button behavior css styling for raised and fab

* fix(button) adjusted fix for casting and clarity

* fix(button): fix bad ref in disabledChanged handler

Author: chrsmrtn-

src/button/ux-button-theme.css

@@ -53,7 +53,7 @@ styles.button.raised {
   box-shadow: ${$design.elevation2dp};
 }
 
-styles.button.raised.disabled, styles.button.fab.disabled {
+styles.button.raised:disabled, styles.button.fab:disabled {
   background-color: ${backgroundDisabled || $design.accentLight};
   color: ${foregroundDisabled || $design.accentLightForeground};
 }
@@ -63,11 +63,21 @@ styles.button.raised:active {
   transition-delay: 0s;
 }
 
+styles.button.raised:disabled:active, styles.button.fab:disabled:active {
+  box-shadow: ${$design.elevation2dp};
+  transition-delay: 0s;
+}
+
 styles.button.raised:focus {
   box-shadow: ${$design.elevationFocus};
   transition-delay: 0s;
 }
 
+styles.button.raised:disabled:focus, styles.button.fab:disabled:focus {
+  box-shadow: ${$design.elevation2dp};
+  transition-delay: 0s;
+}
+
 
 styles.button.flat, styles.button.icon {
   background-color: transparent;

src/button/ux-button.ts

@@ -12,7 +12,7 @@ export class UxButton implements Themable {
   @bindable public type = null;
   @bindable public size = null;
   @bindable public effect = null;
-  @bindable public disabled = false;
+  @bindable public disabled: boolean | string = false;
   @bindable public theme = null;
 
   public view: View;
@@ -29,12 +29,35 @@ export class UxButton implements Themable {
     if (this.theme) {
       this.styleEngine.applyTheme(this, this.theme);
     }
+
+    // ensure we cast empty string as true
+    if (typeof this.disabled === 'string' && this.disabled === '') {
+      this.disabled = true;
+    }
+
+    if (this.disabled) {
+      this.button.setAttribute('disabled', '');
+    }
+
   }
 
   public themeChanged(newValue: any) {
     this.styleEngine.applyTheme(this, newValue);
   }
 
+  public disabledChanged(newValue: boolean | string) {
+    // ensure we cast empty string as true
+    if (typeof newValue === 'string' && newValue === '') {
+      newValue = true;
+    }
+
+    if (newValue) {
+      this.button.setAttribute('disabled', '');
+    } else {
+      this.button.removeAttribute('disabled');
+    }
+  }
+
   public onMouseDown(e: MouseEvent) {
     if (this.button.classList.contains('ripple')) {
       if (this.ripple === null) {