[material-ui][avatar] Add props deprecation with a codemod

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

@@ -28,9 +28,15 @@ If you need to run a specific codemod, those are also linked below.
 
 ## Accordion
 
+Use the [codemod](https://github.com/mui/material-ui/tree/master/packages/mui-codemod#accordion-props) below to migrate the code as decribed in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/accordion-props <path>
+```
+
 ### TransitionComponent
 
-The Accordion's `TransitionComponent` was deprecated in favor of `slots.transition` ([Codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#accordion-props)):
+The Accordion's `TransitionComponent` was deprecated in favor of `slots.transition`:
 
 ```diff
  <Accordion
@@ -41,7 +47,7 @@ The Accordion's `TransitionComponent` was deprecated in favor of `slots.transiti
 
 ### TransitionProps
 
-The Accordion's `TransitionProps` was deprecated in favor of `slotProps.transition` ([Codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#accordion-props)):
+The Accordion's `TransitionProps` was deprecated in favor of `slotProps.transition`:
 
 ```diff
  <Accordion
@@ -50,11 +56,43 @@ The Accordion's `TransitionProps` was deprecated in favor of `slotProps.transiti
  />
 ```
 
+## Avatar
+
+Use the [codemod](https://github.com/mui/material-ui/tree/master/packages/mui-codemod#avatar-props) below to migrate the code as decribed in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/avatar-props <path>
+```
+
+### imgProps
+
+The Avatar's `imgProps` was deprecated in favor of `slotProps.img`:
+
+```diff
+ <Avatar
+-  imgProps={{
+-    onError: () => {},
+-    onLoad: () => {},
++  slotProps={{
++    img: {
++      onError: () => {},
++      onLoad: () => {},
++    }
+   }}
+ />;
+```
+
 ## Divider
 
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props) below to migrate the code as decribed in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/divider-props <path>
+```
+
 ### light
 
-The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or any opacity). ([Codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props)):
+The Divider's `light` prop was deprecated, Use `sx={{ opacity : "0.6" }}` (or any opacity):
 
 ```diff
  <Divider

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

@@ -4,8 +4,20 @@
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
-    "imgProps": { "type": { "name": "object" } },
+    "imgProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.img</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "sizes": { "type": { "name": "string" } },
+    "slotProps": {
+      "type": { "name": "shape", "description": "{ img?: func<br>&#124;&nbsp;object }" },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ img?: elementType }" },
+      "default": "{}"
+    },
     "src": { "type": { "name": "string" } },
     "srcSet": { "type": { "name": "string" } },
     "sx": {
@@ -28,6 +40,14 @@
     "import Avatar from '@mui/material/Avatar';",
     "import { Avatar } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "img",
+      "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
+      "default": "Collapse",
+      "class": "MuiAvatar-img"
+    }
+  ],
   "classes": [
     {
       "key": "circular",
@@ -47,12 +67,6 @@
       "description": "Styles applied to the fallback icon",
       "isGlobal": false
     },
-    {
-      "key": "img",
-      "className": "MuiAvatar-img",
-      "description": "Styles applied to the img element if either `src` or `srcSet` is defined.",
-      "isGlobal": false
-    },
     {
       "key": "root",
       "className": "MuiAvatar-root",

docs/translations/api-docs/avatar/avatar.json

@@ -17,6 +17,8 @@
     "sizes": {
       "description": "The <code>sizes</code> attribute for the <code>img</code> element."
     },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "src": { "description": "The <code>src</code> attribute for the <code>img</code> element." },
     "srcSet": {
       "description": "The <code>srcSet</code> attribute for the <code>img</code> element. Use this attribute for responsive image display."
@@ -38,11 +40,6 @@
       "conditions": "not <code>src</code> or <code>srcSet</code>"
     },
     "fallback": { "description": "Styles applied to the fallback icon" },
-    "img": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the img element",
-      "conditions": "either <code>src</code> or <code>srcSet</code> is defined"
-    },
     "root": { "description": "Styles applied to the root element." },
     "rounded": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
@@ -54,5 +51,8 @@
       "nodeName": "the root element",
       "conditions": "<code>variant=\"square\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "img": "The component that renders the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }
 }

packages/mui-codemod/README.md

@@ -91,6 +91,22 @@ A combination of all deprecations.
 npx @mui/codemod@latest deprecations/accordion-props <path>
 ```
 
+#### `avatar-props`
+
+```diff
+ <Avatar
+-  imgProps={{
+-    onError: () => {},
+-    onLoad: () => {},
++  slotProps={{
++    img: {
++      onError: () => {},
++      onLoad: () => {},
++    }
+   }}
+ />;
+```
+
 #### `divider-props`
 
 ```diff

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

@@ -1,11 +1,15 @@
-import transformAccordionProps from '../accordion-props/accordion-props';
+import transformAccordionProps from '../accordion-props';
+import transformAvatarProps from '../avatar-props';
+import transformDividerProps from '../divider-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
 export default function deprecationsAll(file, api, options) {
   file.source = transformAccordionProps(file, api, options);
+  file.source = transformAvatarProps(file, api, options);
+  file.source = transformDividerProps(file, api, options);
 
   return file.source;
 }

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

@@ -0,0 +1,56 @@
+import findComponentJSX from '../../util/findComponentJSX';
+import assignObject from '../../util/assignObject';
+import appendAttribute from '../../util/appendAttribute';
+
+/**
+ * @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;
+
+  findComponentJSX(j, { root, componentName: 'Avatar' }, (elementPath) => {
+    const index = elementPath.node.openingElement.attributes.findIndex(
+      (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'imgProps',
+    );
+    if (index !== -1) {
+      const removed = elementPath.node.openingElement.attributes.splice(index, 1);
+      let hasNode = false;
+      elementPath.node.openingElement.attributes.forEach((attr) => {
+        if (attr.name?.name === 'slotProps') {
+          hasNode = true;
+          assignObject(j, {
+            target: attr,
+            key: 'img',
+            expression: removed[0].value.expression,
+          });
+        }
+      });
+      if (!hasNode) {
+        appendAttribute(j, {
+          target: elementPath.node,
+          attributeName: 'slotProps',
+          expression: j.objectExpression([
+            j.objectProperty(j.identifier('img'), removed[0].value.expression),
+          ]),
+        });
+      }
+    }
+  });
+
+  root.find(j.ObjectProperty, { key: { name: 'imgProps' } }).forEach((path) => {
+    if (path.parent?.parent?.parent?.parent?.node.key?.name === 'MuiAvatar') {
+      path.replace(
+        j.property(
+          'init',
+          j.identifier('slotProps'),
+          j.objectExpression([j.objectProperty(j.identifier('img'), path.node.value)]),
+        ),
+      );
+    }
+  });
+
+  return root.toSource(printOptions);
+}

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

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './avatar-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('avatar-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] avatar-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

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

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

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

@@ -0,0 +1,23 @@
+import Avatar from '@mui/material/Avatar';
+import { Avatar as MyAvatar } from '@mui/material';
+
+<Avatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;
+<MyAvatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiAvatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;

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

@@ -0,0 +1,27 @@
+import Avatar from '@mui/material/Avatar';
+import { Avatar as MyAvatar } from '@mui/material';
+
+<Avatar
+  slotProps={{
+    img: {
+      onError: () => {},
+      onLoad: () => {},
+    }
+  }}
+/>;
+<MyAvatar
+  slotProps={{
+    img: {
+      onError: () => {},
+      onLoad: () => {},
+    }
+  }}
+/>;
+
+// should skip non MUI components
+<NonMuiAvatar
+  imgProps={{
+    onError: () => {},
+    onLoad: () => {},
+  }}
+/>;

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

@@ -0,0 +1,10 @@
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      imgProps: {
+        onError: () => {},
+        onLoad: () => {},
+      },
+    },
+  },
+});

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

@@ -0,0 +1,12 @@
+fn({
+  MuiAvatar: {
+    defaultProps: {
+      slotProps: {
+        img: {
+          onError: () => {},
+          onLoad: () => {},
+        }
+      }
+    },
+  },
+});