From 2d9d973041fa0a57f725776f2706dc417d913c40 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 1 Mar 2024 16:18:10 +0530 Subject: [PATCH 01/13] Update StepLabel component to use slots and slotProps --- .../mui-material/src/StepLabel/StepLabel.d.ts | 23 ++++++++++++- .../mui-material/src/StepLabel/StepLabel.js | 34 +++++++++++++++---- 2 files changed, 50 insertions(+), 7 deletions(-) diff --git a/packages/mui-material/src/StepLabel/StepLabel.d.ts b/packages/mui-material/src/StepLabel/StepLabel.d.ts index 10d75f9151552b..e90ae42bbe7567 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.d.ts +++ b/packages/mui-material/src/StepLabel/StepLabel.d.ts @@ -4,6 +4,24 @@ import { InternalStandardProps as StandardProps } from '..'; import { StepIconProps } from '../StepIcon'; import { Theme } from '../styles'; import { StepLabelClasses } from './stepLabelClasses'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; + +export interface StepLabelSlots { + /** + * The component that renders the label. + * @default span + */ + label?: React.ElementType; +} + +export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps< + StepLabelSlots, + { + label: SlotProps>, {}, StepLabelOwnerState>; + } +>; + +export interface StepLabelOwnerState extends StepLabelProps {} export interface StepLabelProps extends StandardProps> { /** @@ -17,6 +35,7 @@ export interface StepLabelProps extends StandardProps; * * - [StepLabel API](https://mui.com/material-ui/api/step-label/) */ -declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & { muiName: string }; +declare const StepLabel: ((props: StepLabelProps & StepLabelSlotsAndSlotProps) => JSX.Element) & { + muiName: string; +}; export default StepLabel; diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index 80c3f7e5e36a93..eb8f89ed5e796a 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -9,6 +9,7 @@ import StepIcon from '../StepIcon'; import StepperContext from '../Stepper/StepperContext'; import StepContext from '../Step/StepContext'; import stepLabelClasses, { getStepLabelUtilityClass } from './stepLabelClasses'; +import useSlot from '../utils/useSlot'; const useUtilityClasses = (ownerState) => { const { classes, orientation, active, completed, error, disabled, alternativeLabel } = ownerState; @@ -126,6 +127,7 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { error = false, icon: iconProp, optional, + slots = {}, slotProps = {}, StepIconComponent: StepIconComponentProp, StepIconProps, @@ -154,7 +156,19 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { const classes = useUtilityClasses(ownerState); - const labelSlotProps = slotProps.label ?? componentsProps.label; + const externalForwardedProps = { + slots, + slotProps: { + ...componentsProps, + ...slotProps, + }, + }; + + const [StepLabelLabelSlot, stepLabelLabelProps] = useSlot('closeIcon', { + elementType: StepLabelLabel, + externalForwardedProps, + ownerState, + }); return ( {children ? ( - {children} - + ) : null} {optional} @@ -210,6 +224,7 @@ StepLabel.propTypes /* remove-proptypes */ = { /** * The props used for each slot inside. * @default {} + * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ componentsProps: PropTypes.shape({ label: PropTypes.object, @@ -232,7 +247,14 @@ StepLabel.propTypes /* remove-proptypes */ = { * @default {} */ slotProps: PropTypes.shape({ - label: PropTypes.object, + label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), + /** + * The components used for each slot inside. + * @default {} + */ + slots: PropTypes.shape({ + label: PropTypes.elementType, }), /** * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/). From 6e69774059f7c2242def8833cb6d1173f9eca068 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 1 Mar 2024 16:25:12 +0530 Subject: [PATCH 02/13] docs:api --- docs/pages/material-ui/api/step-label.json | 24 ++++++++++++------- .../api-docs/step-label/step-label.json | 8 +++---- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/docs/pages/material-ui/api/step-label.json b/docs/pages/material-ui/api/step-label.json index 2f77fe012d8ec7..cc855fad1f48fa 100644 --- a/docs/pages/material-ui/api/step-label.json +++ b/docs/pages/material-ui/api/step-label.json @@ -4,13 +4,19 @@ "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "componentsProps": { "type": { "name": "shape", "description": "{ label?: object }" }, - "default": "{}" + "default": "{}", + "deprecated": true, + "deprecationInfo": "use the slotProps prop instead. This prop will be removed in v7. How to migrate." }, "error": { "type": { "name": "bool" }, "default": "false" }, "icon": { "type": { "name": "node" } }, "optional": { "type": { "name": "node" } }, "slotProps": { - "type": { "name": "shape", "description": "{ label?: object }" }, + "type": { "name": "shape", "description": "{ label?: func
| object }" }, + "default": "{}" + }, + "slots": { + "type": { "name": "shape", "description": "{ label?: elementType }" }, "default": "{}" }, "StepIconComponent": { "type": { "name": "elementType" } }, @@ -28,6 +34,14 @@ "import StepLabel from '@mui/material/StepLabel';", "import { StepLabel } from '@mui/material';" ], + "slots": [ + { + "name": "label", + "description": "The component that renders the label.", + "default": "span", + "class": "MuiStepLabel-label" + } + ], "classes": [ { "key": "active", @@ -71,12 +85,6 @@ "description": "Styles applied to the `icon` container element.", "isGlobal": false }, - { - "key": "label", - "className": "MuiStepLabel-label", - "description": "Styles applied to the label element that wraps `children`.", - "isGlobal": false - }, { "key": "labelContainer", "className": "MuiStepLabel-labelContainer", diff --git a/docs/translations/api-docs/step-label/step-label.json b/docs/translations/api-docs/step-label/step-label.json index 48a77b4b7f3ade..7a68d574ce6f9d 100644 --- a/docs/translations/api-docs/step-label/step-label.json +++ b/docs/translations/api-docs/step-label/step-label.json @@ -10,6 +10,7 @@ "icon": { "description": "Override the default label of the step icon." }, "optional": { "description": "The optional node to display." }, "slotProps": { "description": "The props used for each slot inside." }, + "slots": { "description": "The components used for each slot inside." }, "StepIconComponent": { "description": "The component to render in place of the StepIcon." }, @@ -55,10 +56,6 @@ "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon container element" }, - "label": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the label element that wraps children" - }, "labelContainer": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the container element which wraps label and optional" @@ -69,5 +66,6 @@ "nodeName": "the root element", "conditions": "orientation=\"vertical\"" } - } + }, + "slotDescriptions": { "label": "The component that renders the label." } } From d7a0343d13ca85354b3a5bc3ffc6a9baa5ca0dab Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 1 Mar 2024 16:29:08 +0530 Subject: [PATCH 03/13] update test --- packages/mui-material/src/StepLabel/StepLabel.test.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/mui-material/src/StepLabel/StepLabel.test.js b/packages/mui-material/src/StepLabel/StepLabel.test.js index 05c2959f51bdcb..db9e52412c5b50 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.test.js +++ b/packages/mui-material/src/StepLabel/StepLabel.test.js @@ -22,12 +22,7 @@ describe('', () => { slots: { label: { expectedClassName: classes.label }, }, - skip: [ - 'componentProp', - 'componentsProp', - 'slotsProp', - 'slotPropsCallback', // not supported yet - ], + skip: ['componentProp', 'componentsProp'], })); describe('label content', () => { From a360d526bad5feb00944142c416cb3f276ee90d1 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 1 Mar 2024 16:32:29 +0530 Subject: [PATCH 04/13] Add slots prop to StepLabelProps --- packages/mui-material/src/StepLabel/StepLabel.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/mui-material/src/StepLabel/StepLabel.d.ts b/packages/mui-material/src/StepLabel/StepLabel.d.ts index e90ae42bbe7567..fa9235d2624239 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.d.ts +++ b/packages/mui-material/src/StepLabel/StepLabel.d.ts @@ -68,6 +68,11 @@ export interface StepLabelProps extends StandardProps; }; + /** + * The components used for each slot inside. + * @default {} + */ + slots?: {}; /** * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/). */ From 9d345a2dd54654f57db69692b251a5b09dffb5c7 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 1 Mar 2024 16:42:31 +0530 Subject: [PATCH 05/13] update name --- packages/mui-material/src/StepLabel/StepLabel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index eb8f89ed5e796a..b6edc771d8b6f6 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -164,7 +164,7 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { }, }; - const [StepLabelLabelSlot, stepLabelLabelProps] = useSlot('closeIcon', { + const [StepLabelLabelSlot, stepLabelLabelProps] = useSlot('label', { elementType: StepLabelLabel, externalForwardedProps, ownerState, From a745c16abb42bf8ac8eb86fd6b6a52fe38059674 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 1 Mar 2024 16:57:04 +0530 Subject: [PATCH 06/13] add codemod --- .../src/deprecations/all/deprecations-all.js | 2 + .../deprecations/step-label-props/index.js | 1 + .../step-label-props/step-label-props.js | 15 ++++++ .../step-label-props/step-label-props.test.js | 53 +++++++++++++++++++ .../step-label-props/test-cases/actual.js | 8 +++ .../step-label-props/test-cases/expected.js | 4 ++ .../test-cases/theme.actual.js | 7 +++ .../test-cases/theme.expected.js | 9 ++++ 8 files changed, 99 insertions(+) create mode 100644 packages/mui-codemod/src/deprecations/step-label-props/index.js create mode 100644 packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js create mode 100644 packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js create mode 100644 packages/mui-codemod/src/deprecations/step-label-props/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js create mode 100644 packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js create mode 100644 packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index a360b241125539..d2e5772afc4a83 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -6,6 +6,7 @@ import transformButtonClasses from '../button-classes'; import transformChipClasses from '../chip-classes'; import transformPaginationItemClasses from '../pagination-item-classes'; import transformAlertClasses from '../alert-classes'; +import transformStepLabelProps from '../step-label-props'; /** * @param {import('jscodeshift').FileInfo} file @@ -20,6 +21,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformChipClasses(file, api, options); file.source = transformPaginationItemClasses(file, api, options); file.source = transformAlertClasses(file, api, options); + file.source = transformStepLabelProps(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/deprecations/step-label-props/index.js b/packages/mui-codemod/src/deprecations/step-label-props/index.js new file mode 100644 index 00000000000000..dacfd195c56c35 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/index.js @@ -0,0 +1 @@ +export { default } from './step-label-props'; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js new file mode 100644 index 00000000000000..d71fbba3a84810 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.js @@ -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: 'StepLabel' }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js new file mode 100644 index 00000000000000..e3c7ac920970c3 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './step-label-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('step-label-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] step-label-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + { printOptions: { trailingComma: true } }, + ); + + 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'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/actual.js new file mode 100644 index 00000000000000..9caf4e5a411080 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/actual.js @@ -0,0 +1,8 @@ +import StepLabel from '@mui/material/StepLabel'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js new file mode 100644 index 00000000000000..d223f5c900f52b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js @@ -0,0 +1,4 @@ +import StepLabel from '@mui/material/StepLabel'; + +; +; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..89f6f82410cd56 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js @@ -0,0 +1,7 @@ +fn({ + MuiStepLabel: { + defaultProps: { + componentsProps: { label: componentsLabelProps }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..bef46f9d26e9f4 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js @@ -0,0 +1,9 @@ +fn({ + MuiStepLabel: { + defaultProps: { + slotProps: { + label: componentsLabelProps + } + }, + }, +}); From 54e77092388346740c9dd1f39509826d6840c2d3 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Fri, 1 Mar 2024 17:10:40 +0530 Subject: [PATCH 07/13] update --- packages/mui-material/src/StepLabel/StepLabel.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/StepLabel/StepLabel.test.js b/packages/mui-material/src/StepLabel/StepLabel.test.js index db9e52412c5b50..a3e11babb82f4a 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.test.js +++ b/packages/mui-material/src/StepLabel/StepLabel.test.js @@ -18,7 +18,7 @@ describe('', () => { render, refInstanceof: window.HTMLSpanElement, testVariantProps: { error: true }, - testLegacyComponentsProp: true, + testLegacyComponentsProp: false, slots: { label: { expectedClassName: classes.label }, }, From f986c3c545f44dce937d972ac0d3eb7a9d27ca00 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 4 Mar 2024 10:57:43 +0530 Subject: [PATCH 08/13] fix test --- packages/mui-material/src/StepLabel/StepLabel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index b6edc771d8b6f6..280190f6669b10 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -191,7 +191,6 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { {children ? ( From fa18b6dff6299b22fab48d929b89fb23be865dec Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 11 Mar 2024 11:37:17 +0530 Subject: [PATCH 09/13] add expected.js --- .../step-label-props/test-cases/expected.js | 7 ++++++- .../step-label-props/test-cases/theme.actual.js | 9 +++++++++ .../step-label-props/test-cases/theme.expected.js | 13 +++++++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js index d223f5c900f52b..b26c217086b36d 100644 --- a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/expected.js @@ -1,4 +1,9 @@ import StepLabel from '@mui/material/StepLabel'; ; -; +; diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js index 89f6f82410cd56..4f68c1fe687871 100644 --- a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.actual.js @@ -5,3 +5,12 @@ fn({ }, }, }); + +fn({ + MuiStepLabel: { + defaultProps: { + componentsProps: { label: componentsLabelProps }, + slotProps: { label: slotLabelProps }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js index bef46f9d26e9f4..c8874c72137cab 100644 --- a/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js +++ b/packages/mui-codemod/src/deprecations/step-label-props/test-cases/theme.expected.js @@ -7,3 +7,16 @@ fn({ }, }, }); + +fn({ + MuiStepLabel: { + defaultProps: { + slotProps: { + label: { + ...componentsLabelProps, + ...slotLabelProps + } + } + }, + }, +}); From cd2fc7695438ab1f745aab4e67181abc38a612ba Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 11 Mar 2024 12:00:51 +0530 Subject: [PATCH 10/13] fix test --- .../src/deprecations/step-label-props/step-label-props.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js index e3c7ac920970c3..90edfeab7791e4 100644 --- a/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js +++ b/packages/mui-codemod/src/deprecations/step-label-props/step-label-props.test.js @@ -31,7 +31,7 @@ describe('@mui/codemod', () => { const actual = transform( { source: read('./test-cases/theme.actual.js') }, { jscodeshift }, - { printOptions: { trailingComma: true } }, + { printOptions: { trailingComma: false } }, ); const expected = read('./test-cases/theme.expected.js'); From 273a35a521dcb9dbbb95a804296f1176a12b5f3a Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 11 Mar 2024 14:40:26 +0530 Subject: [PATCH 11/13] add migration guide --- .../migrating-from-deprecated-apis.md | 19 ++++++++++++++++ packages/mui-codemod/README.md | 22 +++++++++++++++++++ 2 files changed, 41 insertions(+) diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 52843015ca2010..ab93a64152fd0c 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -771,3 +771,22 @@ The Slider's `componentsProps` was deprecated in favor of `slotProps`: + slotProps={{ track: { testid: 'test-id' } }} /> ``` + +## Step Label + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/step-label-props +``` + +### componentsProps + +The Slider's `componentsProps` was deprecated in favor of `slotProps`: + +```diff + +``` diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index ea6820e4c49113..55e7f114c0eb14 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -783,6 +783,28 @@ npx @mui/codemod@next deprecations/pagination-item-classes npx @mui/codemod@next deprecations/slider-props ``` +#### `step-label-props` + +```diff + +``` + +```diff + MuiStepLabel: { + defaultProps: { +- componentsProps={{ label: labelProps }} ++ slotProps={{ label: labelProps }} + }, + }, +``` + +```bash +npx @mui/codemod@latest deprecations/step-label-props +``` + ### v5.0.0 #### `base-use-named-exports` From 18899ec2849711ffaf6e73ed1e9e068e60fb9d65 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Tue, 19 Mar 2024 18:53:43 +0530 Subject: [PATCH 12/13] diego review --- .../mui-material/src/StepLabel/StepLabel.d.ts | 22 ++++--------------- .../mui-material/src/StepLabel/StepLabel.js | 9 +++----- .../src/StepLabel/StepLabel.test.js | 1 - 3 files changed, 7 insertions(+), 25 deletions(-) diff --git a/packages/mui-material/src/StepLabel/StepLabel.d.ts b/packages/mui-material/src/StepLabel/StepLabel.d.ts index fa9235d2624239..bd389907657f0d 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.d.ts +++ b/packages/mui-material/src/StepLabel/StepLabel.d.ts @@ -23,7 +23,9 @@ export type StepLabelSlotsAndSlotProps = CreateSlotsAndSlotProps< export interface StepLabelOwnerState extends StepLabelProps {} -export interface StepLabelProps extends StandardProps> { +export interface StepLabelProps + extends StandardProps>, + StepLabelSlotsAndSlotProps { /** * In most cases will simply be a string containing a title for the label. */ @@ -57,22 +59,6 @@ export interface StepLabelProps extends StandardProps; - }; - /** - * The components used for each slot inside. - * @default {} - */ - slots?: {}; /** * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/). */ @@ -99,7 +85,7 @@ export type StepLabelClasskey = keyof NonNullable; * * - [StepLabel API](https://mui.com/material-ui/api/step-label/) */ -declare const StepLabel: ((props: StepLabelProps & StepLabelSlotsAndSlotProps) => JSX.Element) & { +declare const StepLabel: ((props: StepLabelProps) => JSX.Element) & { muiName: string; }; diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index 280190f6669b10..1daf1a459b7228 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -164,7 +164,7 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { }, }; - const [StepLabelLabelSlot, stepLabelLabelProps] = useSlot('label', { + const [LabelSlot, labelProps] = useSlot('label', { elementType: StepLabelLabel, externalForwardedProps, ownerState, @@ -190,12 +190,9 @@ const StepLabel = React.forwardRef(function StepLabel(inProps, ref) { ) : null} {children ? ( - + {children} - + ) : null} {optional} diff --git a/packages/mui-material/src/StepLabel/StepLabel.test.js b/packages/mui-material/src/StepLabel/StepLabel.test.js index a3e11babb82f4a..912a1a2b98d578 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.test.js +++ b/packages/mui-material/src/StepLabel/StepLabel.test.js @@ -18,7 +18,6 @@ describe('', () => { render, refInstanceof: window.HTMLSpanElement, testVariantProps: { error: true }, - testLegacyComponentsProp: false, slots: { label: { expectedClassName: classes.label }, }, From b8c4210dbb614167e7c194de0d864731b7520015 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Tue, 19 Mar 2024 11:46:02 -0300 Subject: [PATCH 13/13] Minor guide fixes Signed-off-by: Diego Andai --- .../migrating-from-deprecated-apis.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index ab93a64152fd0c..4e0c17cf442959 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -772,7 +772,7 @@ The Slider's `componentsProps` was deprecated in favor of `slotProps`: /> ``` -## Step Label +## StepLabel Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections: @@ -782,7 +782,7 @@ npx @mui/codemod@latest deprecations/step-label-props ### componentsProps -The Slider's `componentsProps` was deprecated in favor of `slotProps`: +The StepLabel's `componentsProps` was deprecated in favor of `slotProps`: ```diff