Skip to content

Commit 7781a01

Browse files
siriwatknpsiriwatknp
authored
[Tooltip] Deprecate *Component and *Props for v6 (#44350)
1 parent d153daa commit 7781a01

File tree

23 files changed

+675
-209
lines changed

23 files changed

+675
-209
lines changed

‎docs/data/material/components/material-icons/SearchIcons.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -376,8 +376,10 @@ const DialogDetails = React.memo(function DialogDetails(props) {
376376
<Tooltip
377377
placement="right"
378378
title={copied1 ? t('copied') : t('clickToCopy')}
379-
TransitionProps={{
380-
onExited: () => setCopied1(false),
379+
slotProps={{
380+
transition: {
381+
onExited: () => setCopied1(false),
382+
},
381383
}}
382384
>
383385
<Title component="span" variant="inherit" onClick={handleClick(1)}>
@@ -388,7 +390,9 @@ const DialogDetails = React.memo(function DialogDetails(props) {
388390
<Tooltip
389391
placement="top"
390392
title={copied2 ? t('copied') : t('clickToCopy')}
391-
TransitionProps={{ onExited: () => setCopied2(false) }}
393+
slotProps={{
394+
transition: { onExited: () => setCopied2(false) },
395+
}}
392396
>
393397
<Markdown
394398
copyButtonHidden

‎docs/data/material/components/tooltips/AnchorElTooltips.js

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,18 @@ export default function AnchorElTooltips() {
2323
title="Add"
2424
placement="top"
2525
arrow
26-
PopperProps={{
27-
popperRef,
28-
anchorEl: {
29-
getBoundingClientRect: () => {
30-
return new DOMRect(
31-
positionRef.current.x,
32-
areaRef.current.getBoundingClientRect().y,
33-
0,
34-
0,
35-
);
26+
slotProps={{
27+
popper: {
28+
popperRef,
29+
anchorEl: {
30+
getBoundingClientRect: () => {
31+
return new DOMRect(
32+
positionRef.current.x,
33+
areaRef.current.getBoundingClientRect().y,
34+
0,
35+
0,
36+
);
37+
},
3638
},
3739
},
3840
}}

‎docs/data/material/components/tooltips/AnchorElTooltips.tsx

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,18 @@ export default function AnchorElTooltips() {
2424
title="Add"
2525
placement="top"
2626
arrow
27-
PopperProps={{
28-
popperRef,
29-
anchorEl: {
30-
getBoundingClientRect: () => {
31-
return new DOMRect(
32-
positionRef.current.x,
33-
areaRef.current!.getBoundingClientRect().y,
34-
0,
35-
0,
36-
);
27+
slotProps={{
28+
popper: {
29+
popperRef,
30+
anchorEl: {
31+
getBoundingClientRect: () => {
32+
return new DOMRect(
33+
positionRef.current.x,
34+
areaRef.current!.getBoundingClientRect().y,
35+
0,
36+
0,
37+
);
38+
},
3739
},
3840
},
3941
}}

‎docs/data/material/components/tooltips/TransitionsTooltips.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,22 @@ export default function TransitionsTooltips() {
1111
<Button>Grow</Button>
1212
</Tooltip>
1313
<Tooltip
14-
TransitionComponent={Fade}
15-
TransitionProps={{ timeout: 600 }}
1614
title="Add"
15+
slots={{
16+
transition: Fade,
17+
}}
18+
slotProps={{
19+
transition: { timeout: 600 },
20+
}}
1721
>
1822
<Button>Fade</Button>
1923
</Tooltip>
20-
<Tooltip TransitionComponent={Zoom} title="Add">
24+
<Tooltip
25+
title="Add"
26+
slots={{
27+
transition: Zoom,
28+
}}
29+
>
2130
<Button>Zoom</Button>
2231
</Tooltip>
2332
</div>

‎docs/data/material/components/tooltips/TransitionsTooltips.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,22 @@ export default function TransitionsTooltips() {
1111
<Button>Grow</Button>
1212
</Tooltip>
1313
<Tooltip
14-
TransitionComponent={Fade}
15-
TransitionProps={{ timeout: 600 }}
1614
title="Add"
15+
slots={{
16+
transition: Fade,
17+
}}
18+
slotProps={{
19+
transition: { timeout: 600 },
20+
}}
1721
>
1822
<Button>Fade</Button>
1923
</Tooltip>
20-
<Tooltip TransitionComponent={Zoom} title="Add">
24+
<Tooltip
25+
title="Add"
26+
slots={{
27+
transition: Zoom,
28+
}}
29+
>
2130
<Button>Zoom</Button>
2231
</Tooltip>
2332
</div>

‎docs/data/material/components/tooltips/TransitionsTooltips.tsx.preview

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎docs/data/material/components/tooltips/TriggersTooltips.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,17 @@ export default function TriggersTooltips() {
3737
<ClickAwayListener onClickAway={handleTooltipClose}>
3838
<div>
3939
<Tooltip
40-
PopperProps={{
41-
disablePortal: true,
42-
}}
4340
onClose={handleTooltipClose}
4441
open={open}
4542
disableFocusListener
4643
disableHoverListener
4744
disableTouchListener
4845
title="Add"
46+
slotProps={{
47+
popper: {
48+
disablePortal: true,
49+
},
50+
}}
4951
>
5052
<Button onClick={handleTooltipOpen}>Click</Button>
5153
</Tooltip>

‎docs/data/material/components/tooltips/TriggersTooltips.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,17 @@ export default function TriggersTooltips() {
3737
<ClickAwayListener onClickAway={handleTooltipClose}>
3838
<div>
3939
<Tooltip
40-
PopperProps={{
41-
disablePortal: true,
42-
}}
4340
onClose={handleTooltipClose}
4441
open={open}
4542
disableFocusListener
4643
disableHoverListener
4744
disableTouchListener
4845
title="Add"
46+
slotProps={{
47+
popper: {
48+
disablePortal: true,
49+
},
50+
}}
4951
>
5052
<Button onClick={handleTooltipOpen}>Click</Button>
5153
</Tooltip>

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1687,6 +1687,36 @@ The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
16871687
/>
16881688
```
16891689

1690+
### \*Component props
1691+
1692+
All of the Tooltip's slot (`*Component`) props were deprecated in favor of equivalent `slots` entries:
1693+
1694+
```diff
1695+
<Tooltip
1696+
- PopperComponent={CustomPopperComponent}
1697+
- TransitionComponent={CustomTransitionComponent}
1698+
+ slots={{
1699+
+ popper: CustomPopperComponent,
1700+
+ transition: CustomTransitionComponent,
1701+
+ }}
1702+
/>
1703+
```
1704+
1705+
### \*Props props
1706+
1707+
All of the Tooltip's slot props (`*Props`) props were deprecated in favor of equivalent `slotProps` entries:
1708+
1709+
```diff
1710+
<Tooltip
1711+
- PopperProps={CustomPopperProps}
1712+
- TransitionProps={CustomTransitionProps}
1713+
+ slotProps={{
1714+
+ popper: CustomPopperProps,
1715+
+ transition: CustomTransitionProps,
1716+
+ }}
1717+
/>
1718+
```
1719+
16901720
## Typography
16911721

16921722
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:

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

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
},
1111
"default": "{}",
1212
"deprecated": true,
13-
"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>."
13+
"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."
1414
},
1515
"componentsProps": {
1616
"type": {
@@ -19,7 +19,7 @@
1919
},
2020
"default": "{}",
2121
"deprecated": true,
22-
"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>."
22+
"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."
2323
},
2424
"describeChild": { "type": { "name": "bool" }, "default": "false" },
2525
"disableFocusListener": { "type": { "name": "bool" }, "default": "false" },
@@ -55,12 +55,21 @@
5555
},
5656
"default": "'bottom'"
5757
},
58-
"PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" },
59-
"PopperProps": { "type": { "name": "object" }, "default": "{}" },
58+
"PopperComponent": {
59+
"type": { "name": "elementType" },
60+
"deprecated": true,
61+
"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."
62+
},
63+
"PopperProps": {
64+
"type": { "name": "object" },
65+
"default": "{}",
66+
"deprecated": true,
67+
"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."
68+
},
6069
"slotProps": {
6170
"type": {
6271
"name": "shape",
63-
"description": "{ arrow?: object, popper?: object, tooltip?: object, transition?: object }"
72+
"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 }"
6473
},
6574
"default": "{}"
6675
},
@@ -79,27 +88,48 @@
7988
"additionalInfo": { "sx": true }
8089
},
8190
"title": { "type": { "name": "node" } },
82-
"TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
83-
"TransitionProps": { "type": { "name": "object" } }
91+
"TransitionComponent": {
92+
"type": { "name": "elementType" },
93+
"deprecated": true,
94+
"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."
95+
},
96+
"TransitionProps": {
97+
"type": { "name": "object" },
98+
"default": "{}",
99+
"deprecated": true,
100+
"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."
101+
}
84102
},
85103
"name": "Tooltip",
86104
"imports": [
87105
"import Tooltip from '@mui/material/Tooltip';",
88106
"import { Tooltip } from '@mui/material';"
89107
],
90-
"classes": [
108+
"slots": [
91109
{
92-
"key": "arrow",
93-
"className": "MuiTooltip-arrow",
94-
"description": "Styles applied to the arrow element.",
95-
"isGlobal": false
110+
"name": "popper",
111+
"description": "The component used for the popper.",
112+
"default": "Popper",
113+
"class": "MuiTooltip-popper"
96114
},
97115
{
98-
"key": "popper",
99-
"className": "MuiTooltip-popper",
100-
"description": "Styles applied to the Popper component.",
101-
"isGlobal": false
116+
"name": "transition",
117+
"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.",
118+
"default": "Grow",
119+
"class": null
120+
},
121+
{
122+
"name": "tooltip",
123+
"description": "The component used for the tooltip.",
124+
"class": "MuiTooltip-tooltip"
102125
},
126+
{
127+
"name": "arrow",
128+
"description": "The component used for the arrow.",
129+
"class": "MuiTooltip-arrow"
130+
}
131+
],
132+
"classes": [
103133
{
104134
"key": "popperArrow",
105135
"className": "MuiTooltip-popperArrow",
@@ -118,12 +148,6 @@
118148
"description": "Styles applied to the Popper component unless `disableInteractive={true}`.",
119149
"isGlobal": false
120150
},
121-
{
122-
"key": "tooltip",
123-
"className": "MuiTooltip-tooltip",
124-
"description": "Styles applied to the tooltip (label wrapper) element.",
125-
"isGlobal": false
126-
},
127151
{
128152
"key": "tooltipArrow",
129153
"className": "MuiTooltip-tooltipArrow",

0 commit comments

Comments
 (0)