[FlatButton] Fix Icon color prop issue by tintin1343 · Pull Request #4160 · mui/material-ui

tintin1343 · 2016-05-04T19:34:23Z

PR has tests / docs demo, and is linted.
Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

Resolves: #4144

color prop of icon was not being passed to the icon used within a flat-button

Replaced color: mergedRootStyles.color, with color: icon.props.color, and that fixed it.

    <FlatButton
      backgroundColor="#a4c639"
      hoverColor="#8AA62F"
      icon={<ActionAndroid color={fullWhite} />}
      style={style}
    />

mbrookes · 2016-05-04T19:38:03Z

    if (icon) {
      iconCloned = React.cloneElement(icon, {
-        color: mergedRootStyles.color,
+        color: icon.props.color,


icon.props.color || mergedRootStyles.color ?

Oh yeah..shoot. I missed the case when there is not color prop passed.

Thanks @mbrookes for pointing it out.

oliviertassinari · 2016-05-04T21:57:52Z

@tintin1343 That looks good. Do you want to write a test for this specific case?

tintin1343 · 2016-05-05T14:25:30Z

@oliviertassinari : Yeah sure. Let me give it a try.

tintin1343 · 2016-05-05T16:51:07Z

@oliviertassinari : Done.

oliviertassinari · 2016-05-05T17:03:11Z

+      />
+    );
+    const icon = wrapper.children().at(0);
+    assert.equal(icon.prop('color'), 'white', 'icon should have same color as that of color prop');


strictEqual

oliviertassinari · 2016-05-05T17:07:52Z

+      <FlatButton
+        backgroundColor="#a4c639"
+        hoverColor="#8AA62F"
+        icon={<ActionAndroid color={'white'} />}


I would put 'white' in a variable so the link is explicit in the test.

Alright. Thats a good idea.

oliviertassinari · 2016-05-05T17:31:20Z

@tintin1343 That looks good, nice 👍.

tintin1343 · 2016-05-05T19:30:11Z

Rebase Done.

oliviertassinari · 2016-05-06T20:25:26Z

  });

+  it('colors the icon with the passed color in prop', () => {
+    let color = 'white';


Shouldn't it be const?

You are right. I changed it to const

Closes mui#4144

oliviertassinari · 2016-05-06T21:27:10Z

@tintin1343 Nice!

tintin1343 force-pushed the flatButton-icon branch from 0991d37 to 5248948 Compare May 4, 2016 19:36

mbrookes reviewed May 4, 2016
View reviewed changes

tintin1343 force-pushed the flatButton-icon branch from 5248948 to c9c6d99 Compare May 4, 2016 19:42

oliviertassinari reviewed May 5, 2016
View reviewed changes

tintin1343 force-pushed the flatButton-icon branch from 210a70d to e5eb23e Compare May 5, 2016 17:07

oliviertassinari reviewed May 5, 2016
View reviewed changes

tintin1343 force-pushed the flatButton-icon branch from e5eb23e to a3490e9 Compare May 5, 2016 17:18

oliviertassinari added this to the 0.15.1 Release milestone May 5, 2016

oliviertassinari added the PR: Review Accepted label May 5, 2016

tintin1343 force-pushed the flatButton-icon branch from a3490e9 to cc830bf Compare May 5, 2016 19:30

oliviertassinari reviewed May 6, 2016
View reviewed changes

[FlatButton] Fix Icon color prop issue

76fb046

Closes mui#4144

tintin1343 force-pushed the flatButton-icon branch from cc830bf to 76fb046 Compare May 6, 2016 20:35

mbrookes merged commit 8d68fb9 into mui:master May 6, 2016

FaideWW mentioned this pull request Jun 20, 2016

FontIcon inside FlatButton does not obey the color property #4516

Closed

zannager added component: Icon The React component. scope: button Changes related to the button. labels Mar 14, 2023

Uh oh!

Conversation

tintin1343 commented May 4, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari commented May 4, 2016

Uh oh!

tintin1343 commented May 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tintin1343 commented May 5, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari commented May 5, 2016

Uh oh!

tintin1343 commented May 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari commented May 6, 2016

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tintin1343 commented May 5, 2016 •

edited

Loading

tintin1343 commented May 5, 2016 •

edited

Loading