Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 11 commits into from
Feb 12, 2024
Original file line number Diff line number Diff line change
Expand Up @@ -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 your code:

```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/master/packages/mui-codemod#accordion-props)):
The Accordion's `TransitionComponent` was deprecated in favor of `slots.transition`:

```diff
<Accordion
Expand All @@ -41,11 +47,35 @@ 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/master/packages/mui-codemod#accordion-props)):
The Accordion's `TransitionProps` was deprecated in favor of `slotProps.transition`:

```diff
<Accordion
- TransitionProps={{ unmountOnExit: true }}
+ slotProps={{ transition: { unmountOnExit: true } }}
/>
```

## Avatar

### imgProps

The `imgProps` was deprecated in favor of `slotProps.img`. Use the [codemod](https://github.com/mui/material-ui/tree/master/packages/mui-codemod#avatar-props) below to migrate your code:

```bash
npx @mui/codemod@latest deprecations/avatar-props <path>
```

```diff
<Avatar
- imgProps={{
- onError: () => {},
- onLoad: () => {},
+ slotProps={{
+ img: {
+ onError: () => {},
+ onLoad: () => {},
+ }
}}
/>;
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
```
2 changes: 1 addition & 1 deletion docs/pages/material-ui/api/avatar.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"imgProps": {
"type": { "name": "object" },
"deprecated": true,
"deprecationInfo": "Use <code>slotProps.img</code> instead. This prop will be removed in v7."
"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": {
Expand Down
16 changes: 16 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: () => {},
+ }
}}
/>;
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
```

### v5.0.0

#### `base-use-named-exports`
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,15 @@ import Avatar from '@mui/material/Avatar';
import { Avatar as MyAvatar } from '@mui/material';

<Avatar
slotProps={{
img: {
onError: () => {},
onLoad: () => {},
}
imgProps={{
onError: () => {},
onLoad: () => {},
}}
/>;
<MyAvatar
slotProps={{
img: {
onError: () => {},
onLoad: () => {},
}
imgProps={{
onError: () => {},
onLoad: () => {},
}}
/>;

Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Avatar/Avatar.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export interface AvatarOwnProps {
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
* It can be used to listen for the loading error event.
* @deprecated Use `slotProps.img` instead. This prop will be removed in v7.
* @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
sx?: SxProps<Theme>;
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Avatar/Avatar.js
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ Avatar.propTypes /* remove-proptypes */ = {
/**
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
* It can be used to listen for the loading error event.
* @deprecated Use `slotProps.img` instead. This prop will be removed in v7.
* @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*/
imgProps: PropTypes.object,
/**
Expand Down
Loading