[icons] Added color and hoverColor props.

mui · Jun 15, 2015 · 5ab2e6e · cgestes · Jun 15, 2015 · hai-cea
1 parent 2619ea0
commit 5ab2e6e
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 45 deletions.
diff --git a/docs/src/app/components/pages/components/icons.jsx b/docs/src/app/components/pages/components/icons.jsx
@@ -1,5 +1,6 @@
 var React = require('react');
 var mui = require('mui');
+var Colors = mui.Styles.Colors;
 var ComponentDoc = require('../../component-doc.jsx');
 var ActionHome = require('../../svg-icons/action-home.jsx');
 
@@ -22,8 +23,21 @@ class FontIconPage extends React.Component {
   }
 
 	render() {
-    var fontIconCode =
-      '<FontIcon className="muidocs-icon-action-home"/>';
+    var fontIconCode = `
+<FontIcon className="muidocs-icon-action-home" />
+<FontIcon className="muidocs-icon-action-home" color={Colors.red500} />
+<FontIcon className="muidocs-icon-action-home" color={Colors.yellow500} />
+<FontIcon className="muidocs-icon-action-home" color={Colors.blue500} />
+
+<FontIcon className="muidocs-icon-action-home"
+  hoverColor={Colors.greenA200} />
+<FontIcon className="muidocs-icon-action-home" color={Colors.red500}
+  hoverColor={Colors.greenA200} />
+<FontIcon className="muidocs-icon-action-home" color={Colors.yellow500}
+  hoverColor={Colors.greenA200} />
+<FontIcon className="muidocs-icon-action-home" color={Colors.blue500}
+  hoverColor={Colors.greenA200} />
+    `;
 
     var svgIconCode =
       '/** action-home.jsx */\n' +
@@ -74,47 +88,76 @@ class FontIconPage extends React.Component {
         name: 'Properties',
         infoArray: [
           {
-            name: 'className',
+            name: 'color',
             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.'
+            desc: 'This is the font color of the font icon. If not specified, ' +
+              'this component will default to muiTheme.palette.textColor.'
           },
           {
             name: 'hoverColor',
             type: 'string',
             header: 'optional',
-            desc: 'Override the inline hover color of the icons\'s root element.'
+            desc: 'This is the icon color when the mouse hovers over the icon.'
           }
         ]
       },
       {
         name: 'Properties',
-        infoArray: [],
+        infoArray: [
+          {
+            name: 'color',
+            type: 'string',
+            header: 'optional',
+            desc: 'This is the fill color of the svg icon. If not specified, ' +
+              'this component will default to muiTheme.palette.textColor.'
+          },
+          ,
+          {
+            name: 'hoverColor',
+            type: 'string',
+            header: 'optional',
+            desc: 'This is the icon color when the mouse hovers over the icon.'
+          }
+        ],
       }
     ];
 
+    var iconStyles = {
+      marginRight: 24
+    };
+
     return (
       <div>
         <ComponentDoc
           name="Font Icons"
           code={fontIconCode}
           desc={fontIconDesc}
           componentInfo={componentInfo.slice(0,1)}>
-            <FontIcon className="muidocs-icon-action-home"/>
+          <FontIcon className="muidocs-icon-action-home" style={iconStyles} />
+          <FontIcon className="muidocs-icon-action-home" style={iconStyles} color={Colors.red500} />
+          <FontIcon className="muidocs-icon-action-home" style={iconStyles} color={Colors.yellow500} />
+          <FontIcon className="muidocs-icon-action-home" style={iconStyles} color={Colors.blue500} />
+          <br/><br/>
+          <FontIcon className="muidocs-icon-action-home" style={iconStyles} hoverColor={Colors.greenA200} />
+          <FontIcon className="muidocs-icon-action-home" style={iconStyles} color={Colors.red500} hoverColor={Colors.greenA200} />
+          <FontIcon className="muidocs-icon-action-home" style={iconStyles} color={Colors.yellow500} hoverColor={Colors.greenA200} />
+          <FontIcon className="muidocs-icon-action-home" style={iconStyles} color={Colors.blue500} hoverColor={Colors.greenA200} />
         </ComponentDoc>
         <ComponentDoc
           name="SVG Icons"
           code={svgIconCode}
           desc={svgIconDesc}
           componentInfo={componentInfo.slice(1,2)}>
-            <ActionHome/>
+          <ActionHome style={iconStyles} />
+          <ActionHome style={iconStyles} color={Colors.red500} />
+          <ActionHome style={iconStyles} color={Colors.yellow500} />
+          <ActionHome style={iconStyles} color={Colors.blue500} />
+          <br/><br/>
+          <ActionHome style={iconStyles} hoverColor={Colors.greenA200} />
+          <ActionHome style={iconStyles} color={Colors.red500} hoverColor={Colors.greenA200} />
+          <ActionHome style={iconStyles} color={Colors.yellow500} hoverColor={Colors.greenA200} />
+          <ActionHome style={iconStyles} color={Colors.blue500} hoverColor={Colors.greenA200} />
         </ComponentDoc>
       </div>
 		);

diff --git a/src/font-icon.jsx b/src/font-icon.jsx
@@ -12,51 +12,46 @@ var FontIcon = React.createClass({
   },
 
   propTypes: {
-    className: React.PropTypes.string,
-    hoverColor: React.PropTypes.string
+    color: React.PropTypes.string,
+    hoverColor: React.PropTypes.string,
+    onMouseOut: React.PropTypes.func,
+    onMouseOver: React.PropTypes.func
   },
 
   getInitialState: function() {
     return {
-      hovered: false,
+      hovered: false
     };
   },
 
-  getStyles: function() {
-    var theme = this.context.muiTheme.palette;
-    var styles = {
-      position: 'relative',
-      fontSize: Spacing.iconSize + 'px',
-      display: 'inline-block',
-      userSelect: 'none',
-      transition: Transitions.easeOut()
-    };
-
-    if (!styles.color && !this.props.className) {
-      styles.color = theme.textColor;
-    }
-
-    return styles;
-  },
-
   render: function() {
     var {
+      color,
+      hoverColor,
       onMouseOut,
       onMouseOver,
       style,
       ...other
     } = this.props;
-    var hoverStyle = this.props.hoverColor ? {color: this.props.hoverColor} : {};
+
+    var offColor = color ? color: this.context.muiTheme.palette.textColor;
+    var onColor = hoverColor ? hoverColor : offColor;
+
+    var mergedStyles = this.mergeAndPrefix({
+      position: 'relative',
+      fontSize: Spacing.iconSize,
+      display: 'inline-block',
+      userSelect: 'none',
+      transition: Transitions.easeOut(),
+      color: this.state.hovered ? onColor : offColor
+    }, style);
 
     return (
       <span
         {...other}
         onMouseOut={this._handleMouseOut}
         onMouseOver={this._handleMouseOver}
-        style={this.mergeAndPrefix(
-          this.getStyles(),
-          this.props.style,
-          this.state.hovered && hoverStyle)} />
+        style={mergedStyles} />
     );
   },
 

diff --git a/src/svg-icon.jsx b/src/svg-icon.jsx
@@ -1,5 +1,6 @@
 var React = require('react/addons');
 var StylePropable = require('./mixins/style-propable');
+var Transitions = require('./styles/transitions');
 
 var SvgIcon = React.createClass({
 
@@ -10,9 +11,19 @@ var SvgIcon = React.createClass({
   },
 
   propTypes: {
+    color: React.PropTypes.string,
+    hoverColor: React.PropTypes.string,
+    onMouseOut: React.PropTypes.func,
+    onMouseOver: React.PropTypes.func,
     viewBox: React.PropTypes.string
   },
 
+  getInitialState: function() {
+    return {
+      hovered: false
+    };
+  },
+
   getDefaultProps: function() {
     return {
       viewBox: '0 0 24 24'
@@ -22,27 +33,49 @@ var SvgIcon = React.createClass({
   render: function() {
 
     var {
+      color,
+      hoverColor,
       viewBox,
       style,
       ...other
     } = this.props;
 
+    var offColor = color ? color: this.context.muiTheme.palette.textColor;
+    var onColor = hoverColor ? hoverColor : offColor;
+
     var mergedStyles = this.mergeAndPrefix({
       display: 'inline-block',
-      height: '24px',
-      width: '24px',
+      height: 24,
+      width: 24,
       userSelect: 'none',
-      fill: this.context.muiTheme.palette.textColor
+      transition: Transitions.easeOut(),
+      fill: this.state.hovered ? onColor : offColor
     }, style);
 
     return (
       <svg
         {...other}
-        viewBox={viewBox}
-        style={mergedStyles}>
+        onMouseOut={this._handleMouseOut}
+        onMouseOver={this._handleMouseOver}
+        style={mergedStyles}
+        viewBox={viewBox}>
         {this.props.children}
       </svg>
     );
+  },
+
+  _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);
+    }
   }
 });