[Tab] children are not accepted, even though docs state "Any other properties supplied will be spread to the root element"

[jedwards1211]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The docs for Tab say:

Any other properties supplied will be spread to the root element (ButtonBase).

Therefore if I render

<Tab>
  <Sometimes />
  <You />
  <Need />
  <More />
  <Than />
  <One />
  <Icon />
</Tab>

all of those children get spread to the ButtonBase.

Current Behavior

The children are not spread to the ButtonBase or rendered in any way. The docs lie...

Steps to Reproduce (for bugs)

https://codesandbox.io/s/wo977lzr98

Context

I need to put both a progress spinner and a delete button on a tab, but Tab only provides label and icon properties, which is a bit annoying, because this looks gross:

<Tab
  label={
    <React.Fragment>
      The label
      {working && <Spinner />}
      <DeleteButton onClick={...} />
    </React.Fragment>
  }
/>

Your Environment

Tech	Version
Material-UI	v1.2.1
React	v16.4.0

[oliviertassinari]

The children are not spread to the ButtonBase or rendered in any way. The docs lie...

I guess we should document that there is no children property, and warn if someone tries to us it?

for cases when the desired content doesn't fit neatly into the label/icon dichotomy

I think that it can be better handled with the component property.

[jedwards1211]

I think that it can be better handled with the component property.

I don't see a component property for Tab in the docs, nor is there evidence for one in the source code

It's certainly possible to pass the children through, as I do in my PR.

[oliviertassinari]

@jedwards1211 The component property is inherited by the ButtonBase.

It's certainly possible to pass the children through, as I do in my PR.

I have two issues with that.

1. The children are added to an opinionated position. Better let user control the position:

<Tab component={props => <button {...props}><Prefix />{props.children}<Sufix /></button>} />

2. The problem isn't scoped to the tab component. You can find it on the Chip and possibly more components.

[jedwards1211]

Ah right, I forgot that ButtonBase takes care of that. Okay, that works for me, thanks!

[oliviertassinari]

Wait, shouldn't we warn or document the missing children support?

[jedwards1211]

Ah, yes that's true