[Tabs][Tab] Remove deprecated CSS classes (#48078)

siriwatknp · web-flow · commit 9da151657da5 · 2026-03-24T15:52:19.000+07:00
diff --git a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
@@ -21,7 +21,7 @@ const Toolbar = styled(MuiToolbar)({
   justifyContent: 'center',
   gap: '12px',
   flexShrink: 0,
-  [`& ${tabsClasses.flexContainer}`]: {
+  [`& ${tabsClasses.list}`]: {
     gap: '8px',
     p: '8px',
     pb: 0,
diff --git a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
@@ -21,7 +21,7 @@ const Toolbar = styled(MuiToolbar)({
   justifyContent: 'center',
   gap: '12px',
   flexShrink: 0,
-  [`& ${tabsClasses.flexContainer}`]: {
+  [`& ${tabsClasses.list}`]: {
     gap: '8px',
     p: '8px',
     pb: 0,
diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
@@ -1822,6 +1822,38 @@ The following deprecated props have been removed:
  />
 ```
 
+#### Tab deprecated classes removed
+
+Use the [tab-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#tab-classes) below to migrate the code as described in the following section:
+
+```bash
+npx @mui/codemod@latest deprecations/tab-classes <path>
+```
+
+The following deprecated class has been removed:
+
+- `iconWrapper` — use the `icon` class instead
+
+```diff
+-.MuiTab-iconWrapper
++.MuiTab-icon
+```
+
+#### Tabs deprecated classes removed
+
+The following deprecated classes have been removed:
+
+- `flexContainer` — use the `list` class instead
+- `flexContainerVertical` — combine the `list` and `vertical` classes instead
+
+```diff
+-.MuiTabs-flexContainer
++.MuiTabs-list
+
+-.MuiTabs-flexContainerVertical
++.MuiTabs-list.MuiTabs-vertical
+```
+
 #### ToggleButtonGroup deprecated CSS classes removed
 
 Use the [toggle-button-group-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#toggle-button-group-classes) below to migrate the code as described in the following section:
diff --git a/docs/pages/material-ui/api/tab-list.json b/docs/pages/material-ui/api/tab-list.json
@@ -15,20 +15,6 @@
       "description": "Styles applied to the tablist element if `!variant=\"scrollable\"`\b\b\b.",
       "isGlobal": false
     },
-    {
-      "key": "flexContainer",
-      "className": "MuiTabList-flexContainer",
-      "description": "",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
-    {
-      "key": "flexContainerVertical",
-      "className": "MuiTabList-flexContainerVertical",
-      "description": "",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
     {
       "key": "hideScrollbar",
       "className": "MuiTabList-hideScrollbar",
diff --git a/docs/pages/material-ui/api/tab.json b/docs/pages/material-ui/api/tab.json
@@ -45,13 +45,6 @@
       "description": "Styles applied to the `icon` HTML element if both `icon` and `label` are provided.",
       "isGlobal": false
     },
-    {
-      "key": "iconWrapper",
-      "className": "MuiTab-iconWrapper",
-      "description": "Styles applied to the `icon` HTML element if both `icon` and `label` are provided.",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
     {
       "key": "labelIcon",
       "className": "MuiTab-labelIcon",
diff --git a/docs/pages/material-ui/api/tabs.json b/docs/pages/material-ui/api/tabs.json
@@ -134,20 +134,6 @@
       "description": "Styles applied to the tablist element if `!variant=\"scrollable\"`\b\b\b.",
       "isGlobal": false
     },
-    {
-      "key": "flexContainer",
-      "className": "MuiTabs-flexContainer",
-      "description": "",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
-    {
-      "key": "flexContainerVertical",
-      "className": "MuiTabs-flexContainerVertical",
-      "description": "",
-      "isGlobal": false,
-      "isDeprecated": true
-    },
     {
       "key": "hideScrollbar",
       "className": "MuiTabs-hideScrollbar",
diff --git a/docs/translations/api-docs/tab-list/tab-list.json b/docs/translations/api-docs/tab-list/tab-list.json
@@ -14,14 +14,6 @@
       "nodeName": "the tablist element",
       "conditions": "<code>!variant=\"scrollable\"</code>\b\b\b"
     },
-    "flexContainer": {
-      "description": "",
-      "deprecationInfo": "use <code>list</code> instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "flexContainerVertical": {
-      "description": "",
-      "deprecationInfo": "use a combination of <code>list</code> and <code>vertical</code> instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "hideScrollbar": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the tablist element",
diff --git a/docs/translations/api-docs/tab/tab.json b/docs/translations/api-docs/tab/tab.json
@@ -41,12 +41,6 @@
       "nodeName": "the <code>icon</code> HTML element",
       "conditions": "both <code>icon</code> and <code>label</code> are provided"
     },
-    "iconWrapper": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the <code>icon</code> HTML element",
-      "conditions": "both <code>icon</code> and <code>label</code> are provided",
-      "deprecationInfo": "Use <code>icon</code> class instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details"
-    },
     "labelIcon": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
diff --git a/docs/translations/api-docs/tabs/tabs.json b/docs/translations/api-docs/tabs/tabs.json
@@ -64,14 +64,6 @@
       "nodeName": "the tablist element",
       "conditions": "<code>!variant=\"scrollable\"</code>\b\b\b"
     },
-    "flexContainer": {
-      "description": "",
-      "deprecationInfo": "use <code>list</code> instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "flexContainerVertical": {
-      "description": "",
-      "deprecationInfo": "use a combination of <code>list</code> and <code>vertical</code> instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "hideScrollbar": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the tablist element",
diff --git a/packages/mui-material/src/Tab/Tab.js b/packages/mui-material/src/Tab/Tab.js
@@ -24,7 +24,7 @@ const useUtilityClasses = (ownerState) => {
       selected && 'selected',
       disabled && 'disabled',
     ],
-    icon: ['iconWrapper', 'icon'],
+    icon: ['icon'],
   };
 
   return composeClasses(slots, getTabUtilityClass, classes);
@@ -42,9 +42,6 @@ const TabRoot = styled(ButtonBase, {
       styles[`textColor${capitalize(ownerState.textColor)}`],
       ownerState.fullWidth && styles.fullWidth,
       ownerState.wrapped && styles.wrapped,
-      {
-        [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper,
-      },
       {
         [`& .${tabClasses.icon}`]: styles.icon,
       },
diff --git a/packages/mui-material/src/Tab/Tab.test.js b/packages/mui-material/src/Tab/Tab.test.js
@@ -118,7 +118,6 @@ describe('<Tab />', () => {
     it('should add a classname when passed together with label', () => {
       render(<Tab icon={<div className="test-icon" />} label="foo" />);
       const wrapper = screen.getByRole('tab').children[0];
-      expect(wrapper).to.have.class(classes.iconWrapper);
       expect(wrapper).to.have.class(classes.icon);
       expect(wrapper).to.have.class('test-icon');
     });
@@ -160,31 +159,6 @@ describe('<Tab />', () => {
     });
   });
 
-  it.skipIf(isJsdom())('should apply iconWrapper styles from theme', function test() {
-    const theme = createTheme({
-      components: {
-        MuiTab: {
-          styleOverrides: {
-            iconWrapper: {
-              backgroundColor: 'rgb(0, 0, 255)',
-            },
-          },
-        },
-      },
-    });
-
-    render(
-      <ThemeProvider theme={theme}>
-        <Tab icon={<div>hello</div>} label="icon" />
-      </ThemeProvider>,
-    );
-
-    const icon = screen.getByRole('tab').querySelector(`.${classes.iconWrapper}`);
-    expect(icon).toHaveComputedStyle({
-      backgroundColor: 'rgb(0, 0, 255)',
-    });
-  });
-
   it.skipIf(isJsdom())('should apply icon styles from theme', function test() {
     const theme = createTheme({
       components: {
@@ -209,39 +183,4 @@ describe('<Tab />', () => {
       backgroundColor: 'rgb(0, 0, 255)',
     });
   });
-
-  it.skipIf(isJsdom())(
-    'icon styles should override iconWrapper styles from theme',
-    function test() {
-      const theme = createTheme({
-        components: {
-          MuiTab: {
-            styleOverrides: {
-              iconWrapper: {
-                backgroundColor: 'rgb(255, 0, 0)',
-              },
-              icon: {
-                backgroundColor: 'rgb(0, 0, 255)',
-              },
-            },
-          },
-        },
-      });
-
-      render(
-        <ThemeProvider theme={theme}>
-          <Tab icon={<div>hello</div>} label="icon" />
-        </ThemeProvider>,
-      );
-
-      const icon = screen.getByRole('tab').querySelector(`.${classes.icon}`);
-      const iconWrapper = screen.getByRole('tab').querySelector(`.${classes.iconWrapper}`);
-      expect(iconWrapper).toHaveComputedStyle({
-        backgroundColor: 'rgb(0, 0, 255)',
-      });
-      expect(icon).toHaveComputedStyle({
-        backgroundColor: 'rgb(0, 0, 255)',
-      });
-    },
-  );
 });
diff --git a/packages/mui-material/src/Tab/tabClasses.ts b/packages/mui-material/src/Tab/tabClasses.ts
@@ -20,10 +20,6 @@ export interface TabClasses {
   fullWidth: string;
   /** Styles applied to the root element if `wrapped={true}`. */
   wrapped: string;
-  /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided.
-   * @deprecated Use `icon` class instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details
-   */
-  iconWrapper: string;
   /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided. */
   icon: string;
 }
@@ -44,7 +40,6 @@ const tabClasses: TabClasses = generateUtilityClasses('MuiTab', [
   'disabled',
   'fullWidth',
   'wrapped',
-  'iconWrapper',
   'icon',
 ]);
 
diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js
@@ -42,13 +42,7 @@ const useUtilityClasses = (ownerState) => {
       scrollableX && 'scrollableX',
       scrollableY && 'scrollableY',
     ],
-    list: [
-      'list',
-      'flexContainer',
-      vertical && 'flexContainerVertical',
-      vertical && 'vertical',
-      centered && 'centered',
-    ],
+    list: ['list', vertical && 'vertical', centered && 'centered'],
     indicator: ['indicator'],
     scrollButtons: ['scrollButtons', scrollButtonsHideMobile && 'scrollButtonsHideMobile'],
     scrollableX: [scrollableX && 'scrollableX'],
@@ -160,12 +154,7 @@ const List = styled('div', {
   slot: 'List',
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
-    return [
-      styles.list,
-      styles.flexContainer,
-      ownerState.vertical && styles.flexContainerVertical,
-      ownerState.centered && styles.centered,
-    ];
+    return [styles.list, ownerState.centered && styles.centered];
   },
 })({
   display: 'flex',
@@ -822,7 +811,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) {
 
   const [ListSlot, listSlotProps] = useSlot('list', {
     ref: mergedRef,
-    className: clsx(classes.list, classes.flexContainer),
+    className: classes.list,
     elementType: List,
     externalForwardedProps,
     ownerState,
diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js
@@ -211,7 +211,7 @@ describe.skipIf(isSafari)('<Tabs />', () => {
           <Tab />
         </Tabs>,
       );
-      const selector = `.${classes.flexContainer}.${classes.centered}`;
+      const selector = `.${classes.list}.${classes.centered}`;
       expect(container.querySelector(selector).nodeName).to.equal('DIV');
     });
   });
diff --git a/packages/mui-material/src/Tabs/tabsClasses.ts b/packages/mui-material/src/Tabs/tabsClasses.ts
@@ -6,12 +6,6 @@ export interface TabsClasses {
   root: string;
   /** Styles applied to the root element if `orientation="vertical"`. */
   vertical: string;
-  /** Styles applied to the flex container element. */
-  /** @deprecated use `list` instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */
-  flexContainer: string;
-  /** Styles applied to the flex container element if `orientation="vertical"`. */
-  /** @deprecated use a combination of `list` and `vertical` instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */
-  flexContainerVertical: string;
   /** Styles applied to the list element. */
   list: string;
   /** Styles applied to the flex container element if `centered={true}` & `!variant="scrollable"`. */
@@ -44,8 +38,6 @@ const tabsClasses: TabsClasses = generateUtilityClasses('MuiTabs', [
   'root',
   'vertical',
   'list',
-  'flexContainer',
-  'flexContainerVertical',
   'centered',
   'scroller',
   'fixed',
