Merge pull request #17 from salesforce-ux/button

Add disabled state to neutral button.

Author: ivansfdc

components/SLDSButton/index.js

@@ -60,6 +60,7 @@ class Button extends React.Component {
   render() {
     const props = omit('className', this.props);
     const click = createChainedFunction(this.props.onClick, this.onClick.bind(this));
+    if (this.props.disabled) { props['disabled'] = 'disabled' };
 
     //If the button is only an icon render this:
     if(this.props.variant === 'icon'){
@@ -69,7 +70,7 @@ class Button extends React.Component {
           name={this.props.iconName}
           category='utility'
           size={this.props.iconSize}
-          className={'slds-icon'} />
+          />
           <span className="slds-assistive-text">{this.props.label}</span>
         </button>
       );
@@ -78,13 +79,9 @@ class Button extends React.Component {
     else{
       return (
         <button className={this.getClassName()} {...props} onClick={click}>
-
-        {this.props.iconPosition === 'right' ? this.props.label : null}
-
-        {this.renderIcon()}
-
-        {(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.props.label : null}
-
+          {this.props.iconPosition === 'right' ? this.props.label : null}
+          {this.renderIcon()}
+          {(this.props.iconPosition === 'left' || !this.props.iconPosition) ? this.props.label : null}
         </button>
       );
     }
@@ -94,6 +91,7 @@ class Button extends React.Component {
 Button.propTypes = {
   label: React.PropTypes.string.isRequired,
   variant: React.PropTypes.oneOf(['base', 'neutral', 'brand', 'icon']),
+  disabled: React.PropTypes.bool,
   iconName: React.PropTypes.string,
   iconSize: React.PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
   iconPosition: React.PropTypes.oneOf(['left', 'right']),

demo/code-snippets/SLDSButton.txt

@@ -1,13 +1,18 @@
 
 <SLDSButton
-  label='Test Button'
+  label='Neutral'
   variant='neutral'
+  disabled={false}
   iconName='download'
   iconSize='small'
-  iconPosition='left'
+  iconPosition='right'
   onClick={this.handleButtonClick} />
 
 * Only label is required
-* variant must be neutral, brand, or icon
-* iconSize must be small, medium, or large
-* iconPosition must be left or right
+
+Below are component prop defaults and available options:
+* variant='base' ('neutral', 'brand', 'icon')
+* disabled='false'
+* iconSize='medium' ('x-small', 'medium', 'small', 'large')
+* iconPosition='left'('left', 'right', 'large')
+

demo/pages/HomePage/ButtonSection.jsx

@@ -28,10 +28,12 @@ module.exports = React.createClass( {
     return {};
   },
 
+  handleNeutralClick () {
+    alert('Neutral Button Clicked');
+  },
 
-
-  handleButtonClick () {
-    alert('Test Button Clicked');
+  handleDisabledClick () {
+    alert('Disabled Button Clicked');
   },
 
   render() {
@@ -47,12 +49,20 @@ module.exports = React.createClass( {
               </PrismCode>
               <div className='slds-p-vertical--large'>
                 <SLDSButton
-                  label='Test'
+                  label='Neutral'
                   variant='neutral'
+                  disabled={false}
                   iconName='download'
                   iconSize='small'
                   iconPosition='right'
+                  onClick={this.handleNeutralClick} />
+
+                <SLDSButton
+                  label='Disabled'
+                  variant='neutral'
+                  disabled={true}
                   onClick={this.handleButtonClick} />
+
               </div>
             </div>
 

tests/SLDSButton/button.test.jsx

@@ -34,6 +34,7 @@ describe('SLDSButton: ',  function(){
       let brand = TestUtils.findRenderedDOMComponentWithClass(button, 'slds-button--brand');
       expect(brand).to.not.equal(undefined);
     });
+
   })