diff --git a/docs/data/material/components/rating/RadioGroupRating.js b/docs/data/material/components/rating/RadioGroupRating.js index fc319e4cfbe1be..85c3440441fc58 100644 --- a/docs/data/material/components/rating/RadioGroupRating.js +++ b/docs/data/material/components/rating/RadioGroupRating.js @@ -51,8 +51,8 @@ export default function RadioGroupRating() { customIcons[value].label} + slotProps={{ icon: { component: IconContainer } }} highlightSelectedOnly /> ); diff --git a/docs/data/material/components/rating/RadioGroupRating.tsx b/docs/data/material/components/rating/RadioGroupRating.tsx index 89a509e2d0effe..b707fbc6684462 100644 --- a/docs/data/material/components/rating/RadioGroupRating.tsx +++ b/docs/data/material/components/rating/RadioGroupRating.tsx @@ -51,8 +51,8 @@ export default function RadioGroupRating() { customIcons[value].label} + slotProps={{ icon: { component: IconContainer } }} highlightSelectedOnly /> ); diff --git a/docs/data/material/components/rating/RadioGroupRating.tsx.preview b/docs/data/material/components/rating/RadioGroupRating.tsx.preview index 7f6157e8748ded..264aa41d532cb5 100644 --- a/docs/data/material/components/rating/RadioGroupRating.tsx.preview +++ b/docs/data/material/components/rating/RadioGroupRating.tsx.preview @@ -1,7 +1,7 @@ customIcons[value].label} + slotProps={{ icon: { component: IconContainer } }} highlightSelectedOnly /> \ No newline at end of file diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index bd803083f560ec..e07f92b15d25f4 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -1314,6 +1314,25 @@ The following deprecated props have been removed: /> ``` +#### Rating deprecated props removed + +Use the [rating-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#rating-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/rating-props +``` + +The following deprecated prop has been removed: + +- `IconContainerComponent` — use `slotProps.icon.component` instead + +```diff + +``` + #### Switch deprecated props removed Use the [switch-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#switch-props) below to migrate the code as described in the following section: diff --git a/docs/pages/material-ui/api/rating.json b/docs/pages/material-ui/api/rating.json index a76ccf0fb060a4..13ed0f22cd2658 100644 --- a/docs/pages/material-ui/api/rating.json +++ b/docs/pages/material-ui/api/rating.json @@ -13,12 +13,6 @@ }, "highlightSelectedOnly": { "type": { "name": "bool" }, "default": "false" }, "icon": { "type": { "name": "node" }, "default": "" }, - "IconContainerComponent": { - "type": { "name": "elementType" }, - "default": "function IconContainer(props) {\n const { value, ...other } = props;\n return ;\n}", - "deprecated": true, - "deprecationInfo": "Use slotProps.icon.component instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "max": { "type": { "name": "number" }, "default": "5" }, "name": { "type": { "name": "string" } }, "onChange": { diff --git a/docs/translations/api-docs/rating/rating.json b/docs/translations/api-docs/rating/rating.json index 510d6dbcdaa02e..720ebad5da60fd 100644 --- a/docs/translations/api-docs/rating/rating.json +++ b/docs/translations/api-docs/rating/rating.json @@ -21,7 +21,6 @@ "description": "If true, only the selected icon will be highlighted." }, "icon": { "description": "The icon to display." }, - "IconContainerComponent": { "description": "The component containing the icon." }, "max": { "description": "Maximum rating." }, "name": { "description": "The name attribute of the radio input elements. This input name should be unique within the page. Being unique within a form is insufficient since the name is used to generate IDs." diff --git a/packages/mui-material/src/Rating/Rating.d.ts b/packages/mui-material/src/Rating/Rating.d.ts index 1cee6f5a18b2a2..6172e073961379 100644 --- a/packages/mui-material/src/Rating/Rating.d.ts +++ b/packages/mui-material/src/Rating/Rating.d.ts @@ -113,15 +113,6 @@ export interface RatingOwnProps extends RatingSlotsAndSlotProps { * @default */ icon?: React.ReactNode; - /** - * The component containing the icon. - * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * @default function IconContainer(props) { - * const { value, ...other } = props; - * return ; - * } - */ - IconContainerComponent?: React.ElementType | undefined; /** * Maximum rating. * @default 5 diff --git a/packages/mui-material/src/Rating/Rating.js b/packages/mui-material/src/Rating/Rating.js index be58700fdd5a34..48633d7922008d 100644 --- a/packages/mui-material/src/Rating/Rating.js +++ b/packages/mui-material/src/Rating/Rating.js @@ -223,7 +223,6 @@ function RatingItem(props) { highlightSelectedOnly, hover, icon, - IconContainerComponent, isActive, itemValue, labelProps, @@ -278,9 +277,7 @@ function RatingItem(props) { value: itemValue, }, internalForwardedProps: { - // TODO: remove this in v7 because `IconContainerComponent` is deprecated - // only forward if `slots.icon` is NOT provided - as: IconContainerComponent, + as: IconContainer, }, }); @@ -334,7 +331,6 @@ RatingItem.propTypes = { highlightSelectedOnly: PropTypes.bool.isRequired, hover: PropTypes.number.isRequired, icon: PropTypes.node, - IconContainerComponent: PropTypes.elementType.isRequired, isActive: PropTypes.bool.isRequired, itemValue: PropTypes.number.isRequired, labelProps: PropTypes.object, @@ -370,7 +366,6 @@ const Rating = React.forwardRef(function Rating(inProps, ref) { getLabelText = defaultLabelText, highlightSelectedOnly = false, icon = defaultIcon, - IconContainerComponent = IconContainer, max = 5, name: nameProp, onChange, @@ -541,7 +536,6 @@ const Rating = React.forwardRef(function Rating(inProps, ref) { focusVisible, getLabelText, icon, - IconContainerComponent, max, precision, readOnly, @@ -610,7 +604,6 @@ const Rating = React.forwardRef(function Rating(inProps, ref) { highlightSelectedOnly, hover, icon, - IconContainerComponent, name, onBlur: handleBlur, onChange: handleChange, @@ -760,15 +753,6 @@ Rating.propTypes /* remove-proptypes */ = { * @default */ icon: PropTypes.node, - /** - * The component containing the icon. - * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - * @default function IconContainer(props) { - * const { value, ...other } = props; - * return ; - * } - */ - IconContainerComponent: PropTypes.elementType, /** * Maximum rating. * @default 5 diff --git a/packages/mui-material/src/Rating/Rating.test.js b/packages/mui-material/src/Rating/Rating.test.js index efb053bf86546f..fd8fba2130194e 100644 --- a/packages/mui-material/src/Rating/Rating.test.js +++ b/packages/mui-material/src/Rating/Rating.test.js @@ -263,6 +263,14 @@ describe('', () => { } }); + it('should not spread the `value` prop on the icon slot DOM element', () => { + const { container } = render(); + + container.querySelectorAll(`.${classes.icon}`).forEach((icon) => { + expect(icon).not.to.have.attribute('value'); + }); + }); + it('should be able to replace the icon', () => { function Icon(props) { return ;