[avatar] Remove deprecated props#47966
Conversation
Netlify deploy previewBundle size report
|
There was a problem hiding this comment.
Pull request overview
This PR removes the deprecated imgProps prop from the Avatar component as part of the v9 migration. The useLoaded hook is extracted into its own TypeScript file with improved type safety and conditional property setting.
Changes:
- Removed the deprecated
imgPropsprop fromAvatarcomponent, its types, PropTypes, and API docs - Extracted
useLoadedinto a separate TypeScript file (Avatar/utils/useLoaded.ts) with typed state and conditional property assignment - Updated docs and examples to use
slotProps.imginstead ofimgProps
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
packages/mui-material/src/Avatar/utils/useLoaded.ts |
New file: extracted and improved useLoaded hook with TypeScript types |
packages/mui-material/src/Avatar/Avatar.js |
Removed imgProps prop, inline useLoaded, imported new hook |
packages/mui-material/src/Avatar/Avatar.d.ts |
Removed imgProps from type definitions |
packages/mui-material/src/Avatar/Avatar.test.js |
Removed one imgProps test (but missed another) |
packages/mui-material/src/Avatar/Avatar.spec.tsx |
Removed imgProps type spec test |
docs/src/modules/components/MaterialUIExampleCollection.js |
Migrated imgProps to slotProps.img |
docs/src/components/about/Team.tsx |
Migrated imgProps to slotProps.img |
docs/translations/api-docs/avatar/avatar.json |
Removed imgProps translation |
docs/pages/material-ui/api/avatar.json |
Removed imgProps from API page |
docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md |
Added migration guide for imgProps removal |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
e37bbb1 to
2098dcd
Compare
c69dd1d to
0bdfe59
Compare
| "spread": true, | ||
| "themeDefaultProps": true, | ||
| "muiName": "MuiAvatar", | ||
| "forwardsRefTo": "HTMLDivElement", |
There was a problem hiding this comment.
Could someone tell me why was this removed by the docs:api script? @ZeeshanTamboli @siriwatknp
There was a problem hiding this comment.
It's because you added another describeConformance without the ref param. It's what docs:api get the info from.
I recommend to remove the extra describeConformance, each test should have just one.
There was a problem hiding this comment.
I needed that describeConformance to also test the slots.img part, the first conformance tests slots.fallback and as far as I can tell, it can't work with both img and fallback.
29e2fc5 to
08727ed
Compare
There was a problem hiding this comment.
Pull request overview
Removes the deprecated imgProps API from the Material UI Avatar component and updates tests/docs to rely on the slotProps.img slot customization API, aligning with the v9 upgrade/migration story.
Changes:
- Remove
imgPropsfromAvatarimplementation, PropTypes, and TypeScript types, and update the TS spec accordingly. - Update
Avatartests to drop legacyimgPropscoverage and add conformance coverage for theimgslot when an image is rendered. - Update docs/examples and API JSON/docs translations to remove references to
imgProps, and add a v9 upgrade note with codemod guidance.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/mui-material/src/Avatar/Avatar.js | Removes imgProps handling and relies on slotProps.img for img attributes and useLoaded inputs. |
| packages/mui-material/src/Avatar/Avatar.d.ts | Drops the imgProps type from the public TS API. |
| packages/mui-material/src/Avatar/Avatar.test.js | Removes legacy imgProps tests and adds conformance coverage for the img slot when src is provided. |
| packages/mui-material/src/Avatar/Avatar.spec.tsx | Updates TS compile-time coverage to validate slotProps.img supports sx. |
| docs/translations/api-docs/avatar/avatar.json | Removes imgProps from translated API docs payload. |
| docs/pages/material-ui/api/avatar.json | Removes imgProps from the generated API JSON. |
| docs/src/modules/components/MaterialUIExampleCollection.js | Migrates example usage from imgProps to slotProps.img. |
| docs/src/components/about/Team.tsx | Migrates example usage from imgProps to slotProps.img. |
| docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md | Adds an upgrade note documenting the removal and the codemod command. |
Comments suppressed due to low confidence (1)
packages/mui-material/src/Avatar/Avatar.js:159
- With
imgPropsremoved from the destructuring, any remainingimgPropspassed by consumers (or via themedefaultProps) will now fall into...otherand be forwarded to the root DOM element, causing React “unknown prop” warnings and potentially renderingimgprops="[object Object]"in the DOM. Even if the prop is removed, it’s better to explicitly pick/omitimgProps(and ignore it) so it doesn’t leak to the root slot.
src,
srcSet,
variant = 'circular',
...other
} = props;
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Uh oh!
There was an error while loading. Please reload this page.