Material-ui: IconMenu with FlatButton unknown props warning

[slavab89]

Problem description

A warning when creating an IconMenu and putting a FlatButton as the iconButtonElement property

Steps to reproduce

I've tried to add the following icon menu (For a user account with its name near it)

<IconMenu
    iconButtonElement={
        <FlatButton
            icon={<AccountCircleIcon />} //Thats the svg icon
            label={'User Name'}
        />
    }
/>

Versions

• Material-UI: 0.15.2

[tjunnone]

Same for IconMenu + RaisedButton with Material-UI 0.15.3:

<IconMenu iconButtonElement={<RaisedButton label="Test"/>}/>

The warning trace is:

Warning: Unknown prop iconStyle on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in button (created by EnhancedButton)
in EnhancedButton (created by RaisedButton)
in div (created by Paper)
in Paper (created by RaisedButton)
in RaisedButton (created by IconMenu)
in div (created by IconMenu)
in IconMenu

[carlgunderson]

I'm still seeing the warnings in version 0.15.3 for disabledBackgroundColor and disabledLabelColor properties of the RaisedButton component.

[tpmh31292]

react-unknown-props for disabledBackgroundColor and disabledLabelColor properties of the RaisedButton component.

v15.3.0

[jpellizzari]

The root cause of this issue appears to be the merging of the iconStyle prop with the same prop of the iconElement that is being passed as a prop.

https://github.com/callemall/material-ui/blob/master/src/IconMenu/IconMenu.js#L272

    const iconButton = React.cloneElement(iconButtonElement, {
      onKeyboardFocus: onKeyboardFocus,
      iconStyle: Object.assign({}, iconStyle, iconButtonElement.props.iconStyle), // <--
      onTouchTap: (event) => {
        this.open(Events.isKeyboard(event) ? 'keyboard' : 'iconTap', event);
        if (iconButtonElement.props.onTouchTap) {
          iconButtonElement.props.onTouchTap(event);
        }
      },
      ref: 'iconButton',
    });

The Object.assign() call is passing an object as the iconStyle prop to the iconButton element, which will then pass it all the way down to the <button />.

A proposed fix would be to only try to merge the styles if iconButtonElement has an iconStyle prop defined. Something like this:

if (iconButtonElement.props.iconStyle) {
  iconButton.props.iconStyle = Object.assign({}, iconStyle, iconButtonElement.props.iconStyle);
}

[slavab89]

Sorry to bring this up again but this still seems to happen (for me)
Happens with the above steps to reproduce and the following example

import AccountCircleIcon from 'material-ui/svg-icons/action/account-circle';

<IconMenu
    iconButtonElement={
        <FlatButton
            icon={<AccountCircleIcon />} //Thats the svg icon
            label={'User Name'}
            style={{color: 'white'}}
        />
    }
/>