[Rating] Remove deprecated IconContainerComponent

[siriwatknp]

Summary

Remove the deprecated IconContainerComponent prop from the Rating component.

Breaking change

The IconContainerComponent prop has been removed. Use slotProps.icon.component instead:

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

Use the rating-props codemod for automated migration:

npx @mui/codemod@latest deprecations/rating-props <path>

Changes

• Removed IconContainerComponent from component source, types, and PropTypes
• Updated RadioGroupRating demo to use slotProps.icon.component
• Added migration guide entry in upgrade-to-v9.md
• Regenerated API docs via pnpm proptypes && pnpm docs:api

Test plan

• pnpm prettier passes
• pnpm eslint passes
• pnpm typescript passes
• pnpm test:unit Rating passes (49 tests)

[mui-bot]

Netlify deploy preview

• docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	▼-102B(-0.02%)	🔺+29B(+0.02%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 923e72a

[mj12albert]

The IconContainer previously stripped the value, removing the component leaks it into the DOM (e.g. in the first demo

<label><span value="2" class="MuiRating-icon"><svg /></span><span class="MuiRating-visuallyHidden">2 Stars</span></label>

We probably need to remove the value here now

[mnajdova]

I almost feel like it's a different slot - iconContainer that receives the value and maybe the icon and renders it.

[siriwatknp]

fixed, new test added to ensure the behavior

[mnajdova]

For consistency, this should be slots.iconContainer, no?

It's a bit confusing, when do you use slots.icon vs slots.icon.component?

[siriwatknp]

For consistency, this should be slots.iconContainer, no?

Ideally, yes but I would NOT change it right now. It's the old name before slots was added. Changing it right now will impact the theming too.

It's a bit confusing, when do you use slots.icon vs slots.icon.component?

In this case using slots.icon.component is correct to preserve the same behavior to IconContainerComponent.

• slots.icon: will replace the styled-component RatingIcon, meaning you own the styles
• slotProps.icon.component: inject the custom React component by preserving the slot styles (from MUI). This is the prior behavior of the Rating, so that's why the migration guide is different than other components.

[mj12albert]

slots.icon.component

We're talking about slotProps.icon.component and not slots right? (icon.component isn't a slot?)

i.e. the IconContainerComponent prop is now the "component prop of the icon slot"

(the PR looks good to me, was just confused by this for a sec)

[siriwatknp]

slots.icon.component

We're talking about slotProps.icon.component and not slots right? (icon.component isn't a slot?)

i.e. the IconContainerComponent prop is now the "component prop of the icon slot"

(the PR looks good to me, was just confused by this for a sec)

Yes, correct (updated to slotProps.icon.component). The confusion was dictated by the logic of passing IconContainerComponent (a long time ago, even before the slots/slotProps).

[siriwatknp]

@mnajdova Is the explanation clear to you? anything I missed.

Addressed in #48019 (comment)