Permalink
Browse files

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
  • Loading branch information...
chrsmrtn- authored and ZHollingshead committed Jun 9, 2017
1 parent 769b882 commit a16f47ffe38322c2dc3b479f24c4ea6e8d755926
Showing with 35 additions and 2 deletions.
  1. +11 −1 src/button/ux-button-theme.css
  2. +24 −1 src/button/ux-button.ts
@@ -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;
View
@@ -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) {

0 comments on commit a16f47f

Please sign in to comment.