[codemod] Add slot key rename to tabs-props codemod and add to README

docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md

@@ -883,6 +883,13 @@ The following deprecated props have been removed:
  />
 ```
 
+```diff
+ <Tabs
+-  slots={{ StartScrollButtonIcon: CustomIcon, EndScrollButtonIcon: CustomIcon2 }}
++  slots={{ startScrollButtonIcon: CustomIcon, endScrollButtonIcon: CustomIcon2 }}
+ />
+```
+
 #### TextField deprecated props removed
 
 Use the [text-field-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#text-field-props) below to migrate the code as described in the following section:

packages/mui-codemod/README.md

@@ -1950,6 +1950,49 @@ CSS transforms:
 npx @mui/codemod@next deprecations/slider-classes <path>
 ```
 
+#### `tabs-props`
+
+```diff
+ <Tabs
+-  ScrollButtonComponent={CustomScrollButton}
+-  TabIndicatorProps={{ className: 'indicator' }}
+-  TabScrollButtonProps={{ disableRipple: true }}
++  slots={{ scrollButtons: CustomScrollButton }}
++  slotProps={{
++    indicator: { className: 'indicator' },
++    scrollButtons: { disableRipple: true },
++  }}
+ />
+```
+
+```diff
+ <Tabs
+-  slots={{ StartScrollButtonIcon: CustomIcon, EndScrollButtonIcon: CustomIcon2 }}
++  slots={{ startScrollButtonIcon: CustomIcon, endScrollButtonIcon: CustomIcon2 }}
+ />
+```
+
+```diff
+ MuiTabs: {
+   defaultProps: {
+-    ScrollButtonComponent: CustomScrollButton,
+-    TabScrollButtonProps: { disableRipple: true },
+-    TabIndicatorProps: { className: 'indicator' },
++    slots: {
++      scrollButtons: CustomScrollButton,
++    },
++    slotProps: {
++      scrollButtons: { disableRipple: true },
++      indicator: { className: 'indicator' },
++    },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/tabs-props <path>
+```
+
 #### `tooltip-props`
 
 ```diff

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

@@ -1,5 +1,41 @@
 import movePropIntoSlots from '../utils/movePropIntoSlots';
 import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+import findComponentJSX from '../../util/findComponentJSX';
+import findComponentDefaultProps from '../../util/findComponentDefaultProps';
+
+const slotKeyRenames = {
+  StartScrollButtonIcon: 'startScrollButtonIcon',
+  EndScrollButtonIcon: 'endScrollButtonIcon',
+};
+
+function renameSlotKey(property) {
+  const name = property.key?.name || property.key?.value;
+  if (name && slotKeyRenames[name]) {
+    property.key.name = slotKeyRenames[name];
+  }
+}
+
+function renameJsxSlotKeys(j, element, attributeName) {
+  element.openingElement.attributes.forEach((attr) => {
+    if (
+      attr.type === 'JSXAttribute' &&
+      attr.name?.name === attributeName &&
+      attr.value?.expression?.type === 'ObjectExpression'
+    ) {
+      attr.value.expression.properties.forEach(renameSlotKey);
+    }
+  });
+}
+
+function renameDefaultPropsSlotKeys(j, defaultPropsPathCollection, attributeName) {
+  defaultPropsPathCollection
+    .find(j.ObjectProperty, { key: { name: attributeName } })
+    .forEach((path) => {
+      if (path.value.value.type === 'ObjectExpression') {
+        path.value.value.properties.forEach(renameSlotKey);
+      }
+    });
+}
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -33,5 +69,21 @@ export default function transformer(file, api, options) {
     slotName: 'indicator',
   });
 
+  findComponentJSX(
+    j,
+    { root, packageName: options.packageName, componentName: 'Tabs' },
+    (elementPath) => {
+      renameJsxSlotKeys(j, elementPath.node, 'slots');
+    },
+  );
+
+  const defaultPropsPathCollection = findComponentDefaultProps(j, {
+    root,
+    packageName: options.packageName,
+    componentName: 'Tabs',
+  });
+
+  renameDefaultPropsSlotKeys(j, defaultPropsPathCollection, 'slots');
+
   return root.toSource(printOptions);
 }

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

@@ -13,6 +13,14 @@ import { Tabs as MyTabs } from '@mui/material';
   TabIndicatorProps={{ className: 'indicator' }}
 />;
 
+<Tabs
+  slots={{ StartScrollButtonIcon: CustomIcon, EndScrollButtonIcon: CustomIcon2 }}
+/>;
+
+<MyTabs
+  slots={{ StartScrollButtonIcon: CustomIcon }}
+/>;
+
 <CustomTabs
   ScrollButtonComponent={CustomScrollButton}
   TabScrollButtonProps={{ disableRipple: true }}

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

@@ -19,6 +19,14 @@ import { Tabs as MyTabs } from '@mui/material';
     indicator: { className: 'indicator' }
   }} />;
 
+<Tabs
+  slots={{ startScrollButtonIcon: CustomIcon, endScrollButtonIcon: CustomIcon2 }}
+/>;
+
+<MyTabs
+  slots={{ startScrollButtonIcon: CustomIcon }}
+/>;
+
 <CustomTabs
   ScrollButtonComponent={CustomScrollButton}
   TabScrollButtonProps={{ disableRipple: true }}

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

@@ -13,6 +13,10 @@ import { Tabs as MyTabs } from '@org/ui/material';
   TabIndicatorProps={{ className: 'indicator' }}
 />;
 
+<Tabs
+  slots={{ StartScrollButtonIcon: CustomIcon, EndScrollButtonIcon: CustomIcon2 }}
+/>;
+
 <CustomTabs
   ScrollButtonComponent={CustomScrollButton}
   TabScrollButtonProps={{ disableRipple: true }}

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

@@ -19,6 +19,10 @@ import { Tabs as MyTabs } from '@org/ui/material';
     indicator: { className: 'indicator' }
   }} />;
 
+<Tabs
+  slots={{ startScrollButtonIcon: CustomIcon, endScrollButtonIcon: CustomIcon2 }}
+/>;
+
 <CustomTabs
   ScrollButtonComponent={CustomScrollButton}
   TabScrollButtonProps={{ disableRipple: true }}

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

@@ -7,3 +7,14 @@ fn({
     },
   },
 });
+
+fn({
+  MuiTabs: {
+    defaultProps: {
+      slots: {
+        StartScrollButtonIcon: CustomIcon,
+        EndScrollButtonIcon: CustomIcon2,
+      },
+    },
+  },
+});

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

@@ -12,3 +12,14 @@ fn({
     },
   },
 });
+
+fn({
+  MuiTabs: {
+    defaultProps: {
+      slots: {
+        startScrollButtonIcon: CustomIcon,
+        endScrollButtonIcon: CustomIcon2,
+      },
+    },
+  },
+});