Update button group and example to SLDS 0.11.0

Author: donnieberg

components/SLDSButton/SLDSButtonStateful/index.jsx

@@ -80,7 +80,7 @@ class SLDSButtonStateful extends React.Component {
     else if(this.props.type === "icon") {
       return (
         <button className={this.getClassName()} onClick={this.handleClick.bind(this)}>
-          <ButtonIcon disabled={this.props.disabled} name="like" size="large" className="slds-button__icon--stateful"  />
+          <ButtonIcon disabled={this.props.disabled} name={this.props.iconName} size={this.props.iconSize} assistiveText={this.props.assistiveText} className="slds-button__icon--stateful"  />
         </button>
       )
     }

components/SLDSIcons.js

@@ -17,15 +17,15 @@ import SLDSUtilityIcon from './SLDSUtilityIcon';
 export const ButtonIcon = React.createClass({
 
     getDefaultProps() {
-
         return {
             category: 'utility', // Utility Icon Reference: https://www.lightningdesignsystem.com/resources/icons#utility
         };
     },
 
     render() {
-
         let className  = 'slds-button__icon';
+        let label = null;
+
         if (this.props.position) {
           //If no position prop given, default to left
           className += ' slds-button__icon--' + this.props.position;
@@ -36,13 +36,15 @@ export const ButtonIcon = React.createClass({
         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} />;
+        if (this.props.assistiveText) {
+          label = <span className="slds-assistive-text">{this.props.assistiveText}</span>;
         }
-        return <svg aria-hidden='true' className={className} dangerouslySetInnerHTML={{__html: useTag }} />;
-*/
-        return <SLDSUtilityIcon name={this.props.name} category={this.props.category} aria-hidden='true' className={className} />;
+        return (
+          <span>
+          {label}
+          <SLDSUtilityIcon name={this.props.name} category={this.props.category} aria-hidden='true' className={className} />
+          </span>
+        )
 
 
     }

demo/pages/HomePage/ButtonGroupSection.jsx

@@ -14,6 +14,7 @@ import React from 'react';
 import SLDSButtonGroup from '../../../components/SLDSButtonGroup';
 import SLDSDropdownBase from '../../../components/SLDSDropdownBase';
 import SLDSButton from '../../../components/SLDSButton';
+import SLDSButtonStateful from '../../../components/SLDSButton/SLDSButtonStateful';
 import {ButtonIcon, Icon} from "./../../../components/SLDSIcons";
 import {default as PrismCode} from "react-prism/lib/PrismCode";
 
@@ -80,8 +81,8 @@ module.exports = React.createClass( {
 
               <div className='slds-p-vertical--small'>
                 <SLDSButtonGroup>
-                  <SLDSButton label='Chart' variant='icon' iconName='chart' iconVariant='border'/>
-                  <SLDSButton label='Filter' variant='icon' iconName='filter' iconVariant='border'/>
+                  <SLDSButtonStateful type="icon" assistiveText="View Reports" label='Chart' variant='icon' iconName='chart' />
+                  <SLDSButtonStateful type="icon" assistiveText="Filter Data" label='Filter' variant='icon' iconName='filter' />
                   <SLDSButton label='Sort' variant='icon' iconName='sort' iconVariant='more'/>
                 </SLDSButtonGroup>
               </div>