diff --git a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js index 99f12b420f6092..9054664805fa22 100644 --- 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 index 739273583c2ce0..fae5772aa39fad 100644 --- 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 index 0b279e951266a0..9eb328ea9d07b4 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -1761,6 +1761,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 +``` + +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 index f392f1f89c01cf..4f80b06fb40a48 100644 --- 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 index 2c0ca347afe058..28e4c978f1af5e 100644 --- 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 index 393405188ba664..83c90743b95f1e 100644 --- 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 index 4e186c6a43a29b..89c9df24e91e3d 100644 --- 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": "!variant=\"scrollable\"\b\b\b" }, - "flexContainer": { - "description": "", - "deprecationInfo": "use list instead. See Migrating from deprecated APIs for more details." - }, - "flexContainerVertical": { - "description": "", - "deprecationInfo": "use a combination of list and vertical instead. See Migrating from deprecated APIs 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 index 935d49314c2aef..273f622c37cbeb 100644 --- a/docs/translations/api-docs/tab/tab.json +++ b/docs/translations/api-docs/tab/tab.json @@ -41,12 +41,6 @@ "nodeName": "the icon HTML element", "conditions": "both icon and label are provided" }, - "iconWrapper": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon HTML element", - "conditions": "both icon and label are provided", - "deprecationInfo": "Use icon class instead. See Migrating from deprecated APIs 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 index 57f75fce5f6b97..9e6902f12cf8bc 100644 --- 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": "!variant=\"scrollable\"\b\b\b" }, - "flexContainer": { - "description": "", - "deprecationInfo": "use list instead. See Migrating from deprecated APIs for more details." - }, - "flexContainerVertical": { - "description": "", - "deprecationInfo": "use a combination of list and vertical instead. See Migrating from deprecated APIs 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 index e681a4817411f7..f614b5e6aeb42c 100644 --- 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 index 45193f397fe7a4..bb3296b71b9d28 100644 --- a/packages/mui-material/src/Tab/Tab.test.js +++ b/packages/mui-material/src/Tab/Tab.test.js @@ -118,7 +118,6 @@ describe('', () => { it('should add a classname when passed together with label', () => { render(} 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('', () => { }); }); - it.skipIf(isJsdom())('should apply iconWrapper styles from theme', function test() { - const theme = createTheme({ - components: { - MuiTab: { - styleOverrides: { - iconWrapper: { - backgroundColor: 'rgb(0, 0, 255)', - }, - }, - }, - }, - }); - - render( - - hello} label="icon" /> - , - ); - - 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('', () => { 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( - - hello} label="icon" /> - , - ); - - 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 index 566f9d93b88fcb..6f3fc77ef0e8ae 100644 --- 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 index 2a66e26c33f161..b053fd9e97a490 100644 --- 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 index eba71a19af553f..7e5c445a09e1b7 100644 --- 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)('', () => { , ); - 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 index 84ab1adf4740e3..bda332cddd90de 100644 --- 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',