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

[material-ui][SpeedDial] Deprecate TransitionComponent #40698

Merged
merged 21 commits into from
May 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -1093,3 +1093,32 @@ Here's how to migrate:
},
},
```

## SpeedDial

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

```bash
npx @mui/codemod@next deprecations/speed-dial-props <path>
```

### TransitionComponent

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

```diff
<SpeedDial
- TransitionComponent={CustomTransition}
+ slots={{ transition: CustomTransition }}
```

### TransitionProps

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

```diff
<SpeedDial
- TransitionProps={{ unmountOnExit: true }}
+ slotProps={{ transition: { unmountOnExit: true } }}
/>
```
29 changes: 27 additions & 2 deletions docs/pages/material-ui/api/speed-dial.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,28 +29,53 @@
},
"open": { "type": { "name": "bool" } },
"openIcon": { "type": { "name": "node" } },
"slotProps": {
"type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
"default": "{}"
},
"slots": {
"type": { "name": "shape", "description": "{ transition?: elementType }" },
"default": "{}"
},
"sx": {
"type": {
"name": "union",
"description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
},
"additionalInfo": { "sx": true }
},
"TransitionComponent": { "type": { "name": "elementType" }, "default": "Zoom" },
"TransitionComponent": {
"type": { "name": "elementType" },
"default": "Zoom\n* @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)",
"deprecated": true,
"deprecationInfo": "Use <code>slots.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
},
"transitionDuration": {
"type": {
"name": "union",
"description": "number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
},
"default": "{\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen,\n}"
},
"TransitionProps": { "type": { "name": "object" } }
"TransitionProps": {
"type": { "name": "object" },
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>"
}
},
"name": "SpeedDial",
"imports": [
"import SpeedDial from '@mui/material/SpeedDial';",
"import { SpeedDial } from '@mui/material';"
],
"slots": [
{
"name": "transition",
"description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
"default": "{}",
"class": null
}
],
"classes": [
{
"key": "actions",
Expand Down
5 changes: 5 additions & 0 deletions docs/translations/api-docs/speed-dial/speed-dial.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
"openIcon": {
"description": "The icon to display in the SpeedDial Fab when the SpeedDial is open."
},
"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 Down Expand Up @@ -73,5 +75,8 @@
},
"fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" },
"root": { "description": "Styles applied to the root element." }
},
"slotDescriptions": {
"transition": "The component that renders the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
}
}
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 @@ -12,6 +12,7 @@ import transformToggleButtonGroupClasses from '../toggle-button-group-classes';
import transformStepLabelProps from '../step-label-props';
import transformBackdropProps from '../backdrop-props';
import transformStepConnectorClasses from '../step-connector-classes';
import transformSpeedDialProps from '../speed-dial-props';

/**
* @param {import('jscodeshift').FileInfo} file
Expand All @@ -32,6 +33,7 @@ export default function deprecationsAll(file, api, options) {
file.source = transformStepLabelProps(file, api, options);
file.source = transformBackdropProps(file, api, options);
file.source = transformStepConnectorClasses(file, api, options);
file.source = transformSpeedDialProps(file, api, options);

return file.source;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './speed-dial-props';
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
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: 'SpeedDial',
propName: 'TransitionComponent',
slotName: 'transition',
});

harry-whorlow marked this conversation as resolved.
Show resolved Hide resolved
movePropIntoSlotProps(j, {
root,
componentName: 'SpeedDial',
propName: 'TransitionProps',
slotName: 'transition',
});

return root.toSource(printOptions);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import path from 'path';
import { expect } from 'chai';
import { jscodeshift } from '../../../testUtils';
import transform from './speed-dial-props';
import readFile from '../../util/readFile';

function read(fileName) {
return readFile(path.join(__dirname, fileName));
}

describe('@mui/codemod', () => {
describe('deprecations', () => {
describe('speed-dial-props', () => {
it('transforms props as needed', () => {
const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});

const expected = read('./test-cases/expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});

it('should be idempotent', () => {
const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});

const expected = read('./test-cases/expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});
});

describe('[theme] speed-dial-props', () => {
it('transforms props as needed', () => {
const actual = transform(
{ source: read('./test-cases/theme.actual.js') },
{ jscodeshift },
{},
);

const expected = read('./test-cases/theme.expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});

it('should be idempotent', () => {
const actual = transform(
{ source: read('./test-cases/theme.expected.js') },
{ jscodeshift },
{},
);

const expected = read('./test-cases/theme.expected.js');
expect(actual).to.equal(expected, 'The transformed version should be correct');
});
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import SpeedDial from '@mui/material/SpeedDial';
import { SpeedDial as MySpeedDial } from '@mui/material';

<SpeedDial TransitionComponent={CustomTransition} TransitionProps={CustomTransitionProps} />;
<MySpeedDial TransitionComponent={CustomTransition} TransitionProps={CustomTransitionProps} />;
<SpeedDial
TransitionComponent={CustomTransition}
TransitionProps={CustomTransitionProps}
slots={{
root: 'div',
}}
/>;
<MySpeedDial
TransitionComponent={CustomTransition}
TransitionProps={CustomTransitionProps}
slots={{
...outerSlots,
}}
/>;
<SpeedDial
TransitionComponent={ComponentTransition}
TransitionProps={CustomTransitionProps}
slots={{
root: 'div',
transition: SlotTransition,
}}
/>;
// should skip non MUI components
<NonMuiSpeedDial TransitionComponent={CustomTransition} TransitionProps={CustomTransitionProps} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import SpeedDial from '@mui/material/SpeedDial';
import { SpeedDial as MySpeedDial } from '@mui/material';

<SpeedDial slots={{
transition: CustomTransition
}} slotProps={{
transition: CustomTransitionProps
}} />;
<MySpeedDial slots={{
transition: CustomTransition
}} slotProps={{
transition: CustomTransitionProps
}} />;
<SpeedDial
slots={{
root: 'div',
transition: CustomTransition
}}
slotProps={{
transition: CustomTransitionProps
}} />;
<MySpeedDial
slots={{
...outerSlots,
transition: CustomTransition
}}
slotProps={{
transition: CustomTransitionProps
}} />;
<SpeedDial
slots={{
root: 'div',
transition: SlotTransition,
}}
slotProps={{
transition: CustomTransitionProps
}} />;
// should skip non MUI components
<NonMuiSpeedDial TransitionComponent={CustomTransition} TransitionProps={CustomTransitionProps} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
fn({
MuiSpeedDial: {
defaultProps: {
TransitionComponent: CustomTransition,
TransitionProps: CustomTransitionProps,
},
},
});

fn({
MuiSpeedDial: {
defaultProps: {
TransitionComponent: CustomTransition,
TransitionProps: CustomTransitionProps,
slots: {
root: 'div',
},
},
},
});

fn({
MuiSpeedDial: {
defaultProps: {
TransitionComponent: ComponentTransition,
TransitionProps: CustomTransitionProps,
slots: {
root: 'div',
transition: SlotTransition,
},
},
},
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
fn({
MuiSpeedDial: {
defaultProps: {
slots: {
transition: CustomTransition
},

slotProps: {
transition: CustomTransitionProps
}
},
},
});

fn({
MuiSpeedDial: {
defaultProps: {
slots: {
root: 'div',
transition: CustomTransition
},

slotProps: {
transition: CustomTransitionProps
}
},
},
});

fn({
MuiSpeedDial: {
defaultProps: {
slots: {
root: 'div',
transition: SlotTransition,
},

slotProps: {
transition: CustomTransitionProps
}
},
},
});
Loading
Loading