[Tooltip] Deprecate *Component and *Props for v6 (#44350)

mui · Nov 18, 2024 · 7781a01 · 7781a01
1 parent d153daa
commit 7781a01
Show file tree

Hide file tree

Showing 23 changed files with 675 additions and 209 deletions.
diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
@@ -376,8 +376,10 @@ const DialogDetails = React.memo(function DialogDetails(props) {
             <Tooltip
               placement="right"
               title={copied1 ? t('copied') : t('clickToCopy')}
-              TransitionProps={{
-                onExited: () => setCopied1(false),
+              slotProps={{
+                transition: {
+                  onExited: () => setCopied1(false),
+                },
               }}
             >
               <Title component="span" variant="inherit" onClick={handleClick(1)}>
@@ -388,7 +390,9 @@ const DialogDetails = React.memo(function DialogDetails(props) {
           <Tooltip
             placement="top"
             title={copied2 ? t('copied') : t('clickToCopy')}
-            TransitionProps={{ onExited: () => setCopied2(false) }}
+            slotProps={{
+              transition: { onExited: () => setCopied2(false) },
+            }}
           >
             <Markdown
               copyButtonHidden

diff --git a/docs/data/material/components/tooltips/AnchorElTooltips.js b/docs/data/material/components/tooltips/AnchorElTooltips.js
@@ -23,16 +23,18 @@ export default function AnchorElTooltips() {
       title="Add"
       placement="top"
       arrow
-      PopperProps={{
-        popperRef,
-        anchorEl: {
-          getBoundingClientRect: () => {
-            return new DOMRect(
-              positionRef.current.x,
-              areaRef.current.getBoundingClientRect().y,
-              0,
-              0,
-            );
+      slotProps={{
+        popper: {
+          popperRef,
+          anchorEl: {
+            getBoundingClientRect: () => {
+              return new DOMRect(
+                positionRef.current.x,
+                areaRef.current.getBoundingClientRect().y,
+                0,
+                0,
+              );
+            },
           },
         },
       }}

diff --git a/docs/data/material/components/tooltips/AnchorElTooltips.tsx b/docs/data/material/components/tooltips/AnchorElTooltips.tsx
@@ -24,16 +24,18 @@ export default function AnchorElTooltips() {
       title="Add"
       placement="top"
       arrow
-      PopperProps={{
-        popperRef,
-        anchorEl: {
-          getBoundingClientRect: () => {
-            return new DOMRect(
-              positionRef.current.x,
-              areaRef.current!.getBoundingClientRect().y,
-              0,
-              0,
-            );
+      slotProps={{
+        popper: {
+          popperRef,
+          anchorEl: {
+            getBoundingClientRect: () => {
+              return new DOMRect(
+                positionRef.current.x,
+                areaRef.current!.getBoundingClientRect().y,
+                0,
+                0,
+              );
+            },
           },
         },
       }}

diff --git a/docs/data/material/components/tooltips/TransitionsTooltips.js b/docs/data/material/components/tooltips/TransitionsTooltips.js
@@ -11,13 +11,22 @@ export default function TransitionsTooltips() {
         <Button>Grow</Button>
       </Tooltip>
       <Tooltip
-        TransitionComponent={Fade}
-        TransitionProps={{ timeout: 600 }}
         title="Add"
+        slots={{
+          transition: Fade,
+        }}
+        slotProps={{
+          transition: { timeout: 600 },
+        }}
       >
         <Button>Fade</Button>
       </Tooltip>
-      <Tooltip TransitionComponent={Zoom} title="Add">
+      <Tooltip
+        title="Add"
+        slots={{
+          transition: Zoom,
+        }}
+      >
         <Button>Zoom</Button>
       </Tooltip>
     </div>

diff --git a/docs/data/material/components/tooltips/TransitionsTooltips.tsx b/docs/data/material/components/tooltips/TransitionsTooltips.tsx
@@ -11,13 +11,22 @@ export default function TransitionsTooltips() {
         <Button>Grow</Button>
       </Tooltip>
       <Tooltip
-        TransitionComponent={Fade}
-        TransitionProps={{ timeout: 600 }}
         title="Add"
+        slots={{
+          transition: Fade,
+        }}
+        slotProps={{
+          transition: { timeout: 600 },
+        }}
       >
         <Button>Fade</Button>
       </Tooltip>
-      <Tooltip TransitionComponent={Zoom} title="Add">
+      <Tooltip
+        title="Add"
+        slots={{
+          transition: Zoom,
+        }}
+      >
         <Button>Zoom</Button>
       </Tooltip>
     </div>

diff --git a/docs/data/material/components/tooltips/TransitionsTooltips.tsx.preview b/docs/data/material/components/tooltips/TransitionsTooltips.tsx.preview
diff --git a/docs/data/material/components/tooltips/TriggersTooltips.js b/docs/data/material/components/tooltips/TriggersTooltips.js
@@ -37,15 +37,17 @@ export default function TriggersTooltips() {
           <ClickAwayListener onClickAway={handleTooltipClose}>
             <div>
               <Tooltip
-                PopperProps={{
-                  disablePortal: true,
-                }}
                 onClose={handleTooltipClose}
                 open={open}
                 disableFocusListener
                 disableHoverListener
                 disableTouchListener
                 title="Add"
+                slotProps={{
+                  popper: {
+                    disablePortal: true,
+                  },
+                }}
               >
                 <Button onClick={handleTooltipOpen}>Click</Button>
               </Tooltip>

diff --git a/docs/data/material/components/tooltips/TriggersTooltips.tsx b/docs/data/material/components/tooltips/TriggersTooltips.tsx
@@ -37,15 +37,17 @@ export default function TriggersTooltips() {
           <ClickAwayListener onClickAway={handleTooltipClose}>
             <div>
               <Tooltip
-                PopperProps={{
-                  disablePortal: true,
-                }}
                 onClose={handleTooltipClose}
                 open={open}
                 disableFocusListener
                 disableHoverListener
                 disableTouchListener
                 title="Add"
+                slotProps={{
+                  popper: {
+                    disablePortal: true,
+                  },
+                }}
               >
                 <Button onClick={handleTooltipOpen}>Click</Button>
               </Tooltip>

diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -1687,6 +1687,36 @@ The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
  />
 ```
 
+### \*Component props
+
+All of the Tooltip's slot (`*Component`) props were deprecated in favor of equivalent `slots` entries:
+
+```diff
+ <Tooltip
+-  PopperComponent={CustomPopperComponent}
+-  TransitionComponent={CustomTransitionComponent}
++  slots={{
++    popper: CustomPopperComponent,
++    transition: CustomTransitionComponent,
++  }}
+ />
+```
+
+### \*Props props
+
+All of the Tooltip's slot props (`*Props`) props were deprecated in favor of equivalent `slotProps` entries:
+
+```diff
+ <Tooltip
+-  PopperProps={CustomPopperProps}
+-  TransitionProps={CustomTransitionProps}
++  slotProps={{
++    popper: CustomPopperProps,
++    transition: CustomTransitionProps,
++  }}
+ />
+```
+
 ## Typography
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#typography-props) below to migrate the code as described in the following sections:

diff --git a/docs/pages/material-ui/api/tooltip.json b/docs/pages/material-ui/api/tooltip.json
@@ -10,7 +10,7 @@
       },
       "default": "{}",
       "deprecated": true,
-      "deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+      "deprecationInfo": "use the <code>slots</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."
     },
     "componentsProps": {
       "type": {
@@ -19,7 +19,7 @@
       },
       "default": "{}",
       "deprecated": true,
-      "deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+      "deprecationInfo": "use the <code>slotProps</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."
     },
     "describeChild": { "type": { "name": "bool" }, "default": "false" },
     "disableFocusListener": { "type": { "name": "bool" }, "default": "false" },
@@ -55,12 +55,21 @@
       },
       "default": "'bottom'"
     },
-    "PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" },
-    "PopperProps": { "type": { "name": "object" }, "default": "{}" },
+    "PopperComponent": {
+      "type": { "name": "elementType" },
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots.popper</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."
+    },
+    "PopperProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.popper</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."
+    },
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ arrow?: object, popper?: object, tooltip?: object, transition?: object }"
+        "description": "{ arrow?: func<br>&#124;&nbsp;object, popper?: func<br>&#124;&nbsp;object, tooltip?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
@@ -79,27 +88,48 @@
       "additionalInfo": { "sx": true }
     },
     "title": { "type": { "name": "node" } },
-    "TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
-    "TransitionProps": { "type": { "name": "object" } }
+    "TransitionComponent": {
+      "type": { "name": "elementType" },
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slots.transition</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."
+    },
+    "TransitionProps": {
+      "type": { "name": "object" },
+      "default": "{}",
+      "deprecated": true,
+      "deprecationInfo": "use the <code>slotProps.transition</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."
+    }
   },
   "name": "Tooltip",
   "imports": [
     "import Tooltip from '@mui/material/Tooltip';",
     "import { Tooltip } from '@mui/material';"
   ],
-  "classes": [
+  "slots": [
     {
-      "key": "arrow",
-      "className": "MuiTooltip-arrow",
-      "description": "Styles applied to the arrow element.",
-      "isGlobal": false
+      "name": "popper",
+      "description": "The component used for the popper.",
+      "default": "Popper",
+      "class": "MuiTooltip-popper"
     },
     {
-      "key": "popper",
-      "className": "MuiTooltip-popper",
-      "description": "Styles applied to the Popper component.",
-      "isGlobal": false
+      "name": "transition",
+      "description": "The component used for the transition.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Grow",
+      "class": null
+    },
+    {
+      "name": "tooltip",
+      "description": "The component used for the tooltip.",
+      "class": "MuiTooltip-tooltip"
     },
+    {
+      "name": "arrow",
+      "description": "The component used for the arrow.",
+      "class": "MuiTooltip-arrow"
+    }
+  ],
+  "classes": [
     {
       "key": "popperArrow",
       "className": "MuiTooltip-popperArrow",
@@ -118,12 +148,6 @@
       "description": "Styles applied to the Popper component unless `disableInteractive={true}`.",
       "isGlobal": false
     },
-    {
-      "key": "tooltip",
-      "className": "MuiTooltip-tooltip",
-      "description": "Styles applied to the tooltip (label wrapper) element.",
-      "isGlobal": false
-    },
     {
       "key": "tooltipArrow",
       "className": "MuiTooltip-tooltipArrow",

diff --git a/docs/translations/api-docs/tooltip/tooltip.json b/docs/translations/api-docs/tooltip/tooltip.json
@@ -52,12 +52,8 @@
     "PopperProps": {
       "description": "Props applied to the <a href=\"https://mui.com/material-ui/api/popper/\"><code>Popper</code></a> element."
     },
-    "slotProps": {
-      "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>componentsProps</code> prop, which will be deprecated in the future."
-    },
-    "slots": {
-      "description": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future."
-    },
+    "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."
     },
@@ -72,11 +68,6 @@
     }
   },
   "classDescriptions": {
-    "arrow": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the arrow element" },
-    "popper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Popper component"
-    },
     "popperArrow": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the Popper component",
@@ -92,10 +83,6 @@
       "nodeName": "the Popper component",
       "conditions": "<code>disableInteractive={true}</code>"
     },
-    "tooltip": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the tooltip (label wrapper) element"
-    },
     "tooltipArrow": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the tooltip (label wrapper) element",
@@ -126,5 +113,11 @@
       "nodeName": "the tooltip (label wrapper) element",
       "conditions": "the tooltip is opened by touch"
     }
+  },
+  "slotDescriptions": {
+    "arrow": "The component used for the arrow.",
+    "popper": "The component used for the popper.",
+    "tooltip": "The component used for the tooltip.",
+    "transition": "The component used for the transition. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }