Skip to content

Commit 7f04342

Browse files
sai6855DiegoAndai
sai6855
and
DiegoAndai
authored
[material-ui][StepContent] Add slots and slotProps (#44742)
Signed-off-by: sai chand <[email protected]> Co-authored-by: Diego Andai <[email protected]>
1 parent e165016 commit 7f04342

File tree

15 files changed

+369
-25
lines changed

15 files changed

+369
-25
lines changed

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

+30
Original file line numberDiff line numberDiff line change
@@ -1868,6 +1868,36 @@ Here's how to migrate:
18681868
},
18691869
```
18701870

1871+
## StepContent
1872+
1873+
Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-content-props) below to migrate the code as described in the following sections:
1874+
1875+
```bash
1876+
npx @mui/codemod@latest deprecations/step-content-props <path>
1877+
```
1878+
1879+
### TransitionComponent
1880+
1881+
The StepContent's `TransitionComponent` prop was deprecated in favor of `slots.transition`:
1882+
1883+
```diff
1884+
<StepContent
1885+
- TransitionComponent={CustomTransition}
1886+
+ slots={{ transition: CustomTransition }}
1887+
/>
1888+
```
1889+
1890+
### TransitionProps
1891+
1892+
The StepContent's `TransitionProps` prop was deprecated in favor of `slotProps.transition`:
1893+
1894+
```diff
1895+
<StepContent
1896+
- TransitionProps={{ unmountOnExit: true }}
1897+
+ slotProps={{ transition: { unmountOnExit: true } }}
1898+
/>
1899+
```
1900+
18711901
## SpeedDial
18721902

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

‎docs/pages/material-ui/api/step-content.json

+27-8
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,53 @@
22
"props": {
33
"children": { "type": { "name": "node" } },
44
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
5+
"slotProps": {
6+
"type": { "name": "shape", "description": "{ transition?: func<br>&#124;&nbsp;object }" },
7+
"default": "{}"
8+
},
9+
"slots": {
10+
"type": { "name": "shape", "description": "{ transition?: elementType }" },
11+
"default": "{}"
12+
},
513
"sx": {
614
"type": {
715
"name": "union",
816
"description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
917
},
1018
"additionalInfo": { "sx": true }
1119
},
12-
"TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" },
20+
"TransitionComponent": {
21+
"type": { "name": "elementType" },
22+
"default": "Collapse",
23+
"deprecated": true,
24+
"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>."
25+
},
1326
"transitionDuration": {
1427
"type": {
1528
"name": "union",
1629
"description": "'auto'<br>&#124;&nbsp;number<br>&#124;&nbsp;{ appear?: number, enter?: number, exit?: number }"
1730
},
1831
"default": "'auto'"
1932
},
20-
"TransitionProps": { "type": { "name": "object" } }
33+
"TransitionProps": {
34+
"type": { "name": "object" },
35+
"deprecated": true,
36+
"deprecationInfo": "Use <code>slotProps.transition</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
37+
}
2138
},
2239
"name": "StepContent",
2340
"imports": [
2441
"import StepContent from '@mui/material/StepContent';",
2542
"import { StepContent } from '@mui/material';"
2643
],
44+
"slots": [
45+
{
46+
"name": "transition",
47+
"description": "The component that renders the transition slot.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
48+
"default": "Collapse",
49+
"class": "MuiStepContent-transition"
50+
}
51+
],
2752
"classes": [
2853
{
2954
"key": "last",
@@ -36,12 +61,6 @@
3661
"className": "MuiStepContent-root",
3762
"description": "Styles applied to the root element.",
3863
"isGlobal": false
39-
},
40-
{
41-
"key": "transition",
42-
"className": "MuiStepContent-transition",
43-
"description": "Styles applied to the Transition component.",
44-
"isGlobal": false
4564
}
4665
],
4766
"spread": true,

‎docs/translations/api-docs/step-content/step-content.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"propDescriptions": {
44
"children": { "description": "The content of the component." },
55
"classes": { "description": "Override or extend the styles applied to the component." },
6+
"slotProps": { "description": "The props used for each slot inside." },
7+
"slots": { "description": "The components used for each slot inside." },
68
"sx": {
79
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
810
},
@@ -22,10 +24,9 @@
2224
"nodeName": "the root element",
2325
"conditions": "<code>last={true}</code> (controlled by <code>Step</code>)"
2426
},
25-
"root": { "description": "Styles applied to the root element." },
26-
"transition": {
27-
"description": "Styles applied to {{nodeName}}.",
28-
"nodeName": "the Transition component"
29-
}
27+
"root": { "description": "Styles applied to the root element." }
28+
},
29+
"slotDescriptions": {
30+
"transition": "The component that renders the transition slot. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
3031
}
3132
}

‎packages/mui-codemod/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -1509,6 +1509,21 @@ JS transforms:
15091509
npx @mui/codemod@next deprecations/step-connector-classes <path>
15101510
```
15111511

1512+
#### `step-content-props`
1513+
1514+
```diff
1515+
<StepContent
1516+
- TransitionComponent={CustomTransition}
1517+
- TransitionProps={{ unmountOnExit: true }}
1518+
+ slots={{ transition: CustomTransition }}
1519+
+ slotProps={{ transition: { unmountOnExit: true } }}
1520+
/>
1521+
```
1522+
1523+
```bash
1524+
npx @mui/codemod@latest deprecations/step-content-props <path>
1525+
```
1526+
15121527
#### `step-label-props`
15131528

15141529
```diff

‎packages/mui-codemod/src/deprecations/all/deprecations-all.js

+2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import transformPaginationItemClasses from '../pagination-item-classes';
2222
import transformSpeedDialProps from '../speed-dial-props';
2323
import transformTableSortLabelClasses from '../table-sort-label-classes';
2424
import transformStepConnectorClasses from '../step-connector-classes';
25+
import transformStepContentProps from '../step-content-props';
2526
import transformStepLabelProps from '../step-label-props';
2627
import transformTextFieldProps from '../text-field-props';
2728
import transformTabClasses from '../tab-classes';
@@ -56,6 +57,7 @@ export default function deprecationsAll(file, api, options) {
5657
file.source = transformPaginationItemClasses(file, api, options);
5758
file.source = transformSpeedDialProps(file, api, options);
5859
file.source = transformStepConnectorClasses(file, api, options);
60+
file.source = transformStepContentProps(file, api, options);
5961
file.source = transformStepLabelProps(file, api, options);
6062
file.source = transformTableSortLabelClasses(file, api, options);
6163
file.source = transformTextFieldProps(file, api, options);

‎packages/mui-codemod/src/deprecations/step-content-props/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './step-content-props';

‎packages/mui-codemod/src/deprecations/step-content-props/step-content-props.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import movePropIntoSlots from '../utils/movePropIntoSlots';
2+
import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
3+
4+
/**
5+
* @param {import('jscodeshift').FileInfo} file
6+
* @param {import('jscodeshift').API} api
7+
*/
8+
export default function transformer(file, api, options) {
9+
const j = api.jscodeshift;
10+
const root = j(file.source);
11+
const printOptions = options.printOptions;
12+
13+
movePropIntoSlots(j, {
14+
root,
15+
componentName: 'StepContent',
16+
propName: 'TransitionComponent',
17+
slotName: 'transition',
18+
});
19+
20+
movePropIntoSlotProps(j, {
21+
root,
22+
componentName: 'StepContent',
23+
propName: 'TransitionProps',
24+
slotName: 'transition',
25+
});
26+
27+
return root.toSource(printOptions);
28+
}

‎packages/mui-codemod/src/deprecations/step-content-props/step-content-props.test.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import path from 'path';
2+
import { expect } from 'chai';
3+
import { jscodeshift } from '../../../testUtils';
4+
import transform from './step-content-props';
5+
import readFile from '../../util/readFile';
6+
7+
function read(fileName) {
8+
return readFile(path.join(__dirname, fileName));
9+
}
10+
11+
describe('@mui/codemod', () => {
12+
describe('deprecations', () => {
13+
describe('step-content-props', () => {
14+
it('transforms props as needed', () => {
15+
const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
16+
17+
const expected = read('./test-cases/expected.js');
18+
expect(actual).to.equal(expected, 'The transformed version should be correct');
19+
});
20+
21+
it('should be idempotent', () => {
22+
const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
23+
24+
const expected = read('./test-cases/expected.js');
25+
expect(actual).to.equal(expected, 'The transformed version should be correct');
26+
});
27+
});
28+
29+
describe('[theme] step-content-props', () => {
30+
it('transforms props as needed', () => {
31+
const actual = transform(
32+
{ source: read('./test-cases/theme.actual.js') },
33+
{ jscodeshift },
34+
{},
35+
);
36+
37+
const expected = read('./test-cases/theme.expected.js');
38+
expect(actual).to.equal(expected, 'The transformed version should be correct');
39+
});
40+
41+
it('should be idempotent', () => {
42+
const actual = transform(
43+
{ source: read('./test-cases/theme.expected.js') },
44+
{ jscodeshift },
45+
{},
46+
);
47+
48+
const expected = read('./test-cases/theme.expected.js');
49+
expect(actual).to.equal(expected, 'The transformed version should be correct');
50+
});
51+
});
52+
});
53+
});

‎packages/mui-codemod/src/deprecations/step-content-props/test-cases/actual.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import StepContent from '@mui/material/StepContent';
2+
import { StepContent as MyStepContent } from '@mui/material';
3+
4+
<StepContent TransitionComponent={CustomTransition} TransitionProps={{ unmountOnExit: true }} />;
5+
<MyStepContent TransitionComponent={CustomTransition} TransitionProps={transitionVars} />;
6+
<StepContent
7+
TransitionComponent={CustomTransition}
8+
TransitionProps={{ unmountOnExit: true }}
9+
slots={{
10+
root: 'div',
11+
}}
12+
slotProps={{
13+
root: { className: 'foo' },
14+
}}
15+
/>;
16+
<MyStepContent
17+
TransitionComponent={CustomTransition}
18+
TransitionProps={{ unmountOnExit: true }}
19+
slots={{
20+
...outerSlots,
21+
}}
22+
slotProps={{
23+
...outerSlotProps,
24+
}}
25+
/>;
26+
<StepContent TransitionComponent={ComponentTransition} slots={{ transition: SlotTransition }} />;
27+
<StepContent TransitionProps={{ unmountOnExit: true }} slotProps={{ transition: { id: 'test' } }} />;
28+
// should skip non MUI components
29+
<NonMuiStepContent
30+
TransitionComponent={CustomTransition}
31+
TransitionProps={{ unmountOnExit: true }}
32+
/>;

‎packages/mui-codemod/src/deprecations/step-content-props/test-cases/expected.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import StepContent from '@mui/material/StepContent';
2+
import { StepContent as MyStepContent } from '@mui/material';
3+
4+
<StepContent slots={{
5+
transition: CustomTransition
6+
}} slotProps={{
7+
transition: { unmountOnExit: true }
8+
}} />;
9+
<MyStepContent slots={{
10+
transition: CustomTransition
11+
}} slotProps={{
12+
transition: transitionVars
13+
}} />;
14+
<StepContent
15+
slots={{
16+
root: 'div',
17+
transition: CustomTransition
18+
}}
19+
slotProps={{
20+
root: { className: 'foo' },
21+
transition: { unmountOnExit: true }
22+
}} />;
23+
<MyStepContent
24+
slots={{
25+
...outerSlots,
26+
transition: CustomTransition
27+
}}
28+
slotProps={{
29+
...outerSlotProps,
30+
transition: { unmountOnExit: true }
31+
}} />;
32+
<StepContent slots={{ transition: SlotTransition }} />;
33+
<StepContent
34+
slotProps={{ transition: {
35+
...{ unmountOnExit: true },
36+
...{ id: 'test' }
37+
} }} />;
38+
// should skip non MUI components
39+
<NonMuiStepContent
40+
TransitionComponent={CustomTransition}
41+
TransitionProps={{ unmountOnExit: true }}
42+
/>;

‎packages/mui-codemod/src/deprecations/step-content-props/test-cases/theme.actual.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
fn({
2+
MuiStepContent: {
3+
defaultProps: {
4+
TransitionComponent: CustomTransition,
5+
TransitionProps: { unmountOnExit: true },
6+
},
7+
},
8+
});
9+
10+
fn({
11+
MuiStepContent: {
12+
defaultProps: {
13+
TransitionComponent: ComponentTransition,
14+
slots: { transition: SlotTransition },
15+
},
16+
},
17+
});
18+
19+
fn({
20+
MuiStepContent: {
21+
defaultProps: {
22+
slotProps: { transition: { id: 'test' } },
23+
TransitionProps: { unmountOnExit: true },
24+
},
25+
},
26+
});

‎packages/mui-codemod/src/deprecations/step-content-props/test-cases/theme.expected.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
fn({
2+
MuiStepContent: {
3+
defaultProps: {
4+
slots: {
5+
transition: CustomTransition
6+
},
7+
8+
slotProps: {
9+
transition: { unmountOnExit: true }
10+
}
11+
},
12+
},
13+
});
14+
15+
fn({
16+
MuiStepContent: {
17+
defaultProps: {
18+
slots: { transition: SlotTransition }
19+
},
20+
},
21+
});
22+
23+
fn({
24+
MuiStepContent: {
25+
defaultProps: {
26+
slotProps: { transition: {
27+
...{ unmountOnExit: true },
28+
...{ id: 'test' }
29+
} }
30+
},
31+
},
32+
});

0 commit comments

Comments
 (0)