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][Badge] Deprecate components and componentsProps #41655

Merged
merged 6 commits into from
Mar 26, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -271,6 +271,36 @@ The Backdrop's `TransitionComponent` prop was deprecated in favor of `slots.tran
+ slots={{ transition: CustomTransition }}
```

## Badge

Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#badge-props) below to migrate the code as described in the following sections:

```bash
npx @mui/codemod@next deprecations/badge-props <path>
```

### components

The Badge's `components` was deprecated in favor of `slots`:

```diff
<Badge
- components={{ root: CustomRoot }}
+ slots={{ root: CustomRoot }}
/>
```

### componentsProps

The Badge's `componentsProps` was deprecated in favor of `slotProps`:

```diff
<Badge
- componentsProps={{ root: { testid: 'test-id' } }}
+ slotProps={{ root: { testid: 'test-id' } }}
/>
```

## Button

Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-classes) below to migrate the code as described in the following sections:
Expand Down
8 changes: 6 additions & 2 deletions docs/pages/material-ui/api/badge.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,18 @@
"component": { "type": { "name": "elementType" } },
"components": {
"type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" },
"default": "{}"
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the <code>slots</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
},
"componentsProps": {
"type": {
"name": "shape",
"description": "{ badge?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
},
"default": "{}"
"default": "{}",
"deprecated": true,
"deprecationInfo": "use the <code>slotProps</code> prop instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
},
"invisible": { "type": { "name": "bool" }, "default": "false" },
"max": { "type": { "name": "number" }, "default": "99" },
Expand Down
6 changes: 2 additions & 4 deletions docs/translations/api-docs/badge/badge.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,9 @@
"component": {
"description": "The component used for the root node. Either a string to use a HTML element or a component."
},
"components": {
"description": "The components used for each slot inside.<br>This prop is an alias for the <code>slots</code> prop. It&#39;s recommended to use the <code>slots</code> prop instead."
},
"components": { "description": "The components used for each slot inside." },
"componentsProps": {
"description": "The extra props for the slot components. You can override the existing props or add new ones.<br>This prop is an alias for the <code>slotProps</code> prop. It&#39;s recommended to use the <code>slotProps</code> prop instead, as <code>componentsProps</code> will be deprecated in the future."
"description": "The extra props for the slot components. You can override the existing props or add new ones."
},
"invisible": { "description": "If <code>true</code>, the badge is invisible." },
"max": { "description": "Max count to show." },
Expand Down
26 changes: 26 additions & 0 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -287,6 +287,32 @@ npx @mui/codemod@next deprecations/alert-props <path>
npx @mui/codemod@next deprecations/backdrop-props <path>
```

#### `badge-props`

```diff
<Badge
- components={{ root: CustomRoot }}
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
+ slots={{ root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slotProps={{ root: { testid: 'test-id' } }}
/>
```

```diff
MuiBadge: {
defaultProps: {
- components: {root:CustomRoot }
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
+ slots: { root: CustomRoot },
- componentsProps: { root: { testid: 'test-id' }}
+ slotProps: { root: { testid: 'test-id' } },
},
},
```

```bash
npx @mui/codemod@latest deprecations/slider-props <path>
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
```

#### `button-classes`

JS transforms:
Expand Down
15 changes: 15 additions & 0 deletions packages/mui-codemod/src/deprecations/badge-props/badge-props.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';

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

replaceComponentsWithSlots(j, { root, componentName: 'Badge' });

return root.toSource(printOptions);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import path from 'path';
import { expect } from 'chai';
import { jscodeshift } from '../../../testUtils';
import transform from './badge-props';
import readFile from '../../util/readFile';

function read(fileName) {
return readFile(path.join(__dirname, fileName));
}

describe('@mui/codemod', () => {
describe('deprecations', () => {
describe('badge-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] badge-props', () => {
it('transforms props as needed', () => {
const actual = transform(
{ source: read('./test-cases/theme.actual.js') },
{ jscodeshift },
{ printOptions: { trailingComma: false } },
);

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');
});
});
});
});
1 change: 1 addition & 0 deletions packages/mui-codemod/src/deprecations/badge-props/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './badge-props';
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Badge } from '@mui/material';

<Badge components={{ root: ComponentsRoot }} componentsProps={{ root: componentsRootProps }} />;

<Badge
slots={{ badge: SlotsBadge }}
components={{ root: ComponentsRoot }}
slotProps={{ badge: slotsBadgeProps }}
componentsProps={{ root: componentsRootProps }}
/>;

<Badge
slots={{ root: SlotsRoot, badge: SlotsBadge }}
components={{ root: ComponentsRoot }}
slotProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
componentsProps={{ root: componentsRootProps }}
/>;

<Badge
slots={{ root: SlotsRoot, badge: SlotsBadge }}
components={{ root: ComponentsRoot }}
slotProps={{ root: slotsRootProps, badge: slotsBadgeProps }}
componentsProps={{ root: componentsRootProps, badge: componentsBadgeProps }}
/>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Badge } from '@mui/material';

<Badge slots={{
root: ComponentsRoot
}} slotProps={{ root: componentsRootProps }} />;

<Badge
slots={{
badge: SlotsBadge,
root: ComponentsRoot
}}
slotProps={{
badge: slotsBadgeProps,
root: componentsRootProps
}} />;

<Badge
slots={{ root: SlotsRoot, badge: SlotsBadge }}
slotProps={{ badge: slotsBadgeProps, root: {
...componentsRootProps,
...slotsRootProps
} }} />;

<Badge
slots={{ root: SlotsRoot, badge: SlotsBadge }}
slotProps={{ root: {
...componentsRootProps,
...slotsRootProps
}, badge: {
...componentsBadgeProps,
...slotsBadgeProps
} }} />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
fn({
MuiBadge: {
defaultProps: {
components: { root: ComponentsRoot },
componentsProps: { root: componentsRootProps },
},
},
});

fn({
MuiBadge: {
defaultProps: {
components: { root: ComponentsRoot },
slots: { badge: SlotsBadge },
componentsProps: { root: componentsRootProps },
slotProps: { badge: slotsBadgeProps },
},
},
});

fn({
MuiBadge: {
defaultProps: {
components: { root: ComponentsRoot },
slots: { badge: SlotsBadge, root: SlotsRoot },
componentsProps: { root: componentsRootProps },
slotProps: { root: slotsRootProps, badge: slotsBadgeProps },
},
},
});

fn({
MuiBadge: {
defaultProps: {
components: { root: ComponentsRoot },
slots: { badge: SlotsBadge, root: SlotsRoot },
componentsProps: { root: componentsRootProps, badge: componentsBadgeProps },
slotProps: { badge: slotsBadgeProps, root: slotsRootProps },
},
},
});

Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
fn({
MuiBadge: {
defaultProps: {
slots: {
root: ComponentsRoot
},

slotProps: {
root: componentsRootProps
}
},
},
});

fn({
MuiBadge: {
defaultProps: {
slots: {
root: ComponentsRoot,
badge: SlotsBadge
},

slotProps: {
root: componentsRootProps,
badge: slotsBadgeProps
}
},
},
});

fn({
MuiBadge: {
defaultProps: {
slots: {
root: SlotsRoot,
badge: SlotsBadge
},

slotProps: {
root: {
...componentsRootProps,
...slotsRootProps
},

badge: slotsBadgeProps
}
},
},
});

fn({
MuiBadge: {
defaultProps: {
slots: {
root: SlotsRoot,
badge: SlotsBadge
},

slotProps: {
root: {
...componentsRootProps,
...slotsRootProps
},

badge: {
...componentsBadgeProps,
...slotsBadgeProps
}
}
},
},
});

6 changes: 2 additions & 4 deletions packages/mui-material/src/Badge/Badge.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,17 +72,15 @@ export interface BadgeOwnProps {
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `slotProps` prop.
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
* @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
componentsProps?: BadgeOwnProps['slotProps'];
/**
* The components used for each slot inside.
*
* This prop is an alias for the `slots` prop.
* It's recommended to use the `slots` prop instead.
* @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
Expand Down
6 changes: 2 additions & 4 deletions packages/mui-material/src/Badge/Badge.js
Original file line number Diff line number Diff line change
Expand Up @@ -398,8 +398,7 @@ Badge.propTypes /* remove-proptypes */ = {
/**
* The components used for each slot inside.
*
* This prop is an alias for the `slots` prop.
* It's recommended to use the `slots` prop instead.
* @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
Expand All @@ -411,8 +410,7 @@ Badge.propTypes /* remove-proptypes */ = {
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* This prop is an alias for the `slotProps` prop.
* It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
* @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
*
* @default {}
*/
Expand Down
Loading