[FlatButton] Fix Icon color prop issue

Closes mui#4144
tintin1343 · May 6, 2016 · 76fb046 · 76fb046
1 parent 014476d
commit 76fb046
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/FlatButton/FlatButton.js b/src/FlatButton/FlatButton.js
@@ -221,7 +221,7 @@ class FlatButton extends Component {
 
     if (icon) {
       iconCloned = React.cloneElement(icon, {
-        color: mergedRootStyles.color,
+        color: icon.props.color || mergedRootStyles.color,
         style: {
           verticalAlign: 'middle',
           marginLeft: label && labelPosition !== 'before' ? 12 : 0,

diff --git a/src/FlatButton/FlatButton.spec.js b/src/FlatButton/FlatButton.spec.js
@@ -4,6 +4,7 @@ import {shallow} from 'enzyme';
 import {assert} from 'chai';
 import FlatButton from './FlatButton';
 import getMuiTheme from '../styles/getMuiTheme';
+import ActionAndroid from '../svg-icons/action/android';
 
 describe('<FlatButton />', () => {
   const muiTheme = getMuiTheme();
@@ -92,6 +93,19 @@ describe('<FlatButton />', () => {
     assert.ok(icon.is({color: flatButtonTheme.primaryTextColor}));
   });
 
+  it('colors the icon with the passed color in prop', () => {
+    const color = 'white';
+    const wrapper = shallowWithContext(
+      <FlatButton
+        backgroundColor="#a4c639"
+        hoverColor="#8AA62F"
+        icon={<ActionAndroid color={color} />}
+      />
+    );
+    const icon = wrapper.find('ActionAndroid');
+    assert.strictEqual(icon.prop('color'), color, 'icon should have same color as that of color prop');
+  });
+
   it('colors the button the secondary theme color', () => {
     const wrapper = shallowWithContext(
       <FlatButton secondary={true} icon={<span className="test-icon" />}>Button</FlatButton>