Update Button component to accept disabled, destructive, and inverse variants/states

Author: donnieberg

components/SLDSButton/index.js

@@ -39,22 +39,26 @@ class Button extends React.Component {
   }
 
   getClassName() {
-    let isStateful = this.props.stateful && this.state.active ? true : false;
+    let isSelected = this.props.stateful && this.state.active ? true : false;
+    let notSelected = this.props.stateful && !this.state.active ? true : false;
     return classNames(this.props.className, 'slds-button', {
       [`slds-button--${this.props.variant}`]: this.props.variant,
-      ['slds-is-selected']: isStateful,
+      ['slds-not-selected']: notSelected,
+      ['slds-is-selected']: isSelected,
     });
   }
 
   renderIcon(){
     if(this.props.iconName){
       return (
         <ButtonIcon
+          variant={this.props.variant}
+          disabled={this.props.disabled}
+          inverse={this.props.inverse}
+          stateful={this.props.stateful}
           name={this.props.iconName}
           size={this.props.iconSize}
-          inverse={this.props.inverse}
           position={this.props.iconPosition}
-          variant={this.props.variant}
           />
       );
     }
@@ -79,8 +83,10 @@ class Button extends React.Component {
 
 Button.propTypes = {
   label: React.PropTypes.string.isRequired,
-  variant: React.PropTypes.oneOf(['base', 'neutral', 'brand', 'icon']),
+  variant: React.PropTypes.oneOf(['base', 'neutral', 'brand', 'destructive', 'icon']),
   disabled: React.PropTypes.bool,
+  inverse: React.PropTypes.bool,
+  stateful: React.PropTypes.bool,
   iconName: React.PropTypes.string,
   iconSize: React.PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
   iconPosition: React.PropTypes.oneOf(['left', 'right']),

components/SLDSIcons.js

@@ -33,16 +33,19 @@ export const ButtonIcon = React.createClass({
           this.props.position ? className += ' slds-button__icon--' + this.props.position : className += ' slds-button__icon--left';
         }
         if (this.props.size) {
-             className += ' slds-button__icon--' + this.props.size;
+          className += ' slds-button__icon--' + this.props.size;
         }
         if (this.props.inverse) {
-             className += ' slds-button__icon--inverse';
+          className += ' slds-button__icon--inverse';
         }
         if (this.props.stateful) {
           className += ' slds-button__icon--stateful';
         }
         if (this.props.hint) {
-             className += ' slds-button__icon--hint';
+          className += ' slds-button__icon--hint';
+        }
+        if (this.props.destructive) {
+          className += ' slds-button__icon--destructive';
         }
         if(this.props.category === 'utility'){
             return <SLDSUtilityIcon name={this.props.name} aria-hidden='true' className={className} />;

demo/code-snippets/SLDSButton.txt

@@ -1,9 +1,10 @@
 
 Below are component prop defaults and available options:
 * label='' *required
-* variant='base' ['neutral', 'brand', 'icon']
+* variant='base' ['neutral', 'brand', 'destructive', 'icon']
 * disabled={false}
 * inverse={false}
+* stateful={false}
 * iconName='' //see https://www.lightningdesignsystem.com/resources/icons#utility
 * iconSize='medium' ['x-small', 'medium', 'small', 'large']
 * iconPosition='left' ['left', 'right', 'large']

demo/pages/HomePage/ButtonSection.jsx

@@ -61,6 +61,14 @@ module.exports = React.createClass( {
                   variant='neutral'
                   onClick={this.handleNeutralClick} />
 
+                <SLDSButton
+                  label='Neutral Icon'
+                  variant='neutral'
+                  iconName='download'
+                  iconSize='small'
+                  iconPosition='right'
+                  onClick={this.handleNeutralClick} />
+
                 <SLDSButton
                   label='Disabled'
                   variant='neutral'
@@ -70,10 +78,6 @@ module.exports = React.createClass( {
                 <SLDSButton
                   label='Brand'
                   variant='brand'
-                  iconName='download'
-                  iconSize='small'
-                  iconPosition='right'
-                  inverse={true}
                   onClick={this.handleBrandClick} />
 
                 <SLDSButton