Skip to content

Commit

Permalink
[material-ui][Rating] Deprecate *Props and complete slots, slotProps (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
DiegoAndai authored Feb 27, 2025
1 parent 895be43 commit 85e3626
Show file tree
Hide file tree
Showing 15 changed files with 510 additions and 92 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -1925,6 +1925,25 @@ The Popper's prop `componentsProps` was deprecated in favor of `slotProps`:
/>
```

## Rating

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

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

### IconContainerComponent

The Rating's `IconContainerComponent` prop was deprecated in favor of `slotProps.icon.component`:

```diff
<Rating
- IconContainerComponent={CustomIconContainer}
+ slotProps={{ icon: { component: CustomIconContainer }}}
/>
```

## Select

Use the [codemod](/~https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#select-classes) below to migrate the code as described in the following sections:
Expand Down
66 changes: 42 additions & 24 deletions docs/pages/material-ui/api/rating.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
"icon": { "type": { "name": "node" }, "default": "<Star fontSize=\"inherit\" />" },
"IconContainerComponent": {
"type": { "name": "elementType" },
"default": "function IconContainer(props) {\n const { value, ...other } = props;\n return <span {...other} />;\n}"
"default": "function IconContainer(props) {\n const { value, ...other } = props;\n return <span {...other} />;\n}",
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.icon.component</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."
},
"max": { "type": { "name": "number" }, "default": "5" },
"name": { "type": { "name": "string" } },
Expand All @@ -42,6 +44,20 @@
},
"default": "'medium'"
},
"slotProps": {
"type": {
"name": "shape",
"description": "{ decimal?: func<br>&#124;&nbsp;object, icon?: func<br>&#124;&nbsp;object, label?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
},
"default": "{}"
},
"slots": {
"type": {
"name": "shape",
"description": "{ decimal?: elementType, icon?: elementType, label?: elementType, root?: elementType }"
},
"default": "{}"
},
"sx": {
"type": {
"name": "union",
Expand All @@ -56,13 +72,33 @@
"import Rating from '@mui/material/Rating';",
"import { Rating } from '@mui/material';"
],
"classes": [
"slots": [
{
"key": "decimal",
"className": "MuiRating-decimal",
"description": "Styles applied to the icon wrapping elements when decimals are necessary.",
"isGlobal": false
"name": "root",
"description": "The component used for the root slot.",
"default": "'span'",
"class": "MuiRating-root"
},
{
"name": "label",
"description": "The component used for the label slot.",
"default": "'label'",
"class": "MuiRating-label"
},
{
"name": "icon",
"description": "The component used for the icon slot.",
"default": "'span'",
"class": "MuiRating-icon"
},
{
"name": "decimal",
"description": "The component used fo r the decimal slot.",
"default": "'span'",
"class": "MuiRating-decimal"
}
],
"classes": [
{
"key": "disabled",
"className": "Mui-disabled",
Expand All @@ -75,12 +111,6 @@
"description": "State class applied to the root element if keyboard focused.",
"isGlobal": true
},
{
"key": "icon",
"className": "MuiRating-icon",
"description": "Styles applied to the icon wrapping elements.",
"isGlobal": false
},
{
"key": "iconActive",
"className": "MuiRating-iconActive",
Expand Down Expand Up @@ -111,12 +141,6 @@
"description": "Styles applied to the icon wrapping elements when hover.",
"isGlobal": false
},
{
"key": "label",
"className": "MuiRating-label",
"description": "Styles applied to the label elements.",
"isGlobal": false
},
{
"key": "labelEmptyValueActive",
"className": "MuiRating-labelEmptyValueActive",
Expand All @@ -129,12 +153,6 @@
"description": "Styles applied to the root element if `readOnly={true}`.",
"isGlobal": true
},
{
"key": "root",
"className": "MuiRating-root",
"description": "Styles applied to the root element.",
"isGlobal": false
},
{
"key": "sizeLarge",
"className": "MuiRating-sizeLarge",
Expand Down
19 changes: 8 additions & 11 deletions docs/translations/api-docs/rating/rating.json
Original file line number Diff line number Diff line change
Expand Up @@ -41,17 +41,14 @@
"precision": { "description": "The minimum increment value change allowed." },
"readOnly": { "description": "Removes all hover effects and pointer events." },
"size": { "description": "The size of the component." },
"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."
},
"value": { "description": "The rating value." }
},
"classDescriptions": {
"decimal": {
"description": "Styles applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the icon wrapping elements",
"conditions": "decimals are necessary"
},
"disabled": {
"description": "State class applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
Expand All @@ -62,10 +59,6 @@
"nodeName": "the root element",
"conditions": "keyboard focused"
},
"icon": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the icon wrapping elements"
},
"iconActive": {
"description": "Styles applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the icon wrapping elements",
Expand All @@ -91,7 +84,6 @@
"nodeName": "the icon wrapping elements",
"conditions": "hover"
},
"label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label elements" },
"labelEmptyValueActive": {
"description": "Styles applied to {{nodeName}} when {{conditions}}.",
"nodeName": "the label of the &quot;no value&quot; input",
Expand All @@ -102,7 +94,6 @@
"nodeName": "the root element",
"conditions": "<code>readOnly={true}</code>"
},
"root": { "description": "Styles applied to the root element." },
"sizeLarge": {
"description": "Styles applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
Expand All @@ -119,5 +110,11 @@
"conditions": "<code>size=\"small\"</code>"
},
"visuallyHidden": { "description": "Visually hide an element." }
},
"slotDescriptions": {
"decimal": "The component used fo r the decimal slot.",
"icon": "The component used for the icon slot.",
"label": "The component used for the label slot.",
"root": "The component used for the root slot."
}
}
15 changes: 15 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -1605,6 +1605,21 @@ npx @mui/codemod@latest deprecations/popper-props <path>
npx @mui/codemod@latest deprecations/outlined-input-props <path>
```

#### `rating-props`

```diff
<Snackbar
- IconContainerComponent={CustomContainer}
+ slots={{
+ icon: { component: CustomContainer }
+ }}
/>
```

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

#### `select-classes`

JS transforms:
Expand Down
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 @@ -42,6 +42,7 @@ import transformerTabsProps from '../tabs-props';
import transformerTabsClasses from '../tabs-classes';
import transformDrawerProps from '../drawer-props';
import transformMenuProps from '../menu-props';
import transformRatingProps from '../rating-props';

/**
* @param {import('jscodeshift').FileInfo} file
Expand Down Expand Up @@ -92,6 +93,7 @@ export default function deprecationsAll(file, api, options) {
file.source = transformerTabsClasses(file, api, options);
file.source = transformDrawerProps(file, api, options);
file.source = transformMenuProps(file, api, options);
file.source = transformRatingProps(file, api, options);

return file.source;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './rating-props';
21 changes: 21 additions & 0 deletions packages/mui-codemod/src/deprecations/rating-props/rating-props.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
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;

movePropIntoSlotProps(j, {
root,
componentName: 'Rating',
propName: 'IconContainerComponent',
slotName: 'icon',
slotPropName: 'component',
});

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 './rating-props';

describe('@mui/codemod', () => {
describe('deprecations', () => {
describeJscodeshiftTransform({
transform,
transformName: 'rating-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,28 @@
import Rating from '@mui/material/Rating';
import { Rating as MyRating } from '@mui/material';

<Rating IconContainerComponent={CustomIconContainer} />;
<MyRating IconContainerComponent={CustomIconContainer} />;
<Rating
IconContainerComponent={CustomIconContainer}
slots={{
root: 'div',
}}
/>;
<MyRating
IconContainerComponent={CustomIconContainer}
slots={{
...outerSlots,
}}
/>;
<Rating
IconContainerComponent={CustomIconContainer}
slotProps={{
icon: {
id: 'my-rating-icon',
},
}}
/>;

// should skip non MUI components
<NonMuiRating IconContainerComponent={CustomIconContainer} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import Rating from '@mui/material/Rating';
import { Rating as MyRating } from '@mui/material';

<Rating slotProps={{
icon: {
component: CustomIconContainer
}
}} />;
<MyRating slotProps={{
icon: {
component: CustomIconContainer
}
}} />;
<Rating
slots={{
root: 'div',
}}
slotProps={{
icon: {
component: CustomIconContainer
}
}}
/>;
<MyRating
slots={{
...outerSlots,
}}
slotProps={{
icon: {
component: CustomIconContainer
}
}}
/>;
<Rating
slotProps={{
icon: {
id: 'my-rating-icon',
component: CustomIconContainer
},
}} />;

// should skip non MUI components
<NonMuiRating IconContainerComponent={CustomIconContainer} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
fn({
MuiRating: {
defaultProps: {
IconContainerComponent: CustomContainer,
},
},
});

fn({
MuiRating: {
defaultProps: {
IconContainerComponent: CustomContainer,
slotProps: {
root: {},
},
},
},
});

fn({
MuiRating: {
defaultProps: {
IconContainerComponent: CustomContainer,
slotProps: {
icon: {
id: 'my-rating-icon',
},
},
},
},
});
Loading

0 comments on commit 85e3626

Please sign in to comment.