[material-ui][SpeedDial] Deprecate TransitionComponent

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

@@ -1093,3 +1093,21 @@ Here's how to migrate:
    },
  },
 ```
+
+## SpeedDial
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#speed-dial-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/speed-dial-props <path>
+```
+
+### TransitionComponent
+
+The SpeedDial's `TransitionComponent` prop was deprecated in favor of `slots.transition`:
+
+```diff
+ <Slider
+-  TransitionComponent={CustomTransition}
++  slots={{ transition: CustomTransition }}
+```

docs/pages/material-ui/api/speed-dial.json

@@ -29,28 +29,53 @@
     },
     "open": { "type": { "name": "bool" } },
     "openIcon": { "type": { "name": "node" } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ transition?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
         "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
       },
       "additionalInfo": { "sx": true }
     },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Zoom" },
+    "TransitionComponent": {
+      "type": { "name": "elementType" },
+      "default": "Zoom\n* @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
+    },
     "transitionDuration": {
       "type": {
         "name": "union",
         "description": "number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
       },
       "default": "{\n  enter: theme.transitions.duration.enteringScreen,\n  exit: theme.transitions.duration.leavingScreen,\n}"
     },
-    "TransitionProps": { "type": { "name": "object" } }
+    "TransitionProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
+    }
   },
   "name": "SpeedDial",
   "imports": [
     "import SpeedDial from '@mui/material/SpeedDial';",
     "import { SpeedDial } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "transition",
+      "description": "The component that renders the transition.\n[Follow this guide](/material-ui/speedDial/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "{}",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "actions",

docs/translations/api-docs/speed-dial/speed-dial.json

@@ -36,6 +36,8 @@
     "openIcon": {
       "description": "The icon to display in the SpeedDial Fab when the SpeedDial is open."
     },
+    "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."
     },
@@ -46,7 +48,7 @@
       "description": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object."
     },
     "TransitionProps": {
-      "description": "Props applied to the transition element. By default, the element is based on this <a href=\"https://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
+      "description": "Props applied to the transition element. By default, the element is based on this <a href=\"http://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
     }
   },
   "classDescriptions": {
@@ -73,5 +75,8 @@
     },
     "fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" },
     "root": { "description": "Styles applied to the root element." }
+  },
+  "slotDescriptions": {
+    "transition": "The component that renders the transition. <a href=\"/material-ui/speedDial/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

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

@@ -12,6 +12,7 @@ import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
 import transformStepLabelProps from '../step-label-props';
 import transformBackdropProps from '../backdrop-props';
 import transformStepConnectorClasses from '../step-connector-classes';
+import transformSpeedDialProps from '../speed-dial-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -32,6 +33,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformStepLabelProps(file, api, options);
   file.source = transformBackdropProps(file, api, options);
   file.source = transformStepConnectorClasses(file, api, options);
+  file.source = transformSpeedDialProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/speed-dial-props/index.js

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

packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js

@@ -0,0 +1,28 @@
+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: 'SpeedDial',
+    propName: 'TransitionComponent',
+    slotName: 'transition',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'SpeedDial',
+    propName: 'TransitionProps',
+    slotName: 'transition',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.test.js

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './speed-dial-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('speed-dial-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] speed-dial-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

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

@@ -0,0 +1,29 @@
+import SpeedDial from '@mui/material/SpeedDial';
+import { SpeedDial as MySpeedDial } from '@mui/material';
+
+<SpeedDial TransitionComponent={CustomTransition} TransitionProps={CustomTransitionProps} />;
+<MySpeedDial TransitionComponent={CustomTransition} TransitionProps={CustomTransitionProps} />;
+<SpeedDial
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  slots={{
+    root: 'div',
+  }}
+/>;
+<MySpeedDial
+  TransitionComponent={CustomTransition}
+  TransitionProps={CustomTransitionProps}
+  slots={{
+    ...outerSlots,
+  }}
+/>;
+<SpeedDial
+  TransitionComponent={ComponentTransition}
+  TransitionProps={CustomTransitionProps}
+  slots={{
+    root: 'div',
+    transition: SlotTransition,
+  }}
+/>;
+// should skip non MUI components
+<NonMuiSpeedDial TransitionComponent={CustomTransition} TransitionProps={CustomTransitionProps} />;

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

@@ -0,0 +1,39 @@
+import SpeedDial from '@mui/material/SpeedDial';
+import { SpeedDial as MySpeedDial } from '@mui/material';
+
+<SpeedDial slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: CustomTransitionProps
+}} />;
+<MySpeedDial slots={{
+  transition: CustomTransition
+}} slotProps={{
+  transition: CustomTransitionProps
+}} />;
+<SpeedDial
+  slots={{
+    root: 'div',
+    transition: CustomTransition
+  }}
+  slotProps={{
+    transition: CustomTransitionProps
+  }} />;
+<MySpeedDial
+  slots={{
+    ...outerSlots,
+    transition: CustomTransition
+  }}
+  slotProps={{
+    transition: CustomTransitionProps
+  }} />;
+<SpeedDial
+  slots={{
+    root: 'div',
+    transition: SlotTransition,
+  }}
+  slotProps={{
+    transition: CustomTransitionProps
+  }} />;
+// should skip non MUI components
+<NonMuiSpeedDial TransitionComponent={CustomTransition} TransitionProps={CustomTransitionProps} />;

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

@@ -0,0 +1,33 @@
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps,
+    },
+  },
+});
+
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      TransitionComponent: CustomTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div',
+      },
+    },
+  },
+});
+
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      TransitionComponent: ComponentTransition,
+      TransitionProps: CustomTransitionProps,
+      slots: {
+        root: 'div',
+        transition: SlotTransition,
+      },
+    },
+  },
+});

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

@@ -0,0 +1,43 @@
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      slots: {
+        transition: CustomTransition
+      },
+
+      slotProps: {
+        transition: CustomTransitionProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: CustomTransition
+      },
+
+      slotProps: {
+        transition: CustomTransitionProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiSpeedDial: {
+    defaultProps: {
+      slots: {
+        root: 'div',
+        transition: SlotTransition,
+      },
+
+      slotProps: {
+        transition: CustomTransitionProps
+      }
+    },
+  },
+});