Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 37 commits into from
Nov 18, 2024
Merged
Show file tree
Hide file tree
Changes from 32 commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
beaef75
deprecate *Component and *Props
lhilgert9 May 2, 2024
03649bf
add codemod
lhilgert9 May 4, 2024
0879d75
add docs for deprecation
lhilgert9 May 4, 2024
67370a3
add test-cases
lhilgert9 May 4, 2024
64d66bf
update docs to not use deprecated apis
lhilgert9 May 4, 2024
710f3c0
fix popper apply className from slotsProps and PopperProps
lhilgert9 May 4, 2024
1d2463b
Merge remote-tracking branch 'upstream/next' into deprecate-tooltip-p…
lhilgert9 May 4, 2024
df9b984
fix popperOptions
lhilgert9 May 4, 2024
2d9ea98
pnpm docs:typescript:formatted
lhilgert9 May 4, 2024
77566bd
pnpm prettier
lhilgert9 May 4, 2024
b4f8457
fix externalForwardedProps working with components prop
lhilgert9 May 4, 2024
ee0d1f5
fix misspelling transition
lhilgert9 May 4, 2024
987be9a
migrate Tooltips.test.js to not use deprecated apis
lhilgert9 May 4, 2024
bb3007d
prettier
lhilgert9 May 4, 2024
a3bfdf8
Revert "migrate Tooltips.test.js to not use deprecated apis"
lhilgert9 May 7, 2024
12e084f
resolve SlotProps for popperOptions
lhilgert9 May 10, 2024
c76a3fc
pnpm prettier
lhilgert9 May 10, 2024
b7da024
pnpm proptypes
lhilgert9 May 10, 2024
f62066a
Merge remote-tracking branch 'upstream/next' into deprecate-tooltip-p…
lhilgert9 May 25, 2024
40c35e5
prettier
lhilgert9 May 25, 2024
5457455
Merge remote-tracking branch 'upstream/next' into deprecate-tooltip-p…
lhilgert9 May 30, 2024
eb3f24d
fix migrate-from-deprecated-apis
lhilgert9 May 30, 2024
9f398dc
Merge branch 'master' of https://github.com/mui/material-ui into depr…
siriwatknp Nov 8, 2024
74630db
restore
siriwatknp Nov 8, 2024
b42fe84
update Tooltip to use `useSlot`
siriwatknp Nov 8, 2024
afaf99d
revert unrelated change
siriwatknp Nov 8, 2024
07e7cd9
add test for slots and slotProps
siriwatknp Nov 8, 2024
7e3fd6d
Merge branch 'master' of https://github.com/mui/material-ui into depr…
siriwatknp Nov 8, 2024
2e44cee
run proptypes and docs:api
siriwatknp Nov 11, 2024
19caedc
Merge branch 'master' of https://github.com/mui/material-ui into depr…
siriwatknp Nov 14, 2024
ffe15aa
apply suggestion
siriwatknp Nov 14, 2024
ac68ee0
update conformance tests
siriwatknp Nov 14, 2024
768fa24
apply suggestion
siriwatknp Nov 15, 2024
bb874cc
run proptypes and docs:api
siriwatknp Nov 15, 2024
2db1eac
Merge branch 'master' of https://github.com/mui/material-ui into depr…
siriwatknp Nov 18, 2024
514a4e6
update slots name
siriwatknp Nov 18, 2024
2fcd5a2
fix indentation
siriwatknp Nov 18, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions docs/data/material/components/material-icons/SearchIcons.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)}>
Expand All @@ -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
Expand Down
22 changes: 12 additions & 10 deletions docs/data/material/components/tooltips/AnchorElTooltips.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
},
},
},
}}
Expand Down
22 changes: 12 additions & 10 deletions docs/data/material/components/tooltips/AnchorElTooltips.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
);
},
},
},
}}
Expand Down
15 changes: 12 additions & 3 deletions docs/data/material/components/tooltips/TransitionsTooltips.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
15 changes: 12 additions & 3 deletions docs/data/material/components/tooltips/TransitionsTooltips.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

This file was deleted.

8 changes: 5 additions & 3 deletions docs/data/material/components/tooltips/TriggersTooltips.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 5 additions & 3 deletions docs/data/material/components/tooltips/TriggersTooltips.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1580,6 +1580,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,
+ }}
/>
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
```

### \*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:
Expand Down
64 changes: 44 additions & 20 deletions docs/pages/material-ui/api/tooltip.json
Original file line number Diff line number Diff line change
Expand Up @@ -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. <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
},
"PopperProps": {
"type": { "name": "object" },
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the <code>slotProps.popper</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>."
},
"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": "{}"
},
Expand All @@ -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. <a href=\"https://mui.com/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
},
"TransitionProps": {
"type": { "name": "object" },
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the <code>slotProps.transition</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>."
}
},
"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",
Expand All @@ -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",
Expand Down
23 changes: 8 additions & 15 deletions docs/translations/api-docs/tooltip/tooltip.json
Original file line number Diff line number Diff line change
Expand Up @@ -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."
},
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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."
}
}
8 changes: 6 additions & 2 deletions packages-internal/test-utils/src/describeConformance.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,9 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
const renderedElement = queryByTestId('customized');
expect(renderedElement).not.to.equal(null);

expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
if (typeof slotElement === 'string') {
expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
}
if (slotOptions.expectedClassName) {
expect(renderedElement).to.have.class(slotOptions.expectedClassName);
}
Expand Down Expand Up @@ -425,7 +427,9 @@ function testSlotsProp(element: React.ReactElement<any>, getOptions: () => Confo
const renderedElement = queryByTestId('customized');
expect(renderedElement).not.to.equal(null);

expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
if (typeof slotElement === 'string') {
expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
}
if (slotOptions.expectedClassName) {
expect(renderedElement).to.have.class(slotOptions.expectedClassName);
}
Expand Down
Loading