[material-ui][Tooltip] Deprecate components and componentProps props for v6

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

@@ -1215,6 +1215,36 @@ All of the TextField's slot props (`*Props`) props were deprecated in favor of e
  />
 ```
 
+## Tooltip
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#tooltip-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/tooltip-props <path>
+```
+
+### components
+
+The Tooltip's prop `components` was deprecated in favor of `slots`:
+
+```diff
+ <Tooltip
+-  components={{ Arrow: CustomArrow }}
++  slots={{ arrow: CustomArrow }}
+ />
+```
+
+### componentsProps
+
+The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
+
+```diff
+ <Tooltip
+-  componentsProps={{ arrow: { testid: 'test-id' } }}
++  slotProps={{ arrow: { testid: 'test-id' } }}
+ />
+```
+
 ## StepLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:

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

@@ -8,14 +8,18 @@
         "name": "shape",
         "description": "{ Arrow?: elementType, Popper?: elementType, Tooltip?: elementType, Transition?: elementType }"
       },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "componentsProps": {
       "type": {
         "name": "shape",
         "description": "{ arrow?: object, popper?: object, tooltip?: object, transition?: object }"
       },
-      "default": "{}"
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
     },
     "describeChild": { "type": { "name": "bool" }, "default": "false" },
     "disableFocusListener": { "type": { "name": "bool" }, "default": "false" },

docs/translations/api-docs/tooltip/tooltip.json

@@ -4,11 +4,9 @@
     "arrow": { "description": "If <code>true</code>, adds an arrow to the tooltip." },
     "children": { "description": "Tooltip reference element.", "requiresRef": true },
     "classes": { "description": "Override or extend the styles applied to the component." },
-    "components": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead."
-    },
+    "components": { "description": "The components used for each slot inside." },
     "componentsProps": {
-      "description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
+      "description": "The extra props for the slot components. You can override the existing props or add new ones."
     },
     "describeChild": {
       "description": "Set to <code>true</code> if the <code>title</code> acts as an accessible description. By default the <code>title</code> acts as an accessible label for the child."

packages/mui-codemod/README.md

@@ -1121,6 +1121,32 @@ npx @mui/codemod@next deprecations/pagination-item-props <path>
 npx @mui/codemod@next deprecations/slider-props <path>
 ```
 
+#### `tooltip-props`
+
+```diff
+ <Tooltip
+-  components={{ Arrow: CustomArrow }}
++  slots={{ arrow: CustomArrow }}
+-  componentsProps={{ arrow: { testid: 'test-id' } }}
++  slotProps={{ arrow: { testid: 'test-id' } }}
+ />
+```
+
+```diff
+ MuiTooltip: {
+   defaultProps: {
+-    components: { Arrow: CustomArrow }
++    slots: { arrow: CustomArrow },
+-    componentsProps: { arrow: { testid: 'test-id' }}
++    slotProps: { arrow: { testid: 'test-id' } },
+  },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/tooltip-props <path>
+```
+
 #### `step-connector-classes`
 
 JS transforms:

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

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

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

@@ -0,0 +1,60 @@
+import Tooltip from '@mui/material/Tooltip';
+
+<Tooltip
+  components={{
+    Arrow: ComponentsArrow,
+    Popper: ComponentsPopper,
+    Tooltip: ComponentsTooltip,
+    Transition: ComponentsTransition
+  }}
+  componentsProps={{
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }}
+/>;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip }}
+  components={{ Arrow: ComponentsArrow }}
+  slotProps={{ tooltip: slotsTooltipProps }}
+  componentsProps={{ arrow: componentsArrowProps }}
+/>;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip, arrow: SlotsArrow }}
+  components={{ Arrow: ComponentsArrow }}
+  slotProps={{ tooltip: slotsTooltipProps, arrow: slotsArrowProps }}
+  componentsProps={{ arrow: componentsArrowProps }}
+/>;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip, arrow: SlotsArrow }}
+  components={{ Arrow: ComponentsArrow }}
+  slotProps={{ tooltip: slotsTooltipProps, arrow: slotsArrowProps }}
+  componentsProps={{ arrow: componentsArrowProps, tooltip: componentsTooltipProps}}
+/>;
+<Tooltip
+  slots={{
+    arrow: SlotsArrow,
+    popper: SlotsPopper,
+    tooltip: SlotsTooltip,
+    transition: SlotsTransition
+  }}
+  components={{
+    Arrow: ComponentsArrow,
+    Popper: ComponentsPopper,
+    Tooltip: ComponentsTooltip,
+    Transition: ComponentsTransition
+  }}
+  slotProps={{
+    arrow: slotsArrowProps,
+    popper: slotsPopperProps,
+    tooltip: slotsTooltipProps,
+    transition: slotsTransitionProps
+  }}
+  componentsProps={{
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }}
+/>;

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

@@ -0,0 +1,65 @@
+import Tooltip from '@mui/material/Tooltip';
+
+<Tooltip
+  slots={{
+    arrow: ComponentsArrow,
+    popper: ComponentsPopper,
+    tooltip: ComponentsTooltip,
+    transition: ComponentsTransition
+  }}
+  slotProps={{
+    arrow: componentsArrowProps,
+    popper: componentsPopperProps,
+    tooltip: componentsTooltipProps,
+    transition: componentsTransitionProps
+  }}
+/>;
+<Tooltip
+  slots={{
+    tooltip: SlotsTooltip,
+    arrow: ComponentsArrow
+  }}
+  slotProps={{
+    tooltip: slotsTooltipProps,
+    arrow: componentsArrowProps
+  }} />;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip, arrow: SlotsArrow }}
+  slotProps={{ tooltip: slotsTooltipProps, arrow: {
+    ...componentsArrowProps,
+    ...slotsArrowProps
+  } }} />;
+<Tooltip
+  slots={{ tooltip: SlotsTooltip, arrow: SlotsArrow }}
+  slotProps={{ arrow: {
+    ...componentsArrowProps,
+    ...slotsArrowProps
+  }, tooltip: {
+    ...componentsTooltipProps,
+    ...slotsTooltipProps
+  } }} />;
+<Tooltip
+  slots={{
+    arrow: SlotsArrow,
+    popper: SlotsPopper,
+    tooltip: SlotsTooltip,
+    transition: SlotsTransition
+  }}
+  slotProps={{
+    arrow: {
+      ...componentsArrowProps,
+      ...slotsArrowProps
+    },
+    popper: {
+      ...componentsPopperProps,
+      ...slotsPopperProps
+    },
+    tooltip: {
+      ...componentsTooltipProps,
+      ...slotsTooltipProps
+    },
+    transition: {
+      ...componentsTransitionProps,
+      ...slotsTransitionProps
+    }
+  }} />;

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

@@ -0,0 +1,41 @@
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: { Arrow: ComponentsArrow },
+      componentsProps: { arrow: componentsArrowProps },
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: { Arrow: ComponentsArrow },
+      slots: { tooltip: SlotsTooltip },
+      componentsProps: { arrow: componentsArrowProps },
+      slotProps: { tooltip: slotsTooltipProps },
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: { Arrow: ComponentsArrow },
+      slots: { tooltip: SlotsTooltip, arrow: SlotsArrow },
+      componentsProps: { arrow: componentsArrowProps },
+      slotProps: { tooltip: slotsTooltipProps, arrow: slotsArrowProps },
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      components: { Arrow: ComponentsArrow },
+      slots: { tooltip: SlotsTooltip, arrow: SlotsArrow },
+      componentsProps: { arrow: componentsArrowProps, tooltip: componentsTooltipProps },
+      slotProps: { tooltip: slotsTooltipProps, arrow: slotsArrowProps },
+    },
+  },
+});

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

@@ -0,0 +1,72 @@
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: ComponentsArrow
+      },
+
+      slotProps: {
+        arrow: componentsArrowProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: ComponentsArrow,
+        tooltip: SlotsTooltip
+      },
+
+      slotProps: {
+        arrow: componentsArrowProps,
+        tooltip: slotsTooltipProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: SlotsArrow,
+        tooltip: SlotsTooltip
+      },
+
+      slotProps: {
+        arrow: {
+          ...componentsArrowProps,
+          ...slotsArrowProps
+        },
+
+        tooltip: slotsTooltipProps
+      }
+    },
+  },
+});
+
+fn({
+  MuiTooltip: {
+    defaultProps: {
+      slots: {
+        arrow: SlotsArrow,
+        tooltip: SlotsTooltip
+      },
+
+      slotProps: {
+        arrow: {
+          ...componentsArrowProps,
+          ...slotsArrowProps
+        },
+
+        tooltip: {
+          ...componentsTooltipProps,
+          ...slotsTooltipProps
+        }
+      }
+    },
+  },
+});

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

@@ -0,0 +1,15 @@
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
+
+/**
+ * @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;
+
+  replaceComponentsWithSlots(j, { root, componentName: 'Tooltip' });
+
+  return root.toSource(printOptions);
+}

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

@@ -0,0 +1,16 @@
+import { describeJscodeshiftTransform } from '../../../testUtils';
+import transform from './tooltip-props';
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describeJscodeshiftTransform({
+      transform,
+      transformName: 'tooltip-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' },
+      ],
+    });
+  });
+});