[Tabs] Remove unnecessary wrapper from Tab

[siriwatknp]

BREAKING CHANGE

• [Tabs] Remove unnecessary wrapper from Tab ([Tabs] Remove unnecessary wrapper from Tab #26926) @siriwatknp

  span element that wraps children has been removed. wrapper classKey is also removed. More details about this change.

  <button class="MuiTab-root">
  - <span class="MuiTab-wrapper">
      {icon}
      {label}
  - </span>
  </button>

---

WHY the wrapper is removed
button > span > children exists as a workaround for flex container bug on button BUT not anymore, so this PR remove the span.

• ✅ Chrome 83+ (latest 90)
• ✅ Safari 11+ (latest 14)
• ✅ Edge
• ✅ Firefox 63 (latest 89)

https://github.com/philipwalton/flexbugs#flexbug-9

---

• I have followed (at least) the PR section of the contributing guide.

Preview: https://deploy-preview-26926--material-ui.netlify.app/components/tabs/#icon-tabs

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 2602126

[siriwatknp]

this can be removed because TabWrapper also has lineHeight

[oliviertassinari]

The passive voice doesn't feel right. Most of the items in this guide are in the active voice.

Suggested change

	- Tab `minWidth` changed from `72px` => `90px` (without media-query) according to [material-design spec](https://material.io/components/tabs#specs)
	- Tab `maxWidth` changed from `264px` => `360px` according to [material-design spec](https://material.io/components/tabs#specs)
	- `span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
	- Change the Tab `minWidth` from `72px` => `90px` (without media-query) according to [material-design spec](https://material.io/components/tabs#specs)
	- Change the Tab `maxWidth` from `264px` => `360px` according to [material-design spec](https://material.io/components/tabs#specs)
	- Remove the `span` element that wraps children. Remove the `wrapper` classKey too. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).

cc @mbrookes for confirmation.

[mnajdova]

I think it's confusing linking different PR here. Let's update the current PR description with the details of why the changes was introduced and link this PR in the migration guide.

[mbrookes]

The passive voice doesn't feel right.

I'm not so sure. "Change the Tab minWidth" sounds like an instruction to the reader, whereas "Tab minWidth (was/has been) changed" describes what has changed:

• What changed
• What is/are the implication(s)
• What you need to do

(Situation, Complication, Resolution...)

[eps1lon]

Intuitively I would've also preferred passive voice in changelogs.

Though it's not uncommon for changelogs to have active voice:

• https://github.com/facebook/react/blob/master/CHANGELOG.md
• https://keepachangelog.com/en/1.0.0/

changelogs with passive voice:

• https://developer.apple.com/documentation/macos-release-notes/macos-big-sur-11_0_1-release-notes

I could go on forever and find examples for active and passive voice. Though I can't find any resources on active vs passive voice for changelogs specifically (this is why "benchmarking" is generally useless to form an actionable advise).

I'd say it's more important to use a consistent voice throughout the document since I'm fine with either voice. Though definitely an interesting topic.

[oliviertassinari]

Thanks for the two examples. Would it work if we use this framing?

1. In the changelog, the PR's description are in the active voice because they describe the action of the change. It's more git focused. (what we have done so far)
2. In the changelog's summary, the passive voice is used, because we focus on the developers not familiar with the codebase reading it. (what we have done so far)
3. In the migration guide, the passive voice is used for the same reason as 3. (currently, a mix is used)

[siriwatknp]

similar thought as Sebastian, I am okay with the above proposal as long as we keep them consistent.

[mnajdova]

Overall, the changes look good to me 👍

[jmgomezdev]

In the realease v5.0.0-beta, you have removed no longer necessary span wrapper in tab buttons. The problem is that the missing span with the MuiTab-wrapper class results in insufficient spacing.

v5.0.0-beta.1 => https://codesandbox.io/s/tab-buttons-v5-nv6c1
v4.12.2 => https://codesandbox.io/s/n5uch

[oliviertassinari]

@jmgomezdev This change doesn't lead to any visual change. Aren't you looking for #26458 instead? In any case, it's expected.

[jmgomezdev]

Yes, you're right