Skip to content

Commit

Permalink
[material-ui][Popover] Deprecate *Props and complete slots, `slotPr…
Browse files Browse the repository at this point in the history
…ops` (#45035)
  • Loading branch information
siriwatknp authored Jan 24, 2025
1 parent bc2337f commit 3c9e995
Show file tree
Hide file tree
Showing 18 changed files with 486 additions and 86 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1693,6 +1693,69 @@ The PaginationItems's `components` prop was deprecated in favor of `slots`:
/>
```

## Popover

Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#popover-props) below to migrate the code as described in the following sections:

```bash
npx @mui/codemod@latest deprecations/popover-props <path>
```

### BackdropComponent

The Popover's `BackdropComponent` prop was deprecated in favor of `slots.backdrop`:

```diff
<Popover
- BackdropComponent={Backdrop}
+ slots={{ backdrop: Backdrop }}
>
```

### BackdropProps

The Popover's `BackdropProps` prop was deprecated in favor of `slotProps.backdrop`:

```diff
<Popover
- BackdropProps={{ timeout: 500 }}
+ slotProps={{ backdrop: { timeout: 500 } }}
>
```

### PaperProps

The Popover's `PaperProps` prop was deprecated in favor of `slotProps.paper`:

```diff
<Popover
- PaperProps={{ id: 'paper-id' }}
+ slotProps={{ paper: { id: 'paper-id' } }}
>
```

### TransitionComponent

The Popover's `TransitionComponent` prop was deprecated in favor of `slots.transition`:

```diff
<Popover
- TransitionComponent={Transition}
+ slots={{ transition: Transition }}
>
```

### TransitionProps

The Popover's `TransitionProps` prop was deprecated in favor of `slotProps.transition`:

```diff
<Popover
- TransitionProps={{ timeout: 500 }}
+ slotProps={{ transition: { timeout: 500 } }}
>
```

## Popper

Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#popper-props) below to migrate the code as described in the following sections:
Expand Down
7 changes: 5 additions & 2 deletions docs/pages/material-ui/api/menu.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,15 @@
"slotProps": {
"type": {
"name": "shape",
"description": "{ paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
"description": "{ backdrop?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
},
"default": "{}"
},
"slots": {
"type": { "name": "shape", "description": "{ paper?: elementType, root?: elementType }" },
"type": {
"name": "shape",
"description": "{ backdrop?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
},
"default": "{}"
},
"sx": {
Expand Down
51 changes: 43 additions & 8 deletions docs/pages/material-ui/api/popover.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@
"type": { "name": "elementType" },
"default": "styled(Backdrop, {\n name: 'MuiModal',\n slot: 'Backdrop',\n overridesResolver: (props, styles) => {\n return styles.backdrop;\n },\n})({\n zIndex: -1,\n})",
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.root.slots.backdrop</code> instead. While this prop currently works, it will be removed in the next major version."
"deprecationInfo": "Use <code>slots.backdrop</code> 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."
},
"BackdropProps": {
"type": { "name": "object" },
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.root.slotProps.backdrop</code> instead."
"deprecationInfo": "Use <code>slotProps.backdrop</code> 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."
},
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
Expand All @@ -47,12 +47,15 @@
"slotProps": {
"type": {
"name": "shape",
"description": "{ paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
"description": "{ backdrop?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
},
"default": "{}"
},
"slots": {
"type": { "name": "shape", "description": "{ paper?: elementType, root?: elementType }" },
"type": {
"name": "shape",
"description": "{ backdrop?: elementType, paper?: elementType, root?: elementType, transition?: elementType }"
},
"default": "{}"
},
"sx": {
Expand All @@ -69,24 +72,56 @@
},
"default": "{\n vertical: 'top',\n horizontal: 'left',\n}"
},
"TransitionComponent": { "type": { "name": "elementType" }, "default": "Grow" },
"TransitionComponent": {
"type": { "name": "elementType" },
"default": "Grow",
"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."
},
"transitionDuration": {
"type": {
"name": "union",
"description": "'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
},
"default": "'auto'"
},
"TransitionProps": { "type": { "name": "object" }, "default": "{}" }
"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": "Popover",
"imports": [
"import Popover from '@mui/material/Popover';",
"import { Popover } from '@mui/material';"
],
"slots": [
{ "name": "root", "description": "", "class": "MuiPopover-root" },
{ "name": "paper", "description": "", "class": "MuiPopover-paper" }
{
"name": "root",
"description": "The component used for the root slot.",
"default": "Modal",
"class": "MuiPopover-root"
},
{
"name": "paper",
"description": "The component used for the paper slot.",
"default": "Paper",
"class": "MuiPopover-paper"
},
{
"name": "transition",
"description": "The component used for the transition slot.",
"default": "Grow",
"class": null
},
{
"name": "backdrop",
"description": "The component used for the backdrop slot.",
"default": "Backdrop",
"class": null
}
],
"classes": [],
"spread": true,
Expand Down
7 changes: 6 additions & 1 deletion docs/translations/api-docs/popover/popover.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,5 +58,10 @@
}
},
"classDescriptions": {},
"slotDescriptions": { "paper": "", "root": "" }
"slotDescriptions": {
"backdrop": "The component used for the backdrop slot.",
"paper": "The component used for the paper slot.",
"root": "The component used for the root slot.",
"transition": "The component used for the transition slot."
}
}
2 changes: 2 additions & 0 deletions packages/mui-codemod/src/deprecations/all/deprecations-all.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
import transformTooltipProps from '../tooltip-props';
import transformTablePaginationProps from '../table-pagination-props';
import transformCardHeaderProps from '../card-header-props';
import transformPopoverProps from '../popover-props';

/**
* @param {import('jscodeshift').FileInfo} file
Expand Down Expand Up @@ -74,6 +75,7 @@ export default function deprecationsAll(file, api, options) {
file.source = transformTooltipProps(file, api, options);
file.source = transformTablePaginationProps(file, api, options);
file.source = transformCardHeaderProps(file, api, options);
file.source = transformPopoverProps(file, api, options);

return file.source;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './popover-props';
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
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: 'Popover',
propName: 'BackdropComponent',
slotName: 'backdrop',
});

movePropIntoSlotProps(j, {
root,
componentName: 'Popover',
propName: 'BackdropProps',
slotName: 'backdrop',
});

movePropIntoSlotProps(j, {
root,
componentName: 'Popover',
propName: 'PaperProps',
slotName: 'paper',
});

movePropIntoSlots(j, {
root,
componentName: 'Popover',
propName: 'TransitionComponent',
slotName: 'transition',
});

movePropIntoSlotProps(j, {
root,
componentName: 'Popover',
propName: 'TransitionProps',
slotName: 'transition',
});

return root.toSource(printOptions);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { describeJscodeshiftTransform } from '../../../testUtils';
import transform from './popover-props';

describe('@mui/codemod', () => {
describe('deprecations', () => {
describeJscodeshiftTransform({
transform,
transformName: 'popover-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' },
],
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import Popover from '@mui/material/Popover';
import { Popover as MyPopover } from '@mui/material';

<Popover
BackdropComponent={CustomBackdrop}
BackdropProps={{ timeout: 200 }}
PaperProps={{ elevation: 4 }}
TransitionComponent={CustomTransition}
TransitionProps={{ timeout: 200 }}
/>;

<Popover
BackdropComponent={CustomBackdrop}
BackdropProps={{ timeout: 200 }}
PaperProps={{ elevation: 4 }}
TransitionComponent={CustomTransition}
TransitionProps={{ timeout: 200 }}
slotProps={{
backdrop: { sx: { backgroundColor: 'red' } },
paper: { sx: { backgroundColor: 'blue' } },
transition: { onEnter: () => {} },
}}
/>;

<MyPopover
BackdropComponent={CustomBackdrop}
BackdropProps={{ timeout: 200 }}
PaperProps={{ elevation: 4 }}
TransitionComponent={CustomTransition}
TransitionProps={{ timeout: 200 }}
/>;

<CustomPopover
BackdropComponent={CustomBackdrop}
BackdropProps={{ timeout: 200 }}
PaperProps={{ elevation: 4 }}
TransitionComponent={CustomTransition}
TransitionProps={{ timeout: 200 }}
/>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import Popover from '@mui/material/Popover';
import { Popover as MyPopover } from '@mui/material';

<Popover
slots={{
backdrop: CustomBackdrop,
transition: CustomTransition
}}
slotProps={{
backdrop: { timeout: 200 },
paper: { elevation: 4 },
transition: { timeout: 200 }
}} />;

<Popover
slotProps={{
backdrop: {
...{ timeout: 200 },
...{ sx: { backgroundColor: 'red' } }
},
paper: {
...{ elevation: 4 },
...{ sx: { backgroundColor: 'blue' } }
},
transition: {
...{ timeout: 200 },
...{ onEnter: () => {} }
},
}}
slots={{
backdrop: CustomBackdrop,
transition: CustomTransition
}} />;

<MyPopover
slots={{
backdrop: CustomBackdrop,
transition: CustomTransition
}}
slotProps={{
backdrop: { timeout: 200 },
paper: { elevation: 4 },
transition: { timeout: 200 }
}} />;

<CustomPopover
BackdropComponent={CustomBackdrop}
BackdropProps={{ timeout: 200 }}
PaperProps={{ elevation: 4 }}
TransitionComponent={CustomTransition}
TransitionProps={{ timeout: 200 }}
/>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
fn({
MuiPopover: {
defaultProps: {
BackdropComponent: 'div',
BackdropProps: { timeout: 200 },
PaperProps: { elevation: 8 },
TransitionComponent: 'em',
TransitionProps: { timeout: 200 },
},
},
});
Loading

0 comments on commit 3c9e995

Please sign in to comment.