[Tabs] Remove deprecated props

docs/data/material/components/tabs/CustomizedTabs.js

@@ -48,7 +48,9 @@ const AntTab = styled((props) => <Tab disableRipple {...props} />)(({ theme }) =
 const StyledTabs = styled((props) => (
   <Tabs
     {...props}
-    TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }}
+    slotProps={{
+      indicator: { children: <span className="MuiTabs-indicatorSpan" /> },
+    }}
   />
 ))({
   '& .MuiTabs-indicator': {

docs/data/material/components/tabs/CustomizedTabs.tsx

@@ -56,7 +56,9 @@ interface StyledTabsProps {
 const StyledTabs = styled((props: StyledTabsProps) => (
   <Tabs
     {...props}
-    TabIndicatorProps={{ children: <span className="MuiTabs-indicatorSpan" /> }}
+    slotProps={{
+      indicator: { children: <span className="MuiTabs-indicatorSpan" /> },
+    }}
   />
 ))({
   '& .MuiTabs-indicator': {

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 <path>
+```
+
+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
+ <Tabs
+-  ScrollButtonComponent={CustomScrollButton}
+-  TabIndicatorProps={{ style: { backgroundColor: 'green' } }}
+-  TabScrollButtonProps={{ disableRipple: true }}
++  slots={{ scrollButtons: CustomScrollButton }}
++  slotProps={{
++    indicator: { style: { backgroundColor: 'green' } },
++    scrollButtons: { disableRipple: true },
++  }}
+ />
+```

docs/pages/material-ui/api/tabs.json

@@ -26,12 +26,6 @@
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
       "default": "'horizontal'"
     },
-    "ScrollButtonComponent": {
-      "type": { "name": "elementType" },
-      "default": "TabScrollButton",
-      "deprecated": true,
-      "deprecationInfo": "use the <code>slots.scrollButtons</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "scrollButtons": {
       "type": { "name": "enum", "description": "'auto'<br>&#124;&nbsp;false<br>&#124;&nbsp;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 <code>slotProps.indicator</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "TabScrollButtonProps": {
-      "type": { "name": "object" },
-      "default": "{}",
-      "deprecated": true,
-      "deprecationInfo": "use the <code>slotProps.scrollButtons</code> prop instead. This prop will be removed in a future major release. See <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
     "textColor": {
       "type": {
         "name": "enum",

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": "<p>Determine behavior of scroll buttons when tabs are set to scroll:</p>\n<ul>\n<li><code>auto</code> will only present them when not all the items are visible.</li>\n<li><code>true</code> will always present them.</li>\n<li><code>false</code> will never present them.</li>\n</ul>\n<p>By default the scroll buttons are hidden on mobile.\nThis behavior can be disabled with <code>allowScrollButtonsMobile</code>.</p>\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 <a href=\"https://mui.com/material-ui/api/tab-scroll-button/\"><code>TabScrollButton</code></a> element."
-    },
     "textColor": { "description": "Determines the color of the <code>Tab</code>." },
     "value": {
       "description": "The value of the currently selected <code>Tab</code>. If you don&#39;t want any selected <code>Tab</code>, you can set this prop to <code>false</code>."

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<TabsProps, 'slots' | 'slotProps'> {
   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<HTMLDivElement> & {
-        sx?: SxProps<Theme> | 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<TabScrollButtonProps> | undefined;
   /**
    * Determines the color of the `Tab`.
    * @default 'primary'

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,15 +969,13 @@ Tabs.propTypes /* remove-proptypes */ = {
    */
   slots: PropTypes.shape({
     endScrollButtonIcon: PropTypes.elementType,
-    EndScrollButtonIcon: PropTypes.elementType,
     indicator: PropTypes.elementType,
     list: PropTypes.elementType,
     root: PropTypes.elementType,
     scrollbar: PropTypes.elementType,
     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'

packages/mui-material/src/Tabs/Tabs.spec.tsx

@@ -16,11 +16,11 @@ function testOnChange() {
 }
 
 function TabTest() {
-  return <Tabs TabIndicatorProps={{ style: { backgroundColor: 'green' } }} />;
+  return <Tabs slotProps={{ indicator: { style: { backgroundColor: 'green' } } }} />;
 }
 
 function TabIndicatorSxTest() {
-  return <Tabs TabIndicatorProps={{ sx: {} }} />;
+  return <Tabs slotProps={{ indicator: { sx: {} } }} />;
 }
 
 function SampleIcon() {
@@ -38,8 +38,8 @@ function SampleIcon() {
   scrollButtons
   textColor="secondary"
   slots={{
-    StartScrollButtonIcon: SampleIcon,
-    EndScrollButtonIcon: SampleIcon,
+    startScrollButtonIcon: SampleIcon,
+    endScrollButtonIcon: SampleIcon,
   }}
   slotProps={{
     endScrollButtonIcon: (ownerState) => ({

packages/mui-material/src/Tabs/Tabs.test.js

@@ -661,13 +661,13 @@ describe.skipIf(isSafari)('<Tabs />', () => {
       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(
         <Tabs
           value={0}
           variant="scrollable"
           scrollButtons
-          TabScrollButtonProps={{ className: 'foo' }}
+          slotProps={{ scrollButtons: { className: 'foo' } }}
         >
           <Tab />
           <Tab />
@@ -880,10 +880,10 @@ describe.skipIf(isSafari)('<Tabs />', () => {
     });
   });
 
-  describe('prop: TabIndicatorProps', () => {
+  describe('slotProps: indicator', () => {
     it('should merge the style', () => {
       const { container } = render(
-        <Tabs value={0} TabIndicatorProps={{ style: { backgroundColor: 'green' } }}>
+        <Tabs value={0} slotProps={{ indicator: { style: { backgroundColor: 'green' } } }}>
           <Tab />
         </Tabs>,
       );