From fcbce1dfea9435711cafb97e068d8e99e612c42e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 18 Mar 2026 16:07:37 +0700 Subject: [PATCH] [Tabs] Remove deprecated props Remove ScrollButtonComponent, TabIndicatorProps, TabScrollButtonProps, and deprecated slots.StartScrollButtonIcon/EndScrollButtonIcon. --- .../components/tabs/CustomizedTabs.js | 4 +- .../components/tabs/CustomizedTabs.tsx | 4 +- .../migration/upgrade-to-v9/upgrade-to-v9.md | 29 +++++++++++++ docs/pages/material-ui/api/tabs.json | 20 +-------- docs/translations/api-docs/tabs/tabs.json | 5 --- packages/mui-material/src/Tabs/Tabs.d.ts | 39 +----------------- packages/mui-material/src/Tabs/Tabs.js | 41 ++++--------------- packages/mui-material/src/Tabs/Tabs.spec.tsx | 8 ++-- packages/mui-material/src/Tabs/Tabs.test.js | 8 ++-- 9 files changed, 53 insertions(+), 105 deletions(-) diff --git a/docs/data/material/components/tabs/CustomizedTabs.js b/docs/data/material/components/tabs/CustomizedTabs.js index 5cb33f5d28b55f..b3f379fc9ed934 100644 --- a/docs/data/material/components/tabs/CustomizedTabs.js +++ b/docs/data/material/components/tabs/CustomizedTabs.js @@ -48,7 +48,9 @@ const AntTab = styled((props) => )(({ theme }) = const StyledTabs = styled((props) => ( }} + slotProps={{ + indicator: { children: }, + }} /> ))({ '& .MuiTabs-indicator': { diff --git a/docs/data/material/components/tabs/CustomizedTabs.tsx b/docs/data/material/components/tabs/CustomizedTabs.tsx index 1d8a84af9cc6f7..75b3f88fe6ad35 100644 --- a/docs/data/material/components/tabs/CustomizedTabs.tsx +++ b/docs/data/material/components/tabs/CustomizedTabs.tsx @@ -56,7 +56,9 @@ interface StyledTabsProps { const StyledTabs = styled((props: StyledTabsProps) => ( }} + slotProps={{ + indicator: { children: }, + }} /> ))({ '& .MuiTabs-indicator': { 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 df2d9cd68a4eb7..13466ad9746c6e 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 @@ -592,3 +592,32 @@ Use `sx={{ opacity : "0.6" }}` (or any opacity): + sx={{ opacity: 0.6 }} /> ``` + +#### Tabs deprecated props removed + +Use the [tabs-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#tabs-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/tabs-props +``` + +The following deprecated props have been removed: + +- `ScrollButtonComponent` — use `slots.scrollButtons` instead +- `TabIndicatorProps` — use `slotProps.indicator` instead +- `TabScrollButtonProps` — use `slotProps.scrollButtons` instead +- `slots.StartScrollButtonIcon` — use `slots.startScrollButtonIcon` instead +- `slots.EndScrollButtonIcon` — use `slots.endScrollButtonIcon` instead + +```diff + +``` diff --git a/docs/pages/material-ui/api/tabs.json b/docs/pages/material-ui/api/tabs.json index b3909fbf031e3c..393405188ba664 100644 --- a/docs/pages/material-ui/api/tabs.json +++ b/docs/pages/material-ui/api/tabs.json @@ -26,12 +26,6 @@ "type": { "name": "enum", "description": "'horizontal'
| 'vertical'" }, "default": "'horizontal'" }, - "ScrollButtonComponent": { - "type": { "name": "elementType" }, - "default": "TabScrollButton", - "deprecated": true, - "deprecationInfo": "use the slots.scrollButtons prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "scrollButtons": { "type": { "name": "enum", "description": "'auto'
| false
| true" }, "default": "'auto'" @@ -47,7 +41,7 @@ "slots": { "type": { "name": "shape", - "description": "{ endScrollButtonIcon?: elementType, EndScrollButtonIcon?: elementType, indicator?: elementType, list?: elementType, root?: elementType, scrollbar?: elementType, scrollButtons?: elementType, scroller?: elementType, startScrollButtonIcon?: elementType, StartScrollButtonIcon?: elementType }" + "description": "{ endScrollButtonIcon?: elementType, indicator?: elementType, list?: elementType, root?: elementType, scrollbar?: elementType, scrollButtons?: elementType, scroller?: elementType, startScrollButtonIcon?: elementType }" }, "default": "{}" }, @@ -58,18 +52,6 @@ }, "additionalInfo": { "sx": true } }, - "TabIndicatorProps": { - "type": { "name": "object" }, - "default": "{}", - "deprecated": true, - "deprecationInfo": "use the slotProps.indicator prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, - "TabScrollButtonProps": { - "type": { "name": "object" }, - "default": "{}", - "deprecated": true, - "deprecationInfo": "use the slotProps.scrollButtons prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "textColor": { "type": { "name": "enum", diff --git a/docs/translations/api-docs/tabs/tabs.json b/docs/translations/api-docs/tabs/tabs.json index 757ec9f266695e..57f75fce5f6b97 100644 --- a/docs/translations/api-docs/tabs/tabs.json +++ b/docs/translations/api-docs/tabs/tabs.json @@ -31,7 +31,6 @@ } }, "orientation": { "description": "The component orientation (layout flow direction)." }, - "ScrollButtonComponent": { "description": "The component used to render the scroll buttons." }, "scrollButtons": { "description": "

Determine behavior of scroll buttons when tabs are set to scroll:

\n
    \n
  • auto will only present them when not all the items are visible.
    • \n
  • true will always present them.
    • \n
  • false will never present them.
    • \n
\n

By default the scroll buttons are hidden on mobile.\nThis behavior can be disabled with allowScrollButtonsMobile.

\n" }, @@ -43,10 +42,6 @@ "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, - "TabIndicatorProps": { "description": "Props applied to the tab indicator element." }, - "TabScrollButtonProps": { - "description": "Props applied to the TabScrollButton element." - }, "textColor": { "description": "Determines the color of the Tab." }, "value": { "description": "The value of the currently selected Tab. If you don't want any selected Tab, you can set this prop to false." diff --git a/packages/mui-material/src/Tabs/Tabs.d.ts b/packages/mui-material/src/Tabs/Tabs.d.ts index d86ef6a2faebbb..2f55f354e4b1d3 100644 --- a/packages/mui-material/src/Tabs/Tabs.d.ts +++ b/packages/mui-material/src/Tabs/Tabs.d.ts @@ -3,7 +3,7 @@ import { SxProps } from '@mui/system'; import { OverridableStringUnion } from '@mui/types'; import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; import { Theme } from '../styles'; -import TabScrollButton, { TabScrollButtonProps } from '../TabScrollButton'; +import TabScrollButton from '../TabScrollButton'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; import { TabsClasses } from './tabsClasses'; import SvgIcon from '../SvgIcon'; @@ -125,20 +125,7 @@ export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps< TabsOwnerState >; } -> & { - slots?: - | { - /** - * @deprecated Use `slots.startScrollButtonIcon` instead. - */ - StartScrollButtonIcon?: React.ElementType | undefined; - /** - * @deprecated Use `slots.endScrollButtonIcon` instead. - */ - EndScrollButtonIcon?: React.ElementType | undefined; - } - | undefined; -}; +>; export interface TabsOwnerState extends Omit { vertical: boolean; @@ -207,12 +194,6 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps { * @default 'horizontal' */ orientation?: 'horizontal' | 'vertical' | undefined; - /** - * The component used to render the scroll buttons. - * @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * @default TabScrollButton - */ - ScrollButtonComponent?: React.ElementType | undefined; /** * Determine behavior of scroll buttons when tabs are set to scroll: * @@ -230,22 +211,6 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps { * changes on activation. */ selectionFollowsFocus?: boolean | undefined; - /** - * Props applied to the tab indicator element. - * @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * @default {} - */ - TabIndicatorProps?: - | (React.HTMLAttributes & { - sx?: SxProps | undefined; - }) - | undefined; - /** - * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element. - * @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * @default {} - */ - TabScrollButtonProps?: Partial | undefined; /** * Determines the color of the `Tab`. * @default 'primary' diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js index bd97d170c872a7..2a66e26c33f161 100644 --- a/packages/mui-material/src/Tabs/Tabs.js +++ b/packages/mui-material/src/Tabs/Tabs.js @@ -254,13 +254,10 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) { indicatorColor = 'primary', onChange, orientation = 'horizontal', - ScrollButtonComponent, // TODO: remove in v7 (deprecated in v6) scrollButtons = 'auto', selectionFollowsFocus, slots = {}, slotProps = {}, - TabIndicatorProps = {}, // TODO: remove in v7 (deprecated in v6) - TabScrollButtonProps = {}, // TODO: remove in v7 (deprecated in v6) textColor = 'primary', value, variant = 'standard', @@ -298,13 +295,13 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) { const classes = useUtilityClasses(ownerState); const startScrollButtonIconProps = useSlotProps({ - elementType: slots.StartScrollButtonIcon, + elementType: slots.startScrollButtonIcon, externalSlotProps: slotProps.startScrollButtonIcon, ownerState, }); const endScrollButtonIconProps = useSlotProps({ - elementType: slots.EndScrollButtonIcon, + elementType: slots.endScrollButtonIcon, externalSlotProps: slotProps.endScrollButtonIcon, ownerState, }); @@ -335,11 +332,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) { const externalForwardedProps = { slots, - slotProps: { - indicator: TabIndicatorProps, - scrollButtons: TabScrollButtonProps, - ...slotProps, - }, + slotProps, }; const getTabsMeta = () => { @@ -526,15 +519,15 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) { ); const [ScrollButtonsSlot, scrollButtonSlotProps] = useSlot('scrollButtons', { - className: clsx(classes.scrollButtons, TabScrollButtonProps.className), + className: classes.scrollButtons, elementType: TabScrollButton, externalForwardedProps, ownerState, additionalProps: { orientation, slots: { - StartScrollButtonIcon: slots.startScrollButtonIcon || slots.StartScrollButtonIcon, - EndScrollButtonIcon: slots.endScrollButtonIcon || slots.EndScrollButtonIcon, + StartScrollButtonIcon: slots.startScrollButtonIcon, + EndScrollButtonIcon: slots.endScrollButtonIcon, }, slotProps: { startScrollButtonIcon: startScrollButtonIconProps, @@ -722,7 +715,7 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) { ); const [IndicatorSlot, indicatorSlotProps] = useSlot('indicator', { - className: clsx(classes.indicator, TabIndicatorProps.className), + className: classes.indicator, elementType: TabsIndicator, externalForwardedProps, ownerState, @@ -939,12 +932,6 @@ Tabs.propTypes /* remove-proptypes */ = { * @default 'horizontal' */ orientation: PropTypes.oneOf(['horizontal', 'vertical']), - /** - * The component used to render the scroll buttons. - * @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * @default TabScrollButton - */ - ScrollButtonComponent: PropTypes.elementType, /** * Determine behavior of scroll buttons when tabs are set to scroll: * @@ -982,7 +969,6 @@ Tabs.propTypes /* remove-proptypes */ = { */ slots: PropTypes.shape({ endScrollButtonIcon: PropTypes.elementType, - EndScrollButtonIcon: PropTypes.elementType, indicator: PropTypes.elementType, list: PropTypes.elementType, root: PropTypes.elementType, @@ -990,7 +976,6 @@ Tabs.propTypes /* remove-proptypes */ = { scrollButtons: PropTypes.elementType, scroller: PropTypes.elementType, startScrollButtonIcon: PropTypes.elementType, - StartScrollButtonIcon: PropTypes.elementType, }), /** * The system prop that allows defining system overrides as well as additional CSS styles. @@ -1000,18 +985,6 @@ Tabs.propTypes /* remove-proptypes */ = { PropTypes.func, PropTypes.object, ]), - /** - * Props applied to the tab indicator element. - * @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * @default {} - */ - TabIndicatorProps: PropTypes.object, - /** - * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element. - * @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * @default {} - */ - TabScrollButtonProps: PropTypes.object, /** * Determines the color of the `Tab`. * @default 'primary' diff --git a/packages/mui-material/src/Tabs/Tabs.spec.tsx b/packages/mui-material/src/Tabs/Tabs.spec.tsx index 841b87ffb5ad5e..f57b5c9ad935dc 100644 --- a/packages/mui-material/src/Tabs/Tabs.spec.tsx +++ b/packages/mui-material/src/Tabs/Tabs.spec.tsx @@ -16,11 +16,11 @@ function testOnChange() { } function TabTest() { - return ; + return ; } function TabIndicatorSxTest() { - return ; + return ; } function SampleIcon() { @@ -38,8 +38,8 @@ function SampleIcon() { scrollButtons textColor="secondary" slots={{ - StartScrollButtonIcon: SampleIcon, - EndScrollButtonIcon: SampleIcon, + startScrollButtonIcon: SampleIcon, + endScrollButtonIcon: SampleIcon, }} slotProps={{ endScrollButtonIcon: (ownerState) => ({ diff --git a/packages/mui-material/src/Tabs/Tabs.test.js b/packages/mui-material/src/Tabs/Tabs.test.js index ed498006b69afd..eba71a19af553f 100644 --- a/packages/mui-material/src/Tabs/Tabs.test.js +++ b/packages/mui-material/src/Tabs/Tabs.test.js @@ -661,13 +661,13 @@ describe.skipIf(isSafari)('', () => { expect(container.querySelectorAll(`.${classes.scrollButtons}`)).to.have.lengthOf(2); }); - it('should append className from TabScrollButtonProps', () => { + it('should append className from slotProps.scrollButtons', () => { const { container } = render( @@ -880,10 +880,10 @@ describe.skipIf(isSafari)('', () => { }); }); - describe('prop: TabIndicatorProps', () => { + describe('slotProps: indicator', () => { it('should merge the style', () => { const { container } = render( - + , );