[Avatar] Fix img slot types and add missing slots #45483
Conversation
siriwatknp
added
component: avatar
| { | ||
| "name": "img", | ||
| "description": "The component that renders the transition.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.", |
Netlify deploy previewBundle size reportDetails of bundle changes (Toolpad) |
| fallback: { | ||
| expectedClassName: classes.fallback, | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Cannot test the img slot together with fallback here because there is a logic within the component that dynamically render either one of them.
There was a problem hiding this comment.
Can we list what other options were tried, maybe even on the original issue to make sure we don't come back to this again. Some I can think of:
- dynamically inferring types (pros and cons, e.g. TS check performance)
- loosening the types for the slot props with some defaults
etc.
| height: 40, | ||
| blurDataURL: 'data:image/png;base64', | ||
| } satisfies ImageProps, | ||
| } as AvatarProps['slotProps'] |
There was a problem hiding this comment.
In this case, it's still required because the slotProps.img has a fixed structure that's different from ImageProps.
If you exclude the line, TS throws an error.
Added here: #45443 (comment) |
closes #45443
This PR follows the option (2) solution explained in #45443 (comment)
Root cause
The types of
slots.imgis too strict, not able to provide a custom component, .e.g. Next.js Image.Solution
Change the slot type to
React.ElementTypewhich accept any React component or string. Please see the added spec.I also use this opportunity to add missing slots (
rootandfallback) in this PR.