From 7e0d3832138728dfed100200bff84e924d85e4c8 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 26 May 2021 13:28:28 +0700
Subject: [PATCH 1/4] change minWidth and maxWidth

---
 docs/src/pages/guides/migration-v4/migration-v4.md | 3 +++
 packages/material-ui/src/Tab/Tab.js                | 7 ++-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
index 30a113dfe516fd..e787915b7cbfa3 100644
--- a/docs/src/pages/guides/migration-v4/migration-v4.md
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -1437,6 +1437,9 @@ You can use the [`collapse-rename-collapsedheight` codemod](https://github.com/m
   +<Tabs scrollButtons={false} />
   ```
 
+- 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)
+
 ### TextField
 
 - Change the default variant from `standard` to `outlined`. Standard has been removed from the Material Design Guidelines.
diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index bab7db3ef9ce24..53f4ee0fb6d717 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -45,8 +45,8 @@ const TabRoot = experimentalStyled(ButtonBase, {
 })(({ theme, styleProps }) => ({
   /* Styles applied to the root element. */
   ...theme.typography.button,
-  maxWidth: 264,
-  minWidth: 72,
+  maxWidth: 360,
+  minWidth: 90,
   position: 'relative',
   minHeight: 48,
   flexShrink: 0,
@@ -54,9 +54,6 @@ const TabRoot = experimentalStyled(ButtonBase, {
   overflow: 'hidden',
   whiteSpace: 'normal',
   textAlign: 'center',
-  [theme.breakpoints.up('sm')]: {
-    minWidth: 160,
-  },
   /* Styles applied to the root element if both `icon` and `label` are provided. */
   ...(styleProps.icon &&
     styleProps.label && {

From e36f4022300c41af776128b4715f107be68dc239 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 26 May 2021 14:07:39 +0700
Subject: [PATCH 2/4] adjust line height and padding

---
 packages/material-ui/src/Tab/Tab.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index 53f4ee0fb6d717..13caa817d36923 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -50,7 +50,7 @@ const TabRoot = experimentalStyled(ButtonBase, {
   position: 'relative',
   minHeight: 48,
   flexShrink: 0,
-  padding: '6px 12px',
+  padding: '12px 16px',
   overflow: 'hidden',
   whiteSpace: 'normal',
   textAlign: 'center',
@@ -119,6 +119,7 @@ const TabWrapper = experimentalStyled('span', {
   justifyContent: 'center',
   width: '100%',
   flexDirection: 'column',
+  lineHeight: 1.25,
 });
 
 const Tab = React.forwardRef(function Tab(inProps, ref) {

From 8ef0721c6787f26ce510ff5095e9e258dad164f5 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 26 May 2021 16:08:41 +0700
Subject: [PATCH 3/4] make label longer to hit 2 lines

---
 docs/src/pages/components/tabs/TabsWrappedLabel.js  | 2 +-
 docs/src/pages/components/tabs/TabsWrappedLabel.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.js b/docs/src/pages/components/tabs/TabsWrappedLabel.js
index aa84934805f773..b703d332f4d356 100644
--- a/docs/src/pages/components/tabs/TabsWrappedLabel.js
+++ b/docs/src/pages/components/tabs/TabsWrappedLabel.js
@@ -19,7 +19,7 @@ export default function TabsWrappedLabel() {
       >
         <Tab
           value="one"
-          label="New Arrivals in the Longest Text of Nonfiction"
+          label="New Arrivals in the Longest Text of Nonfiction that should appear in the next line"
           wrapped
         />
         <Tab value="two" label="Item Two" />
diff --git a/docs/src/pages/components/tabs/TabsWrappedLabel.tsx b/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
index d16c52f3cd5da2..b975a940fba9ca 100644
--- a/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
+++ b/docs/src/pages/components/tabs/TabsWrappedLabel.tsx
@@ -19,7 +19,7 @@ export default function TabsWrappedLabel() {
       >
         <Tab
           value="one"
-          label="New Arrivals in the Longest Text of Nonfiction"
+          label="New Arrivals in the Longest Text of Nonfiction that should appear in the next line"
           wrapped
         />
         <Tab value="two" label="Item Two" />

From 4272b7210010b8c0c7c8c20076ddcd8cbe5479e4 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 27 May 2021 10:53:09 +0700
Subject: [PATCH 4/4] minor styling as suggested

---
 packages/material-ui/src/Tab/Tab.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index 13caa817d36923..bbd31ab07e77c7 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -59,6 +59,7 @@ const TabRoot = experimentalStyled(ButtonBase, {
     styleProps.label && {
       minHeight: 72,
       paddingTop: 9,
+      paddingBottom: 9,
       [`& .${tabClasses.wrapper} > *:first-child`]: {
         marginBottom: 6,
       },