Skip to content

Commit

Permalink
[material-ui][ListItem] Deprecate ListItem's components and component…
Browse files Browse the repository at this point in the history
…sProps (mui#42219)
  • Loading branch information
aarongarciah authored and joserodolfofreitas committed Jul 29, 2024
1 parent 194b2d2 commit 3a246d9
Show file tree
Hide file tree
Showing 13 changed files with 325 additions and 81 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -991,6 +991,36 @@ The FormControlLabel's `componentsProps` prop was deprecated in favor of `slotPr
/>
```

## ListItem

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

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

### components

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

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

### componentsProps

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

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

## ListItemSecondaryAction

### Deprecated component
Expand Down
8 changes: 6 additions & 2 deletions docs/pages/material-ui/api/list-item.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,15 @@
"component": { "type": { "name": "elementType" } },
"components": {
"type": { "name": "shape", "description": "{ Root?: elementType }" },
"default": "{}"
"default": "{}",
"deprecated": true,
"deprecationInfo": "Use the <code>slots</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"componentsProps": {
"type": { "name": "shape", "description": "{ root?: object }" },
"default": "{}"
"default": "{}",
"deprecated": true,
"deprecationInfo": "Use the <code>slotProps</code> prop instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
},
"ContainerComponent": {
"type": { "name": "custom", "description": "element type" },
Expand Down
12 changes: 4 additions & 8 deletions docs/translations/api-docs/list-item/list-item.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,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."
},
"ContainerComponent": {
"description": "The container component used when a <code>ListItemSecondaryAction</code> is the last child.",
Expand All @@ -40,11 +38,9 @@
"secondaryAction": { "description": "The element to display at the end of ListItem." },
"selected": { "description": "Use to apply selected styling." },
"slotProps": {
"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>componentsProps</code> prop, which will be deprecated in the future."
},
"slots": {
"description": "The components used for each slot inside.<br>This prop is an alias for the <code>components</code> prop, which will be deprecated in the future."
"description": "The extra props for the slot components. You can override the existing props or add new ones."
},
"slots": { "description": "The components used for each slot inside." },
"sx": {
"description": "The system prop that allows defining system overrides as well as additional CSS styles."
}
Expand Down
127 changes: 76 additions & 51 deletions packages/mui-codemod/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -983,6 +983,32 @@ npx @mui/codemod@next deprecations/form-control-label-props <path>

```

#### `list-item-props`

```diff
<ListItem
- components={{ Root: CustomRoot }}
+ slots={{ root: CustomRoot }}
- componentsProps={{ root: { testid: 'test-id' } }}
+ slotProps={{ root: { testid: 'test-id' } }}
/>
```

```diff
MuiListItem: {
defaultProps: {
- components: { Root: CustomRoot }
+ slots: { root: CustomRoot },
- componentsProps: { root: { testid: 'test-id' }}
+ slotProps: { root: { testid: 'test-id' } },
},
},
```

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

#### `pagination-item-classes`

JS transforms:
Expand Down Expand Up @@ -1095,66 +1121,29 @@ npx @mui/codemod@next deprecations/pagination-item-props <path>
npx @mui/codemod@next deprecations/slider-props <path>
```

#### `text-field-props`

```diff
<TextField
- InputProps={CustomInputProps}
- inputProps={CustomHtmlInputProps}
- SelectProps={CustomSelectProps}
- InputLabelProps={CustomInputLabelProps}
- FormHelperTextProps={CustomFormHelperProps}
+ slotProps={{
+ input: CustomInputProps
+ htmlInput: CustomHtmlInputProps
+ select: CustomSelectProps
+ inputLabel: CustomInputLabelProps
+ formHelper: CustomFormHelperProps
+ }}
/>
```

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

#### `toggle-button-group-classes`
#### `step-connector-classes`

JS transforms:

```diff
import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
import { stepConnectorClasses } from '@mui/material/StepConnector';

MuiToggleButtonGroup: {
MuiStepConnector: {
styleOverrides: {
root: {
- [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: {
+ [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: {
- [`& .${stepConnectorClasses.lineHorizontal}`]: {
+ [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: {
color: 'red',
},
- [`& .${toggleButtonGroupClasses.groupedVertical}`]: {
+ [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: {
- [`& .${stepConnectorClasses.lineVertical}`]: {
+ [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: {
color: 'red',
},
},
},
},
```

CSS transforms:

```diff
-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped
-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped
/>
```

```bash
npx @mui/codemod@latest deprecations/toggle-button-group-classes <path>
```

#### `step-label-props`

```diff
Expand Down Expand Up @@ -1183,25 +1172,47 @@ npx @mui/codemod@latest deprecations/toggle-button-group-classes <path>

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

#### `text-field-props`

```diff
<TextField
- InputProps={CustomInputProps}
- inputProps={CustomHtmlInputProps}
- SelectProps={CustomSelectProps}
- InputLabelProps={CustomInputLabelProps}
- FormHelperTextProps={CustomFormHelperProps}
+ slotProps={{
+ input: CustomInputProps
+ htmlInput: CustomHtmlInputProps
+ select: CustomSelectProps
+ inputLabel: CustomInputLabelProps
+ formHelper: CustomFormHelperProps
+ }}
/>
```

#### `step-connector-classes`
```bash
npx @mui/codemod@next deprecations/text-field-props <path>
```

#### `toggle-button-group-classes`

JS transforms:

```diff
import { stepConnectorClasses } from '@mui/material/StepConnector';
import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';

MuiStepConnector: {
MuiToggleButtonGroup: {
styleOverrides: {
root: {
- [`& .${stepConnectorClasses.lineHorizontal}`]: {
+ [`&.${stepConnectorClasses.horizontal} > .${stepConnectorClasses.line}`]: {
- [`& .${toggleButtonGroupClasses.groupedHorizontal}`]: {
+ [`&.${toggleButtonGroupClasses.horizontal} > .${toggleButtonGroupClasses.grouped}`]: {
color: 'red',
},
- [`& .${stepConnectorClasses.lineVertical}`]: {
+ [`&.${stepConnectorClasses.vertical} > .${stepConnectorClasses.line}`]: {
- [`& .${toggleButtonGroupClasses.groupedVertical}`]: {
+ [`&.${toggleButtonGroupClasses.vertical} > .${toggleButtonGroupClasses.grouped}`]: {
color: 'red',
},
},
Expand All @@ -1211,6 +1222,20 @@ JS transforms:

CSS transforms:

```diff
-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped
-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical
+.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped
/>
```

```bash
npx @mui/codemod@latest deprecations/toggle-button-group-classes <path>
```

CSS transforms:

```diff
- .MuiStepConnector-lineHorizontal
+.MuiStepConnector-horizontal > .MuiStepConnector-line
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './list-item-props';
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: 'ListItem' });

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

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

describe('@mui/codemod', () => {
describe('deprecations', () => {
describe('list-item-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] list-item-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');
});
});
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import ListItem from '@mui/material/ListItem';

<ListItem
components={{ Root: ComponentsRoot }}
componentsProps={{ root: componentsRootProps }}
/>;
<ListItem
components={{ Root: ComponentsRoot }}
slotProps={{ root: slotsRootProps }}
/>;
<ListItem
slots={{ root: SlotsRoot }}
componentsProps={{ root: componentsRootProps }}
/>;
<ListItem
slots={{ root: SlotsRoot }}
components={{ Root: ComponentsRoot }}
slotProps={{ root: slotsRootProps }}
componentsProps={{ root: componentsRootProps }}
/>;
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import ListItem from '@mui/material/ListItem';

<ListItem
slots={{
root: ComponentsRoot
}}
slotProps={{ root: componentsRootProps }}
/>;
<ListItem
slotProps={{ root: slotsRootProps }}
slots={{
root: ComponentsRoot
}}
/>;
<ListItem
slots={{ root: SlotsRoot }}
slotProps={{ root: componentsRootProps }}
/>;
<ListItem
slots={{ root: SlotsRoot }}
slotProps={{ root: {
...componentsRootProps,
...slotsRootProps
} }} />;
Loading

0 comments on commit 3a246d9

Please sign in to comment.