IconButton FontIcon child hover styling

docs/src/app/components/pages/components/icons.jsx

@@ -69,22 +69,51 @@ class FontIconPage extends React.Component {
       </p>
     );
 
-    var componentInfo = [];
+    var componentInfo = [
+      {
+        name: 'Properties',
+        infoArray: [
+          {
+            name: 'className',
+            type: 'string',
+            header: 'optional',
+            desc: 'If you are using a stylesheet for your icons, enter the ' +
+                  'class name for the icon to be used here.'
+          },
+          {
+            name: 'style',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline-styles of the icon\'s root element.'
+          },
+          {
+            name: 'hoverStyle',
+            type: 'object',
+            header: 'optional',
+            desc: 'Override the inline hover styles of the icons\'s root element.'
+          }
+        ]
+      },
+      {
+        name: 'Properties',
+        infoArray: [],
+      }
+    ];
 
     return (
       <div>
         <ComponentDoc
           name="Font Icons"
           code={fontIconCode}
           desc={fontIconDesc}
-          componentInfo={componentInfo}>
+          componentInfo={componentInfo.slice(0,1)}>
             <FontIcon className="muidocs-icon-action-home"/>
         </ComponentDoc>
         <ComponentDoc
           name="SVG Icons"
           code={svgIconCode}
           desc={svgIconDesc}
-          componentInfo={componentInfo}>
+          componentInfo={componentInfo.slice(1,2)}>
             <ActionHome/>
         </ComponentDoc>
       </div>

src/font-icon.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var StylePropable = require('./mixins/style-propable');
 var Spacing = require('./styles/spacing');
+var Transitions = require('./styles/transitions');
 
 var FontIcon = React.createClass({
 
@@ -10,9 +11,14 @@ var FontIcon = React.createClass({
     muiTheme: React.PropTypes.object
   },
 
+  propTypes: {
+    className: React.PropTypes.string,
+    hoverStyle: React.PropTypes.object
+  },
+
   getInitialState: function() {
     return {
-      isHovered: false,
+      hovered: false,
     };
   },
 
@@ -25,7 +31,8 @@ var FontIcon = React.createClass({
       position: 'relative',
       fontSize: Spacing.iconSize + 'px',
       display: 'inline-block',
-      userSelect: 'none'  
+      userSelect: 'none',
+      transition: Transitions.easeOut()
     };
     if (!styles.color && !this.props.className) {
       styles.color = this.getTheme().textColor;
@@ -35,16 +42,34 @@ var FontIcon = React.createClass({
 
   render: function() {
     var {
+      onMouseOut,
+      onMouseOver,
       style,
       ...other
     } = this.props;
 
     return (
-      <span {...other} 
+      <span
+        {...other}
+        onMouseOut={this._handleMouseOut}
+        onMouseOver={this._handleMouseOver}
         style={this.mergeAndPrefix(
           this.getStyles(),
-          this.props.style)} />
+          this.props.style,
+          this.state.hovered && this.props.hoverStyle)} />
     );
+  },
+
+  _handleMouseOut: function(e) {
+    this.setState({hovered: false});
+
+    if (this.props.onMouseOut) this.props.onMouseOut(e);
+  },
+
+  _handleMouseOver: function(e) {
+    this.setState({hovered: true});
+
+    if (this.props.onMouseOver) this.props.onMouseOver(e);
   }
 });
 

src/icon-button.jsx

@@ -117,13 +117,16 @@ var IconButton = React.createClass({
     }
 
     if (this.props.iconClassName) {
+      var { iconHoverStyle, ...iconStyle } = this.props.iconStyle;
+
       fonticon = (
         <FontIcon 
-          className={this.props.iconClassName} 
+          className={this.props.iconClassName}
+          hoverStyle={this.mergeAndPrefix(iconHoverStyle)}
           style={this.mergeAndPrefix(
             styles.icon, 
             this.props.disabled && styles.iconWhenDisabled,
-            this.props.iconStyle
+            iconStyle
           )}/>
       );
     }