[material-ui][Tabs] Deprecate *Props and complete slots, slotProps

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1839,6 +1839,69 @@ Here's how to migrate:
  },
 ```
 
+## Tabs
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#tabs-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/tabs-props <path>
+```
+
+### ScrollButtonComponent
+
+The Tabs's `ScrollButtonComponent` prop was deprecated in favor of `slots.scrollButton`:
+
+```diff
+ <Tabs
+-  ScrollButtonComponent={ScrollButtonComponent}
++  slots={{ scrollButton: ScrollButtonComponent }}
+ />
+```
+
+### TabScrollButtonProps
+
+The Tabs's `TabScrollButtonProps` prop was deprecated in favor of `slotProps.scrollButton`:
+
+```diff
+ <Tabs
+-  TabScrollButtonProps={TabScrollButtonProps}
++  slotProps={{ scrollButton: TabScrollButtonProps }}
+ />
+```
+
+### TabIndicatorProps
+
+The Tabs's `TabIndicatorProps` prop was deprecated in favor of `slotProps.indicator`:
+
+```diff
+ <Tabs
+-  TabIndicatorProps={TabIndicatorProps}
++  slotProps={{ indicator: TabIndicatorProps }}
+ />
+```
+
+### slots.StartScrollButtonIcon
+
+The Tabs's `slots.StartScrollButtonIcon` prop was deprecated in favor of `slots.startScrollButtonIcon` (camelCase):
+
+```diff
+ <Tabs
+-  slots={{ StartScrollButtonIcon: StartScrollButtonIcon }}
++  slots={{ startScrollButtonIcon: StartScrollButtonIcon }}
+ />
+```
+
+### slots.EndScrollButtonIcon
+
+The Tabs's `slots.EndScrollButtonIcon` prop was deprecated in favor of `slots.endScrollButtonIcon` (camelCase):
+
+```diff
+ <Tabs
+-  slots={{ EndScrollButtonIcon: EndScrollButtonIcon }}
++  slots={{ endScrollButtonIcon: EndScrollButtonIcon }}
+ />
+```
+
 ## Tab
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#tab-classes) below to migrate the code as described in the following sections:

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

@@ -26,7 +26,12 @@
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
       "default": "'horizontal'"
     },
-    "ScrollButtonComponent": { "type": { "name": "elementType" }, "default": "TabScrollButton" },
+    "ScrollButtonComponent": {
+      "type": { "name": "elementType" },
+      "default": "TabScrollButton",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots.scrollButton</code> prop instead. This prop will be removed in v7. 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'"
@@ -35,14 +40,14 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ endScrollButtonIcon?: func<br>&#124;&nbsp;object, startScrollButtonIcon?: func<br>&#124;&nbsp;object }"
+        "description": "{ endScrollButtonIcon?: func<br>&#124;&nbsp;object, flexContainer?: func<br>&#124;&nbsp;object, indicator?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, scrollbar?: func<br>&#124;&nbsp;object, scrollButtons?: func<br>&#124;&nbsp;object, scroller?: func<br>&#124;&nbsp;object, startScrollButtonIcon?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ EndScrollButtonIcon?: elementType, StartScrollButtonIcon?: elementType }"
+        "description": "{ endScrollButtonIcon?: elementType, EndScrollButtonIcon?: elementType, flexContainer?: elementType, indicator?: elementType, root?: elementType, scrollbar?: elementType, scrollButtons?: elementType, scroller?: elementType, startScrollButtonIcon?: elementType, StartScrollButtonIcon?: elementType }"
       },
       "default": "{}"
     },
@@ -53,8 +58,18 @@
       },
       "additionalInfo": { "sx": true }
     },
-    "TabIndicatorProps": { "type": { "name": "object" }, "default": "{}" },
-    "TabScrollButtonProps": { "type": { "name": "object" }, "default": "{}" },
+    "TabIndicatorProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.indicator</code> prop instead. This prop will be removed in v7. 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.scrollButton</code> prop instead. This prop will be removed in v7. 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",
@@ -74,6 +89,56 @@
   },
   "name": "Tabs",
   "imports": ["import Tabs from '@mui/material/Tabs';", "import { Tabs } from '@mui/material';"],
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component used for the popper.",
+      "default": "div",
+      "class": "MuiTabs-root"
+    },
+    {
+      "name": "scroller",
+      "description": "The component used for the scroller.",
+      "default": "div",
+      "class": "MuiTabs-scroller"
+    },
+    {
+      "name": "flexContainer",
+      "description": "The component used for the flex container.",
+      "default": "div",
+      "class": "MuiTabs-flexContainer"
+    },
+    {
+      "name": "scrollbar",
+      "description": "The component used for the scroller.",
+      "default": "ScrollbarSize",
+      "class": null
+    },
+    {
+      "name": "indicator",
+      "description": "The component used for the tab indicator.",
+      "default": "span",
+      "class": "MuiTabs-indicator"
+    },
+    {
+      "name": "scrollButtons",
+      "description": "The component used for the scroll button.",
+      "default": "TabScrollButton",
+      "class": "MuiTabs-scrollButtons"
+    },
+    {
+      "name": "startScrollButtonIcon",
+      "description": "The component used for the start scroll button icon.",
+      "default": "KeyboardArrowLeft",
+      "class": null
+    },
+    {
+      "name": "endScrollButtonIcon",
+      "description": "The component used for the end scroll button icon.",
+      "default": "KeyboardArrowRight",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "centered",
@@ -87,12 +152,6 @@
       "description": "Styles applied to the tablist element if `!variant=\"scrollable\"`\b\b\b.",
       "isGlobal": false
     },
-    {
-      "key": "flexContainer",
-      "className": "MuiTabs-flexContainer",
-      "description": "Styles applied to the flex container element.",
-      "isGlobal": false
-    },
     {
       "key": "flexContainerVertical",
       "className": "MuiTabs-flexContainerVertical",
@@ -105,18 +164,6 @@
       "description": "Styles applied to the tablist element if `variant=\"scrollable\"` and `visibleScrollbar={false}`.",
       "isGlobal": false
     },
-    {
-      "key": "indicator",
-      "className": "MuiTabs-indicator",
-      "description": "Styles applied to the TabIndicator component.",
-      "isGlobal": false
-    },
-    {
-      "key": "root",
-      "className": "MuiTabs-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    },
     {
       "key": "scrollableX",
       "className": "MuiTabs-scrollableX",
@@ -129,24 +176,12 @@
       "description": "Styles applied to the tablist element if `variant=\"scrollable\"` and `orientation=\"vertical\"`.",
       "isGlobal": false
     },
-    {
-      "key": "scrollButtons",
-      "className": "MuiTabs-scrollButtons",
-      "description": "Styles applied to the ScrollButtonComponent component.",
-      "isGlobal": false
-    },
     {
       "key": "scrollButtonsHideMobile",
       "className": "MuiTabs-scrollButtonsHideMobile",
       "description": "Styles applied to the ScrollButtonComponent component if `allowScrollButtonsMobile={true}`.",
       "isGlobal": false
     },
-    {
-      "key": "scroller",
-      "className": "MuiTabs-scroller",
-      "description": "Styles applied to the tablist element.",
-      "isGlobal": false
-    },
     {
       "key": "vertical",
       "className": "MuiTabs-vertical",

docs/translations/api-docs/tabs/tabs.json

@@ -35,9 +35,7 @@
     "selectionFollowsFocus": {
       "description": "If <code>true</code> the selected tab changes on focus. Otherwise it only changes on activation."
     },
-    "slotProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones."
-    },
+    "slotProps": { "description": "The props used for each slot inside." },
     "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
@@ -68,10 +66,6 @@
       "nodeName": "the tablist element",
       "conditions": "<code>!variant=\"scrollable\"</code>\b\b\b"
     },
-    "flexContainer": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the flex container element"
-    },
     "flexContainerVertical": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the flex container element",
@@ -82,11 +76,6 @@
       "nodeName": "the tablist element",
       "conditions": "<code>variant=\"scrollable\"</code> and <code>visibleScrollbar={false}</code>"
     },
-    "indicator": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the TabIndicator component"
-    },
-    "root": { "description": "Styles applied to the root element." },
     "scrollableX": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the tablist element",
@@ -97,23 +86,25 @@
       "nodeName": "the tablist element",
       "conditions": "<code>variant=\"scrollable\"</code> and <code>orientation=\"vertical\"</code>"
     },
-    "scrollButtons": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the ScrollButtonComponent component"
-    },
     "scrollButtonsHideMobile": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the ScrollButtonComponent component",
       "conditions": "<code>allowScrollButtonsMobile={true}</code>"
     },
-    "scroller": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the tablist element"
-    },
     "vertical": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
       "conditions": "<code>orientation=\"vertical\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "endScrollButtonIcon": "The component used for the end scroll button icon.",
+    "flexContainer": "The component used for the flex container.",
+    "indicator": "The component used for the tab indicator.",
+    "root": "The component used for the popper.",
+    "scrollbar": "The component used for the scroller.",
+    "scrollButtons": "The component used for the scroll button.",
+    "scroller": "The component used for the scroller.",
+    "startScrollButtonIcon": "The component used for the start scroll button icon."
   }
 }

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -33,6 +33,7 @@ import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
 import transformTooltipProps from '../tooltip-props';
 import transformTablePaginationProps from '../table-pagination-props';
 import transformCardHeaderProps from '../card-header-props';
+import transformerTabsProps from '../tabs-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -74,6 +75,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformTooltipProps(file, api, options);
   file.source = transformTablePaginationProps(file, api, options);
   file.source = transformCardHeaderProps(file, api, options);
+  file.source = transformerTabsProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/tabs-props/index.js

@@ -0,0 +1 @@
+export { default } from './tabs-props';

packages/mui-codemod/src/deprecations/tabs-props/tabs-props.js

@@ -0,0 +1,34 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'Tabs',
+    propName: 'ScrollButtonComponent',
+    slotName: 'scrollButton',
+  });
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Tabs',
+    propName: 'TabScrollButtonProps',
+    slotName: 'scrollButton',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Tabs',
+    propName: 'TabIndicatorProps',
+    slotName: 'indicator',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/tabs-props/tabs-props.test.js

@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './tabs-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'tabs-props',
+      dirname: __dirname,
+      testCases: [
+        { actual: '/test-cases/actual.js', expected: '/test-cases/expected.js' },
+        { actual: '/test-cases/theme.actual.js', expected: '/test-cases/theme.expected.js' },
+      ],
+    });
+  });
+});

packages/mui-codemod/src/deprecations/tabs-props/test-cases/actual.js

@@ -0,0 +1,20 @@
+import Tabs from '@mui/material/Tabs';
+import { Tabs as MyTabs } from '@mui/material';
+
+<Tabs
+  ScrollButtonComponent={CustomScrollButton}
+  TabScrollButtonProps={{ disableRipple: true }}
+  TabIndicatorProps={{ className: 'indicator' }}
+/>;
+
+<MyTabs
+  ScrollButtonComponent={CustomScrollButton}
+  TabScrollButtonProps={{ disableRipple: true }}
+  TabIndicatorProps={{ className: 'indicator' }}
+/>;
+
+<CustomTabs
+  ScrollButtonComponent={CustomScrollButton}
+  TabScrollButtonProps={{ disableRipple: true }}
+  TabIndicatorProps={{ className: 'indicator' }}
+/>;