Small changes & fixes

src/scripts/Button.js

@@ -16,16 +16,31 @@ export default class Button extends Component {
   }
 
   renderIcon(iconSize, inv) {
-    const { icon, iconAlign, type } = this.props;
+    const { icon, iconAlign, type, iconStyle } = this.props;
     const inverse = inv || /\-?inverse$/.test(type);
-    return <ButtonIcon icon={ icon } align={ iconAlign } size={ iconSize } inverse={ inverse } />;
+    return (
+      <ButtonIcon
+        icon={ icon }
+        align={ iconAlign }
+        size={ iconSize }
+        inverse={ inverse }
+        iconStyle={ iconStyle }
+      />
+    );
   }
 
   renderIconMore() {
-    const { iconMore, icon, iconAlign, label, children } = this.props;
+    const { iconMore, icon, iconAlign, iconStyle, label, children } = this.props;
     const adjoining = icon && (iconAlign === 'right' || !(label || children));
     const iconMoreSize = this.props.iconMoreSize || adjoining ? 'x-small' : 'small';
-    return <ButtonIcon icon={ iconMore } align='right' size={ iconMoreSize } />;
+    return (
+      <ButtonIcon
+        icon={ iconMore }
+        align='right'
+        size={ iconMoreSize }
+        iconStyle={ iconStyle }
+      />
+    );
   }
 
   render() {
@@ -41,14 +56,11 @@ export default class Button extends Component {
       typeClassName,
       {
         'slds-is-selected': selected,
-        [`slds-button--${size}`]: size && !/^icon-/.test(type),
-        [`slds-button--icon-${size}`]: /^(x-small|small)$/.test(size) && /^icon-/.test(type),
+        [`slds-button--${size}`]: size && !/^icon/.test(type),
+        [`slds-button--icon-${size}`]: /^(x-small|small)$/.test(size) && /^icon/.test(type),
       }
     );
 
-    delete props.component;
-    delete props.items;
-
     return (
       <button
         ref={(node) => {
@@ -108,19 +120,29 @@ Button.propTypes = {
   children: PropTypes.node,
   onClick: PropTypes.func,
   buttonRef: PropTypes.func,
+  iconStyle: PropTypes.shape(),
 };
 
 
-export const ButtonIcon = ({ icon, align, size, inverse, className, ...props }) => {
+export const ButtonIcon = ({ icon, align, size, inverse, className, iconStyle, ...props }) => {
   const alignClassName = ICON_ALIGNS.indexOf(align) >= 0 ? `slds-button__icon--${align}` : null;
   const sizeClassName = ICON_SIZES.indexOf(size) >= 0 ? `slds-button__icon--${size}` : null;
-  const inverseClassName = inverse ? 'slds-button__icon--inverse' : null;
+  const inverseClassName = inverse ? 'slds-button--icon-inverse' : null;
   const iconClassNames = classnames('slds-button__icon', alignClassName, sizeClassName,
     inverseClassName, className);
-  return <Icon className={ iconClassNames } icon={ icon } textColor={ null } { ...props } />;
+  return (
+    <Icon
+      className={ iconClassNames }
+      icon={ icon }
+      textColor={ null }
+      style={ iconStyle }
+      { ...props }
+    />
+  );
 };
 
 ButtonIcon.propTypes = {
+  iconStyle: PropTypes.shape(),
   className: PropTypes.string,
   icon: PropTypes.string,
   align: PropTypes.oneOf(['left', 'right']),

src/scripts/ButtonGroup.js

@@ -8,6 +8,7 @@ export default class ButtonGroup extends Component {
     this.renderButton = this.renderButton.bind(this);
   }
   renderButton(button, index) {
+    if (!React.isValidElement(button)) return null;
     const cnt = React.Children.count(this.props.children);
     if (button.type && (button.type === DropdownButton || button.type.isGroupable)) {
       return React.cloneElement(button, {

src/scripts/Icon.js

@@ -1,7 +1,7 @@
 import React, { PropTypes, Component } from 'react';
 import classnames from 'classnames';
 import svg4everybody from 'svg4everybody';
-import { getAssetRoot } from './util';
+import { getAssetRoot, isIE } from './util';
 
 svg4everybody();
 
@@ -89,6 +89,7 @@ export default class Icon extends Component {
   constructor(props) {
     super(props);
     this.state = {};
+    this.k = 0;
   }
 
   componentDidMount() {
@@ -99,6 +100,15 @@ export default class Icon extends Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    // Fix Icon re-render in IE
+    if (isIE()) {
+      if (this.props.icon !== nextProps.icon) {
+        this.k += 1;
+      }
+    }
+  }
+
   componentDidUpdate() {
     this.checkIconColor();
   }
@@ -142,7 +152,7 @@ export default class Icon extends Component {
     const iconColor = this.getIconColor(fillColor, category, icon);
     const iconClassNames = classnames(
       {
-        'slds-icon': !/slds\-button__icon/.test(className),
+        'slds-icon': !/slds-button__icon/.test(className),
         [`slds-icon--${size}`]: /^(x-small|small|medium|large)$/.test(size),
         [`slds-icon-text-${textColor}`]: /^(default|warning|error)$/.test(textColor) &&
         !iconColor,
@@ -153,9 +163,11 @@ export default class Icon extends Component {
       className
     );
     /* eslint-disable max-len */
-    const useHtml = `<use xlink:href="${getAssetRoot()}/icons/${category}-sprite/svg/symbols.svg#${icon}"></use>`;
+    // Fix Edge pointer-events
+    const useHtml = `<use style="pointer-events: none" xlink:href="${getAssetRoot()}/icons/${category}-sprite/svg/symbols.svg#${icon}"></use>`;
     return (
       <svg
+        key={`icon-${this.k}`}
         className={ iconClassNames }
         aria-hidden
         dangerouslySetInnerHTML={ { __html: useHtml } }
@@ -166,15 +178,21 @@ export default class Icon extends Component {
     );
   }
 
+  renderAssistiveText(assistiveText) {
+    if (!assistiveText) return null;
+
+    return <span className='slds-assistive-text'>{assistiveText}</span>;
+  }
+
   render() {
     const { container, ...props } = this.props;
-    let { category, icon } = props;
+    let { category, icon, ...pprops } = props;
 
     if (icon.indexOf(':') > 0) {
       [category, icon] = icon.split(':');
     }
     if (container) {
-      const { containerClassName, fillColor, ...pprops } = props;
+      const { containerClassName, containerStyle, fillColor, assistiveText, ...ppprops } = pprops;
       const iconColor = this.getIconColor(fillColor, category, icon);
       const ccontainerClassName = classnames(
         containerClassName,
@@ -183,8 +201,14 @@ export default class Icon extends Component {
         iconColor ? `slds-icon-${iconColor}` : null
       );
       return (
-        <span className={ ccontainerClassName } ref={ node => (this.iconContainer = node) }>
-          { this.renderSVG({ category, icon, fillColor: iconColor, container, ...pprops }) }
+        <span
+          className={ ccontainerClassName }
+          style={ containerStyle }
+          ref={ node => (this.iconContainer = node) }
+          title={assistiveText}
+        >
+          { this.renderSVG({ category, icon, fillColor: iconColor, container, ...ppprops }) }
+          { this.renderAssistiveText(assistiveText) }
         </span>
       );
     }
@@ -207,6 +231,8 @@ Icon.propTypes = {
   textColor: PropTypes.oneOf(['default', 'warning', 'error']),
   tabIndex: PropTypes.number,
   fillColor: PropTypes.string,
+  containerStyle: PropTypes.shape(),
+  assistiveText: PropTypes.string,
 };
 
 Icon.ICONS = {

src/scripts/util.js

@@ -63,5 +63,8 @@ export function cleanProps(props, propTypes) {
   return newProps;
 }
 
+export function isIE() {
+  return !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/));
+}
 
 export default { setAssetRoot, getAssetRoot, registerStyle, isElInChildren, offset, cleanProps };

stories/IconStories.js

@@ -127,4 +127,7 @@ storiesOf('Icon', module)
       }
     </ul>
   ))
+  .addWithInfo('With assistive text', 'Icon with assistive text', () => (
+    <Icon icon='standard:account' container assistiveText='Description of icon' onClick={ action('assistText:click') } />
+  ))
 ;

test/button-spec.js

@@ -72,6 +72,7 @@ describe('Button', () => {
       icon: props.icon,
       align: props.iconAlign,
       size: props.iconSize,
+      iconStyle: undefined,
     };
 
     const label = 'Label';
@@ -85,7 +86,7 @@ describe('Button', () => {
     const iconMore = 'down';
     const wrapper = shallow(<Button iconMore={ iconMore } />);
     expect(wrapper.contains(
-      <ButtonIcon icon={ iconMore } align='right' size='small' />
+      <ButtonIcon icon={ iconMore } align='right' size='small' iconStyle={undefined} />
     )).toBe(true);
   });
 
@@ -121,7 +122,7 @@ describe('ButtonIcon', () => {
 
   it('should render button icon inversed', () => {
     const wrapper = shallow(<ButtonIcon inverse />);
-    expect(wrapper.hasClass('slds-button__icon--inverse')).toBe(true);
+    expect(wrapper.hasClass('slds-button--icon-inverse')).toBe(true);
   });
 
   it('should call Icon component with props', () => {
@@ -135,6 +136,7 @@ describe('ButtonIcon', () => {
       test: 'test',
       textColor: null,
       className: 'slds-button__icon',
+      style: undefined,
     };
 
     const wrapper = shallow(<ButtonIcon { ...props } />);