diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 3effedc42aa9d9..783607b9513c35 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -983,6 +983,32 @@ npx @mui/codemod@next deprecations/form-control-label-props ``` +#### `list-item-props` + +```diff + +``` + +```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 +``` + #### `pagination-item-classes` JS transforms: @@ -1095,45 +1121,22 @@ npx @mui/codemod@next deprecations/pagination-item-props npx @mui/codemod@next deprecations/slider-props ``` -#### `text-field-props` - -```diff - -``` - -```bash -npx @mui/codemod@next deprecations/text-field-props -``` - -#### `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', }, }, @@ -1141,20 +1144,6 @@ 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 -``` - #### `step-label-props` ```diff @@ -1183,25 +1172,47 @@ npx @mui/codemod@latest deprecations/toggle-button-group-classes ```bash npx @mui/codemod@latest deprecations/step-label-props +``` + +#### `text-field-props` +```diff + ``` -#### `step-connector-classes` +```bash +npx @mui/codemod@next deprecations/text-field-props +``` + +#### `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', }, }, @@ -1212,40 +1223,28 @@ JS transforms: CSS transforms: ```diff -- .MuiStepConnector-lineHorizontal -+.MuiStepConnector-horizontal > .MuiStepConnector-line -- .MuiStepConnector-lineVertical -+.MuiStepConnector-vertical > .MuiStepConnector-line +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedHorizontal ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-horizontal > .MuiToggleButtonGroup-grouped +-.MuiToggleButtonGroup-root .MuiToggleButtonGroup-groupedVertical ++.MuiToggleButtonGroup-root.MuiToggleButtonGroup-vertical > .MuiToggleButtonGroup-grouped + /> ``` ```bash -npx @mui/codemod@next deprecations/step-connector-classes +npx @mui/codemod@latest deprecations/toggle-button-group-classes ``` -#### `list-item-props` - -```diff - -``` +CSS transforms: ```diff - MuiListItem: { - defaultProps: { -- components: { Root: CustomRoot } -+ slots: { root: CustomRoot }, -- componentsProps: { root: { testid: 'test-id' }} -+ slotProps: { root: { testid: 'test-id' } }, - }, - }, +- .MuiStepConnector-lineHorizontal ++.MuiStepConnector-horizontal > .MuiStepConnector-line +- .MuiStepConnector-lineVertical ++.MuiStepConnector-vertical > .MuiStepConnector-line ``` ```bash -npx @mui/codemod@next deprecations/list-item-props +npx @mui/codemod@next deprecations/step-connector-classes ``` ### v6.0.0