[material-ui][Rating] Deprecate *Props and complete slots, slotProps (#45295)

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

@@ -1874,6 +1874,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:

docs/pages/material-ui/api/rating.json

@@ -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" } },
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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",

docs/translations/api-docs/rating/rating.json

@@ -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",
@@ -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",
@@ -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 "no value" input",
@@ -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",
@@ -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."
   }
 }

packages/mui-codemod/README.md

@@ -1551,6 +1551,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:

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

@@ -41,6 +41,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
@@ -90,6 +91,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;
 }

packages/mui-codemod/src/deprecations/rating-props/index.js

@@ -0,0 +1 @@
+export { default } from './rating-props';

packages/mui-codemod/src/deprecations/rating-props/rating-props.js

@@ -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);
+}

packages/mui-codemod/src/deprecations/rating-props/rating-props.test.js

@@ -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' },
+      ],
+    });
+  });
+});

packages/mui-codemod/src/deprecations/rating-props/test-cases/actual.js

@@ -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} />;

packages/mui-codemod/src/deprecations/rating-props/test-cases/expected.js

@@ -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} />;

packages/mui-codemod/src/deprecations/rating-props/test-cases/theme.actual.js

@@ -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',
+        },
+      },
+    },
+  },
+});