From d68720bcf2d606489ee1df7636a03873c6509fb4 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Fri, 19 Jan 2024 21:45:17 +0100 Subject: [PATCH 01/21] initial pass on deprecation --- docs/pages/material-ui/api/speed-dial.json | 13 ++++- .../api-docs/speed-dial/speed-dial.json | 4 ++ .../mui-material/src/SpeedDial/SpeedDial.d.ts | 30 +++++++++++- .../mui-material/src/SpeedDial/SpeedDial.js | 49 +++++++++++++++---- .../src/SpeedDial/SpeedDial.test.js | 5 ++ 5 files changed, 88 insertions(+), 13 deletions(-) diff --git a/docs/pages/material-ui/api/speed-dial.json b/docs/pages/material-ui/api/speed-dial.json index fea2a75021da29..4930a24b4f0546 100644 --- a/docs/pages/material-ui/api/speed-dial.json +++ b/docs/pages/material-ui/api/speed-dial.json @@ -29,6 +29,14 @@ }, "open": { "type": { "name": "bool" } }, "openIcon": { "type": { "name": "node" } }, + "slotProps": { + "type": { "name": "shape", "description": "{ transition?: func
| object }" }, + "default": "{}" + }, + "slots": { + "type": { "name": "shape", "description": "{ transition?: elementType }" }, + "default": "{}" + }, "sx": { "type": { "name": "union", @@ -42,9 +50,10 @@ "name": "union", "description": "number
| { appear?: number, enter?: number, exit?: number }" }, - "default": "{\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen,\n}" + "default": "{\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen,\n}", + "deprecated": true }, - "TransitionProps": { "type": { "name": "object" } } + "TransitionProps": { "type": { "name": "object" }, "deprecated": true } }, "name": "SpeedDial", "imports": [ diff --git a/docs/translations/api-docs/speed-dial/speed-dial.json b/docs/translations/api-docs/speed-dial/speed-dial.json index 878f9981ebe621..ff6dcdf405324e 100644 --- a/docs/translations/api-docs/speed-dial/speed-dial.json +++ b/docs/translations/api-docs/speed-dial/speed-dial.json @@ -36,6 +36,10 @@ "openIcon": { "description": "The icon to display in the SpeedDial Fab when the SpeedDial is open." }, + "slotProps": { + "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." }, diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index b8c498d78fceec..7dac6d65f04be3 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -5,10 +5,13 @@ import { InternalStandardProps as StandardProps } from '..'; import { FabProps } from '../Fab'; import { TransitionProps } from '../transitions'; import { SpeedDialClasses } from './speedDialClasses'; +import { SlotProps } from '../utils/types'; export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown'; export type OpenReason = 'toggle' | 'focus' | 'mouseEnter'; +export interface SpeedDialSlotPropsOverrides {} + export interface SpeedDialProps extends StandardProps, 'children'> { /** @@ -83,15 +86,40 @@ export interface SpeedDialProps * enter: theme.transitions.duration.enteringScreen, * exit: theme.transitions.duration.leavingScreen, * } + * @deprecated */ transitionDuration?: TransitionProps['timeout']; /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * @deprecated */ TransitionProps?: TransitionProps; + /** + * The components used for each slot inside. + * + * @default {} + */ + slots?: { + transition?: React.ElementType; + }; + /** + * The extra props for the slot components. + * You can override the existing props or add new ones. + * + * @default {} + */ + slotProps?: { + transition?: SlotProps< + React.JSXElementConstructor, + SpeedDialSlotPropsOverrides, + SpeedDialOwnerState + >; + }; } +export interface SpeedDialOwnerState extends SpeedDialProps {} + /** * * Demos: diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index 9445349b829d76..24b455494377ad 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -16,6 +16,7 @@ import isMuiElement from '../utils/isMuiElement'; import useForkRef from '../utils/useForkRef'; import useControlled from '../utils/useControlled'; import speedDialClasses, { getSpeedDialUtilityClass } from './speedDialClasses'; +import useSlot from '../utils/useSlot'; const useUtilityClasses = (ownerState) => { const { classes, open, direction } = ownerState; @@ -139,9 +140,11 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { onOpen, open: openProp, openIcon, - TransitionComponent = Zoom, + slots = {}, + slotProps = {}, + TransitionComponent: TransitionComponentProp, + TransitionProps: TransitionPropsProp, transitionDuration = defaultTransitionDuration, - TransitionProps, ...other } = props; @@ -356,6 +359,18 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { }); }); + const backwardCompatibleSlots = { transition: TransitionComponentProp, ...slots }; + const backwardCompatibleSlotProps = { transition: TransitionPropsProp, ...slotProps }; + + const [TransitionSlot, transitionProps] = useSlot('transition', { + elementType: Zoom, + externalForwardedProps: { + slots: backwardCompatibleSlots, + slotProps: backwardCompatibleSlotProps, + }, + ownerState, + }); + return ( - + - + ', () => { 'componentsProp', 'reactTestRenderer', ], + slots: { + transition: { + expectedClassName: classes.actionsClosed, + }, + }, })); it('should render a Fade transition', () => { From 4a07fbe96e6795febcbbf744a9fb0a9c139e000e Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Sun, 21 Jan 2024 17:25:23 +0100 Subject: [PATCH 02/21] cleared faulty code --- packages/mui-material/src/SpeedDial/SpeedDial.test.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js index 10cac1be5bf3c9..93c45c42806d3f 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js @@ -40,11 +40,6 @@ describe('', () => { 'componentsProp', 'reactTestRenderer', ], - slots: { - transition: { - expectedClassName: classes.actionsClosed, - }, - }, })); it('should render a Fade transition', () => { From 6cc56a2f3f093094a8f7b5337ac721946c6f4aa8 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Fri, 12 Apr 2024 11:25:35 +0200 Subject: [PATCH 03/21] update to speed dial - pre proptypes --- .../mui-material/src/SpeedDial/SpeedDial.d.ts | 60 ++++++++++++------- .../mui-material/src/SpeedDial/SpeedDial.js | 23 ++++--- .../src/SpeedDial/SpeedDial.test.js | 1 + 3 files changed, 55 insertions(+), 29 deletions(-) diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index 7dac6d65f04be3..0c5bd55a3bd3d5 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -1,19 +1,52 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme } from '../styles'; -import { InternalStandardProps as StandardProps } from '..'; +// import { InternalStandardProps as StandardProps } from '..'; import { FabProps } from '../Fab'; import { TransitionProps } from '../transitions'; import { SpeedDialClasses } from './speedDialClasses'; -import { SlotProps } from '../utils/types'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown'; export type OpenReason = 'toggle' | 'focus' | 'mouseEnter'; -export interface SpeedDialSlotPropsOverrides {} +export interface SpeedDialSlots { + /** + * The component that renders the root. + * @default 'div' + */ + root?: React.ElementType; + /** + * The component that renders the transition. + * [Follow this guide](/material-ui/speedDial/#transitioncomponent-prop) to learn more about the requirements for this component. + * @default {} + */ + transition?: React.JSXElementConstructor< + TransitionProps & { children: React.ReactElement } + >; +} -export interface SpeedDialProps - extends StandardProps, 'children'> { +export interface SpeedDialComponentsPropsOverrides {} + +export interface SpeedDialTransitionSlotPropsOverrides {} + +export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps< + SpeedDialSlots, + { + root: SlotProps< + React.ElementType, + SpeedDialComponentsPropsOverrides, + SpeedDialOwnerState + >; + transition: SlotProps< + React.JSXElementConstructor, + SpeedDialTransitionSlotPropsOverrides, + SpeedDialOwnerState + >; + } +>; + +export interface SpeedDialProps extends SpeedDialSlotsAndSlotProps { /** * SpeedDialActions to display when the SpeedDial is `open`. */ @@ -99,23 +132,8 @@ export interface SpeedDialProps * The components used for each slot inside. * * @default {} + * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ - slots?: { - transition?: React.ElementType; - }; - /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * - * @default {} - */ - slotProps?: { - transition?: SlotProps< - React.JSXElementConstructor, - SpeedDialSlotPropsOverrides, - SpeedDialOwnerState - >; - }; } export interface SpeedDialOwnerState extends SpeedDialProps {} diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index 24b455494377ad..802e050d4e11d1 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -361,19 +361,27 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { const backwardCompatibleSlots = { transition: TransitionComponentProp, ...slots }; const backwardCompatibleSlotProps = { transition: TransitionPropsProp, ...slotProps }; + const externalForwardedProps = { + slots: backwardCompatibleSlots, + slotProps: backwardCompatibleSlotProps, + }; + + const [RootSlot, rootProps] = useSlot('root', { + elementType: SpeedDialRoot, + externalForwardedProps, + className: clsx(classes.root, className), + ownerState, + }); const [TransitionSlot, transitionProps] = useSlot('transition', { elementType: Zoom, - externalForwardedProps: { - slots: backwardCompatibleSlots, - slotProps: backwardCompatibleSlotProps, - }, + externalForwardedProps, ownerState, }); return ( - @@ -411,7 +418,7 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { > {children} - + ); }); diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.test.js b/packages/mui-material/src/SpeedDial/SpeedDial.test.js index 93c45c42806d3f..562cf84ea99326 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.test.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.test.js @@ -35,6 +35,7 @@ describe('', () => { refInstanceof: window.HTMLDivElement, muiName: 'MuiSpeedDial', testVariantProps: { direction: 'right' }, + slots: { transition: { testWithElement: null } }, skip: [ 'componentProp', // react-transition-group issue 'componentsProp', From 3f8fc25afeb3c7b4b157b7624397a1645d4c707e Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Fri, 12 Apr 2024 12:14:39 +0200 Subject: [PATCH 04/21] proptypes and docs --- docs/pages/material-ui/api/speed-dial.json | 30 ++++++++++++++----- .../api-docs/speed-dial/speed-dial.json | 13 ++++---- .../mui-material/src/SpeedDial/SpeedDial.d.ts | 9 ++++-- .../mui-material/src/SpeedDial/SpeedDial.js | 21 +++++-------- 4 files changed, 43 insertions(+), 30 deletions(-) diff --git a/docs/pages/material-ui/api/speed-dial.json b/docs/pages/material-ui/api/speed-dial.json index 4930a24b4f0546..c99be833b23d43 100644 --- a/docs/pages/material-ui/api/speed-dial.json +++ b/docs/pages/material-ui/api/speed-dial.json @@ -30,11 +30,17 @@ "open": { "type": { "name": "bool" } }, "openIcon": { "type": { "name": "node" } }, "slotProps": { - "type": { "name": "shape", "description": "{ transition?: func
| object }" }, + "type": { + "name": "shape", + "description": "{ root?: func
| object, transition?: func
| object }" + }, "default": "{}" }, "slots": { - "type": { "name": "shape", "description": "{ transition?: elementType }" }, + "type": { + "name": "shape", + "description": "{ root?: elementType, transition?: elementType }" + }, "default": "{}" }, "sx": { @@ -60,6 +66,20 @@ "import SpeedDial from '@mui/material/SpeedDial';", "import { SpeedDial } from '@mui/material';" ], + "slots": [ + { + "name": "root", + "description": "The component that renders the root.", + "default": "'div'", + "class": "MuiSpeedDial-root" + }, + { + "name": "transition", + "description": "The component that renders the transition.\n[Follow this guide](/material-ui/speedDial/#transitioncomponent-prop) to learn more about the requirements for this component.", + "default": "{}", + "class": null + } + ], "classes": [ { "key": "actions", @@ -102,12 +122,6 @@ "className": "MuiSpeedDial-fab", "description": "Styles applied to the Fab component.", "isGlobal": false - }, - { - "key": "root", - "className": "MuiSpeedDial-root", - "description": "Styles applied to the root element.", - "isGlobal": false } ], "spread": true, diff --git a/docs/translations/api-docs/speed-dial/speed-dial.json b/docs/translations/api-docs/speed-dial/speed-dial.json index ff6dcdf405324e..157d69eca95bfc 100644 --- a/docs/translations/api-docs/speed-dial/speed-dial.json +++ b/docs/translations/api-docs/speed-dial/speed-dial.json @@ -36,9 +36,7 @@ "openIcon": { "description": "The icon to display in the SpeedDial Fab when the SpeedDial is open." }, - "slotProps": { - "description": "The extra props for the slot components. You can override the existing props or add new ones." - }, + "slotProps": { "description": "The props used for each slot inside." }, "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." @@ -50,7 +48,7 @@ "description": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { @@ -75,7 +73,10 @@ "directionUp": { "description": "Styles applied to the root element if direction="up"" }, - "fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" }, - "root": { "description": "Styles applied to the root element." } + "fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" } + }, + "slotDescriptions": { + "root": "The component that renders the root.", + "transition": "The component that renders the transition. Follow this guide to learn more about the requirements for this component." } } diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index 0c5bd55a3bd3d5..64e6717196bf56 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { Theme } from '../styles'; -// import { InternalStandardProps as StandardProps } from '..'; +import { InternalStandardProps as StandardProps } from '..'; import { FabProps } from '../Fab'; import { TransitionProps } from '../transitions'; import { SpeedDialClasses } from './speedDialClasses'; @@ -46,7 +46,12 @@ export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps< } >; -export interface SpeedDialProps extends SpeedDialSlotsAndSlotProps { +export interface SpeedDialProps + extends Omit< + StandardProps, 'children'>, + 'slots' | 'slotProps' + >, + SpeedDialSlotsAndSlotProps { /** * SpeedDialActions to display when the SpeedDial is `open`. */ diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index 802e050d4e11d1..40d5c0cb29a958 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -366,13 +366,6 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { slotProps: backwardCompatibleSlotProps, }; - const [RootSlot, rootProps] = useSlot('root', { - elementType: SpeedDialRoot, - externalForwardedProps, - className: clsx(classes.root, className), - ownerState, - }); - const [TransitionSlot, transitionProps] = useSlot('transition', { elementType: Zoom, externalForwardedProps, @@ -380,8 +373,8 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { }); return ( - @@ -418,7 +412,7 @@ const SpeedDial = React.forwardRef(function SpeedDial(inProps, ref) { > {children} - + ); }); @@ -507,20 +501,19 @@ SpeedDial.propTypes /* remove-proptypes */ = { */ openIcon: PropTypes.node, /** - * The extra props for the slot components. - * You can override the existing props or add new ones. - * + * The props used for each slot inside. * @default {} */ slotProps: PropTypes.shape({ + root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** * The components used for each slot inside. - * * @default {} */ slots: PropTypes.shape({ + root: PropTypes.elementType, transition: PropTypes.elementType, }), /** From 7747baecaf829b0dd42d40e190ffee7079aaef71 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Fri, 12 Apr 2024 15:05:54 +0200 Subject: [PATCH 05/21] codemod --- .../src/deprecations/all/deprecations-all.js | 3 ++ .../deprecations/speed-dial-props/index.js | 1 + .../speed-dial-props/speed-dial-props.js | 20 ++++++++++++ .../speed-dial-props/test-cases/actual.js | 26 +++++++++++++++ .../speed-dial-props/test-cases/expected.js | 26 +++++++++++++++ .../test-cases/theme.actual.js | 32 +++++++++++++++++++ .../test-cases/theme.expected.js | 31 ++++++++++++++++++ 7 files changed, 139 insertions(+) create mode 100644 packages/mui-codemod/src/deprecations/speed-dial-props/index.js create mode 100644 packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js create mode 100644 packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/expected.js create mode 100644 packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js create mode 100644 packages/mui-codemod/src/deprecations/speed-dial-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 3bddd0595b93e3..7e4b7c9330e1a8 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -12,6 +12,8 @@ import transformToggleButtonGroupClasses from '../toggle-button-group-classes'; import transformStepLabelProps from '../step-label-props'; import transformBackdropProps from '../backdrop-props'; import transformStepConnectorClasses from '../step-connector-classes'; +import transformSpeedDialProps from '../speed-dial-props'; + /** * @param {import('jscodeshift').FileInfo} file @@ -32,6 +34,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformStepLabelProps(file, api, options); file.source = transformBackdropProps(file, api, options); file.source = transformStepConnectorClasses(file, api, options); + file.source = transformSpeedDialProps(file, api, options); return file.source; } diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/index.js b/packages/mui-codemod/src/deprecations/speed-dial-props/index.js new file mode 100644 index 00000000000000..d4a6ee9d390685 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/index.js @@ -0,0 +1 @@ +export { default } from './speed-dial-props'; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js new file mode 100644 index 00000000000000..127fd1c7bd0d3d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js @@ -0,0 +1,20 @@ +import movePropIntoSlots from '../utils/movePropIntoSlots'; + +/** + * @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; + + movePropIntoSlots(j, { + root, + componentName: 'SpeedDial', + propName: 'TransitionComponent', + slotName: 'transition', + }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js new file mode 100644 index 00000000000000..482876a9fbed64 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js @@ -0,0 +1,26 @@ +import SpeedDial from '@mui/material/SpeedDial'; +import { SpeedDial as MySpeedDial } from '@mui/material'; + +; +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/expected.js new file mode 100644 index 00000000000000..3e6d86405c7b5d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/expected.js @@ -0,0 +1,26 @@ +import SpeedDial from '@mui/material/SpeedDial'; +import { SpeedDial as MySpeedDial } from '@mui/material'; + +; +; +; +; +; +// should skip non MUI components +; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js new file mode 100644 index 00000000000000..f87fbf529ec64b --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js @@ -0,0 +1,32 @@ +fn({ + MuiSpeedDial: { + defaultProps: { + slots: { + transition: CustomTransition + } + }, + }, +}); + +fn({ + MuiSpeedDial: { + defaultProps: { + TransitionComponent: CustomTransition, + slots: { + root: 'div', + }, + }, + }, +}); + +fn({ + MuiSpeedDial: { + defaultProps: { + TransitionComponent: ComponentTransition, + slots: { + root: 'div', + transition: SlotTransition + }, + }, + }, +}); diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js new file mode 100644 index 00000000000000..1bd1367c1e0870 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js @@ -0,0 +1,31 @@ +fn({ + MuiSpeedDial: { + defaultProps: { + slots: { + transition: CustomTransition + } + }, + }, +}); + +fn({ + MuiSpeedDial: { + defaultProps: { + slots: { + root: 'div', + transition: CustomTransition + } + }, + }, +}); + +fn({ + MuiSpeedDial: { + defaultProps: { + slots: { + root: 'div', + transition: SlotTransition + } + }, + }, +}); From 5536df43e8d9771e4a5259dd88ec11670de22ceb Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Fri, 12 Apr 2024 15:10:26 +0200 Subject: [PATCH 06/21] SpeedDial code mod docs --- .../migrating-from-deprecated-apis.md | 18 ++++++++++++++++++ 1 file changed, 18 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 40e3b9d2f1ac53..c149a3dea6cbfb 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 @@ -1093,3 +1093,21 @@ Here's how to migrate: }, }, ``` + +## SpeedDial + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#speed-dial-props) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@next deprecations/speed-dial-props +``` + +### TransitionComponent + +The SpeedDial's `TransitionComponent` prop was deprecated in favor of `slots.transition`: + +```diff + Date: Fri, 12 Apr 2024 15:25:24 +0200 Subject: [PATCH 07/21] one new linegit add .! why? --- packages/mui-codemod/src/deprecations/all/deprecations-all.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index 7e4b7c9330e1a8..dc4f471e69ac48 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -14,7 +14,6 @@ import transformBackdropProps from '../backdrop-props'; import transformStepConnectorClasses from '../step-connector-classes'; import transformSpeedDialProps from '../speed-dial-props'; - /** * @param {import('jscodeshift').FileInfo} file * @param {import('jscodeshift').API} api From 72d8829688ba86079ce2eca3e2271d963f4121f3 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Tue, 16 Apr 2024 20:00:16 +0200 Subject: [PATCH 08/21] merge comments --- .../src/deprecations/speed-dial-props/speed-dial-props.js | 7 +++++++ .../speed-dial-props/test-cases/theme.actual.js | 4 +--- packages/mui-material/src/SpeedDial/SpeedDial.d.ts | 5 ++--- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js index 127fd1c7bd0d3d..311863e03593a3 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js @@ -16,5 +16,12 @@ export default function transformer(file, api, options) { slotName: 'transition', }); + movePropIntoSlots(j, { + root, + componentName: 'SpeedDial', + propName: 'TransitionProps', + slotName: 'transition', + }); + return root.toSource(printOptions); } diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js index f87fbf529ec64b..fb0efb21d6d1d9 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js @@ -1,9 +1,7 @@ fn({ MuiSpeedDial: { defaultProps: { - slots: { - transition: CustomTransition - } + TransitionComponent: CustomTransition, }, }, }); diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index 64e6717196bf56..c1fbe5ad276156 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -115,6 +115,7 @@ export interface SpeedDialProps * The component used for the transition. * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default Zoom + * * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ TransitionComponent?: React.JSXElementConstructor; /** @@ -124,20 +125,18 @@ export interface SpeedDialProps * enter: theme.transitions.duration.enteringScreen, * exit: theme.transitions.duration.leavingScreen, * } - * @deprecated */ transitionDuration?: TransitionProps['timeout']; /** * Props applied to the transition element. * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. - * @deprecated + * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ TransitionProps?: TransitionProps; /** * The components used for each slot inside. * * @default {} - * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ } From 6b3a6c105930f862f07eea152efe5fe9a7209ed1 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Tue, 16 Apr 2024 20:05:51 +0200 Subject: [PATCH 09/21] proptypes and docs --- docs/pages/material-ui/api/speed-dial.json | 16 ++++++++++++---- packages/mui-material/src/SpeedDial/SpeedDial.js | 4 ++-- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/docs/pages/material-ui/api/speed-dial.json b/docs/pages/material-ui/api/speed-dial.json index c99be833b23d43..28cefbf3a5406d 100644 --- a/docs/pages/material-ui/api/speed-dial.json +++ b/docs/pages/material-ui/api/speed-dial.json @@ -50,16 +50,24 @@ }, "additionalInfo": { "sx": true } }, - "TransitionComponent": { "type": { "name": "elementType" }, "default": "Zoom" }, + "TransitionComponent": { + "type": { "name": "elementType" }, + "default": "Zoom\n* @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)", + "deprecated": true, + "deprecationInfo": "Use slots.transition instead. This prop will be removed in v7. How to migrate" + }, "transitionDuration": { "type": { "name": "union", "description": "number
| { appear?: number, enter?: number, exit?: number }" }, - "default": "{\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen,\n}", - "deprecated": true + "default": "{\n enter: theme.transitions.duration.enteringScreen,\n exit: theme.transitions.duration.leavingScreen,\n}" }, - "TransitionProps": { "type": { "name": "object" }, "deprecated": true } + "TransitionProps": { + "type": { "name": "object" }, + "deprecated": true, + "deprecationInfo": "Use slotProps.transition instead. This prop will be removed in v7. How to migrate" + } }, "name": "SpeedDial", "imports": [ diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index 40d5c0cb29a958..9084a25401919b 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -528,6 +528,7 @@ SpeedDial.propTypes /* remove-proptypes */ = { * The component used for the transition. * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default Zoom + * * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ TransitionComponent: PropTypes.elementType, /** @@ -537,7 +538,6 @@ SpeedDial.propTypes /* remove-proptypes */ = { * enter: theme.transitions.duration.enteringScreen, * exit: theme.transitions.duration.leavingScreen, * } - * @deprecated */ transitionDuration: PropTypes.oneOfType([ PropTypes.number, @@ -550,7 +550,7 @@ SpeedDial.propTypes /* remove-proptypes */ = { /** * Props applied to the transition element. * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. - * @deprecated + * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ TransitionProps: PropTypes.object, }; From 18fbb9358459c0b8e26cc04acb166442d46051d3 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Mon, 29 Apr 2024 20:34:07 +0200 Subject: [PATCH 10/21] merge comments 2 --- .../speed-dial-props/speed-dial-props.js | 3 +- .../speed-dial-props/test-cases/actual.js | 31 +++++++++++++------ .../speed-dial-props/test-cases/expected.js | 15 ++++++++- .../test-cases/theme.actual.js | 5 ++- .../test-cases/theme.expected.js | 8 ++++- .../mui-material/src/SpeedDial/SpeedDial.d.ts | 11 +------ 6 files changed, 50 insertions(+), 23 deletions(-) diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js index 311863e03593a3..879a27a59c80b5 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.js @@ -1,4 +1,5 @@ import movePropIntoSlots from '../utils/movePropIntoSlots'; +import movePropIntoSlotProps from '../utils/movePropIntoSlotProps'; /** * @param {import('jscodeshift').FileInfo} file @@ -16,7 +17,7 @@ export default function transformer(file, api, options) { slotName: 'transition', }); - movePropIntoSlots(j, { + movePropIntoSlotProps(j, { root, componentName: 'SpeedDial', propName: 'TransitionProps', diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js index 482876a9fbed64..1eb5d7a6a64194 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js @@ -1,26 +1,39 @@ import SpeedDial from '@mui/material/SpeedDial'; import { SpeedDial as MySpeedDial } from '@mui/material'; -; -; +; +; ; + slotProps={{ + transition: CustomTransitionProps + }} />; ; + slotProps={{ + transition: CustomTransitionProps + }} />; ; + slotProps={{ + transition: CustomTransitionProps + }} />; // should skip non MUI components -; +; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/expected.js index 3e6d86405c7b5d..1eb5d7a6a64194 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/expected.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/expected.js @@ -3,24 +3,37 @@ import { SpeedDial as MySpeedDial } from '@mui/material'; ; ; ; ; ; // should skip non MUI components -; +; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js index fb0efb21d6d1d9..2abcdcfc2469c3 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js @@ -2,6 +2,7 @@ fn({ MuiSpeedDial: { defaultProps: { TransitionComponent: CustomTransition, + TransitionComponentProps: CustomTransitionProps, }, }, }); @@ -10,6 +11,7 @@ fn({ MuiSpeedDial: { defaultProps: { TransitionComponent: CustomTransition, + TransitionComponentProps: CustomTransitionProps, slots: { root: 'div', }, @@ -21,9 +23,10 @@ fn({ MuiSpeedDial: { defaultProps: { TransitionComponent: ComponentTransition, + TransitionComponentProps: CustomTransitionProps, slots: { root: 'div', - transition: SlotTransition + transition: SlotTransition, }, }, }, diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js index 1bd1367c1e0870..78bc33e14912cd 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js @@ -1,6 +1,8 @@ fn({ MuiSpeedDial: { defaultProps: { + TransitionComponentProps: CustomTransitionProps, + slots: { transition: CustomTransition } @@ -11,6 +13,8 @@ fn({ fn({ MuiSpeedDial: { defaultProps: { + TransitionComponentProps: CustomTransitionProps, + slots: { root: 'div', transition: CustomTransition @@ -22,9 +26,11 @@ fn({ fn({ MuiSpeedDial: { defaultProps: { + TransitionComponentProps: CustomTransitionProps, + slots: { root: 'div', - transition: SlotTransition + transition: SlotTransition, } }, }, diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index c1fbe5ad276156..d0bb9b907e3b38 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -11,11 +11,6 @@ export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown'; export type OpenReason = 'toggle' | 'focus' | 'mouseEnter'; export interface SpeedDialSlots { - /** - * The component that renders the root. - * @default 'div' - */ - root?: React.ElementType; /** * The component that renders the transition. * [Follow this guide](/material-ui/speedDial/#transitioncomponent-prop) to learn more about the requirements for this component. @@ -38,11 +33,7 @@ export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps< SpeedDialComponentsPropsOverrides, SpeedDialOwnerState >; - transition: SlotProps< - React.JSXElementConstructor, - SpeedDialTransitionSlotPropsOverrides, - SpeedDialOwnerState - >; + transition: SlotProps, {}, SpeedDialOwnerState>; } >; From 76921a67a82a230d9939696affb7c8dc9bf01970 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Mon, 29 Apr 2024 20:43:59 +0200 Subject: [PATCH 11/21] dedupe --- packages/pigment-css-react/LICENSE | 21 +++++++++++++++++++++ pnpm-lock.yaml | 1 + 2 files changed, 22 insertions(+) create mode 100644 packages/pigment-css-react/LICENSE diff --git a/packages/pigment-css-react/LICENSE b/packages/pigment-css-react/LICENSE new file mode 100644 index 00000000000000..af1beaff7f5645 --- /dev/null +++ b/packages/pigment-css-react/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 Call-Em-All + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index afe4625bd74d3a..907e77dfc14e31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6061,6 +6061,7 @@ packages: /@next/env@14.2.3: resolution: {integrity: sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==} + dev: false /@next/eslint-plugin-next@14.2.3: resolution: {integrity: sha512-L3oDricIIjgj1AVnRdRor21gI7mShlSwU/1ZGHmqM3LzHhXXhdkrfeNY5zif25Bi5Dd7fiJHsbhoZCHfXYvlAw==} From 7b1a608ed1c291552c096ee002f000ccbec3010e Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Mon, 29 Apr 2024 20:52:34 +0200 Subject: [PATCH 12/21] proptypes --- packages/mui-material/src/SpeedDial/SpeedDial.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index 9084a25401919b..c8ed3295acbcbd 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -513,7 +513,6 @@ SpeedDial.propTypes /* remove-proptypes */ = { * @default {} */ slots: PropTypes.shape({ - root: PropTypes.elementType, transition: PropTypes.elementType, }), /** From 6da354f91fb088262c51e9201a41e1b4f5064ce2 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Mon, 29 Apr 2024 21:00:28 +0200 Subject: [PATCH 13/21] just one more thing --- docs/pages/material-ui/api/speed-dial.json | 17 +++++++---------- .../api-docs/speed-dial/speed-dial.json | 4 ++-- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/docs/pages/material-ui/api/speed-dial.json b/docs/pages/material-ui/api/speed-dial.json index 28cefbf3a5406d..82321905f313e1 100644 --- a/docs/pages/material-ui/api/speed-dial.json +++ b/docs/pages/material-ui/api/speed-dial.json @@ -37,10 +37,7 @@ "default": "{}" }, "slots": { - "type": { - "name": "shape", - "description": "{ root?: elementType, transition?: elementType }" - }, + "type": { "name": "shape", "description": "{ transition?: elementType }" }, "default": "{}" }, "sx": { @@ -75,12 +72,6 @@ "import { SpeedDial } from '@mui/material';" ], "slots": [ - { - "name": "root", - "description": "The component that renders the root.", - "default": "'div'", - "class": "MuiSpeedDial-root" - }, { "name": "transition", "description": "The component that renders the transition.\n[Follow this guide](/material-ui/speedDial/#transitioncomponent-prop) to learn more about the requirements for this component.", @@ -130,6 +121,12 @@ "className": "MuiSpeedDial-fab", "description": "Styles applied to the Fab component.", "isGlobal": false + }, + { + "key": "root", + "className": "MuiSpeedDial-root", + "description": "Styles applied to the root element.", + "isGlobal": false } ], "spread": true, diff --git a/docs/translations/api-docs/speed-dial/speed-dial.json b/docs/translations/api-docs/speed-dial/speed-dial.json index 157d69eca95bfc..cbf06d4105efbe 100644 --- a/docs/translations/api-docs/speed-dial/speed-dial.json +++ b/docs/translations/api-docs/speed-dial/speed-dial.json @@ -73,10 +73,10 @@ "directionUp": { "description": "Styles applied to the root element if direction="up"" }, - "fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" } + "fab": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the Fab component" }, + "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "root": "The component that renders the root.", "transition": "The component that renders the transition. Follow this guide to learn more about the requirements for this component." } } From c52410c8365ab3b0e7eb45985809e7805f542a1e Mon Sep 17 00:00:00 2001 From: Harry Whorlow <79278353+harry-whorlow@users.noreply.github.com> Date: Mon, 29 Apr 2024 21:56:32 +0200 Subject: [PATCH 14/21] removed extra file Signed-off-by: Harry Whorlow <79278353+harry-whorlow@users.noreply.github.com> --- packages/pigment-css-react/LICENSE | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 packages/pigment-css-react/LICENSE diff --git a/packages/pigment-css-react/LICENSE b/packages/pigment-css-react/LICENSE deleted file mode 100644 index af1beaff7f5645..00000000000000 --- a/packages/pigment-css-react/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2014 Call-Em-All - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. From 011b3bb038beca8ec4f1daade92e71a1782b874a Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Tue, 30 Apr 2024 23:04:05 +0200 Subject: [PATCH 15/21] merge comments 3 --- docs/pages/material-ui/api/speed-dial.json | 5 +-- .../speed-dial-props/test-cases/actual.js | 32 +++++++------------ .../test-cases/theme.actual.js | 6 ++-- .../mui-material/src/SpeedDial/SpeedDial.d.ts | 5 --- .../mui-material/src/SpeedDial/SpeedDial.js | 1 - 5 files changed, 15 insertions(+), 34 deletions(-) diff --git a/docs/pages/material-ui/api/speed-dial.json b/docs/pages/material-ui/api/speed-dial.json index 82321905f313e1..d8f2ec9bb979aa 100644 --- a/docs/pages/material-ui/api/speed-dial.json +++ b/docs/pages/material-ui/api/speed-dial.json @@ -30,10 +30,7 @@ "open": { "type": { "name": "bool" } }, "openIcon": { "type": { "name": "node" } }, "slotProps": { - "type": { - "name": "shape", - "description": "{ root?: func
| object, transition?: func
| object }" - }, + "type": { "name": "shape", "description": "{ transition?: func
| object }" }, "default": "{}" }, "slots": { diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js index 1eb5d7a6a64194..8913121edfdf06 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/actual.js @@ -1,39 +1,29 @@ import SpeedDial from '@mui/material/SpeedDial'; import { SpeedDial as MySpeedDial } from '@mui/material'; -; -; +; +; ; +/>; ; +/>; ; +/>; // should skip non MUI components ; diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js index 2abcdcfc2469c3..f900d2c37e2aef 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.actual.js @@ -2,7 +2,7 @@ fn({ MuiSpeedDial: { defaultProps: { TransitionComponent: CustomTransition, - TransitionComponentProps: CustomTransitionProps, + TransitionProps: CustomTransitionProps, }, }, }); @@ -11,7 +11,7 @@ fn({ MuiSpeedDial: { defaultProps: { TransitionComponent: CustomTransition, - TransitionComponentProps: CustomTransitionProps, + TransitionProps: CustomTransitionProps, slots: { root: 'div', }, @@ -23,7 +23,7 @@ fn({ MuiSpeedDial: { defaultProps: { TransitionComponent: ComponentTransition, - TransitionComponentProps: CustomTransitionProps, + TransitionProps: CustomTransitionProps, slots: { root: 'div', transition: SlotTransition, diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index d0bb9b907e3b38..a00c5f6a3615b5 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -28,11 +28,6 @@ export interface SpeedDialTransitionSlotPropsOverrides {} export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps< SpeedDialSlots, { - root: SlotProps< - React.ElementType, - SpeedDialComponentsPropsOverrides, - SpeedDialOwnerState - >; transition: SlotProps, {}, SpeedDialOwnerState>; } >; diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index c8ed3295acbcbd..0c4bbda62dc701 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -505,7 +505,6 @@ SpeedDial.propTypes /* remove-proptypes */ = { * @default {} */ slotProps: PropTypes.shape({ - root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** From 6c3e6e30d00ce2c29eaeb7d63e4cc19450ec9692 Mon Sep 17 00:00:00 2001 From: Harry Whorlow Date: Fri, 3 May 2024 10:12:07 +0200 Subject: [PATCH 16/21] merge comments 4 --- .../speed-dial-props/speed-dial-props.test.js | 53 +++++++++++++++++++ .../test-cases/theme.expected.js | 18 ++++--- .../mui-material/src/SpeedDial/SpeedDial.d.ts | 9 ---- 3 files changed, 65 insertions(+), 15 deletions(-) create mode 100644 packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.test.js diff --git a/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.test.js b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.test.js new file mode 100644 index 00000000000000..bc31494da93870 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/speed-dial-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './speed-dial-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('speed-dial-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] speed-dial-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + {}, + ); + + 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/speed-dial-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js index 78bc33e14912cd..1b7872867de54e 100644 --- a/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js +++ b/packages/mui-codemod/src/deprecations/speed-dial-props/test-cases/theme.expected.js @@ -1,10 +1,12 @@ fn({ MuiSpeedDial: { defaultProps: { - TransitionComponentProps: CustomTransitionProps, - slots: { transition: CustomTransition + }, + + slotProps: { + transition: CustomTransitionProps } }, }, @@ -13,11 +15,13 @@ fn({ fn({ MuiSpeedDial: { defaultProps: { - TransitionComponentProps: CustomTransitionProps, - slots: { root: 'div', transition: CustomTransition + }, + + slotProps: { + transition: CustomTransitionProps } }, }, @@ -26,11 +30,13 @@ fn({ fn({ MuiSpeedDial: { defaultProps: { - TransitionComponentProps: CustomTransitionProps, - slots: { root: 'div', transition: SlotTransition, + }, + + slotProps: { + transition: CustomTransitionProps } }, }, diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index a00c5f6a3615b5..985c36894679ec 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -21,10 +21,6 @@ export interface SpeedDialSlots { >; } -export interface SpeedDialComponentsPropsOverrides {} - -export interface SpeedDialTransitionSlotPropsOverrides {} - export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps< SpeedDialSlots, { @@ -119,11 +115,6 @@ export interface SpeedDialProps * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ TransitionProps?: TransitionProps; - /** - * The components used for each slot inside. - * - * @default {} - */ } export interface SpeedDialOwnerState extends SpeedDialProps {} From 8f29467cd296112f45f8f20b0287d0ce16cf5637 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Fri, 3 May 2024 12:49:50 -0400 Subject: [PATCH 17/21] Update docs/translations/api-docs/speed-dial/speed-dial.json Signed-off-by: Diego Andai --- docs/translations/api-docs/speed-dial/speed-dial.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/translations/api-docs/speed-dial/speed-dial.json b/docs/translations/api-docs/speed-dial/speed-dial.json index cbf06d4105efbe..253eb3b01f9524 100644 --- a/docs/translations/api-docs/speed-dial/speed-dial.json +++ b/docs/translations/api-docs/speed-dial/speed-dial.json @@ -48,7 +48,7 @@ "description": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { From f1fab47a573df0adbde18999ac5d64a2e127e8bd Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Fri, 3 May 2024 12:50:24 -0400 Subject: [PATCH 18/21] Update packages/mui-material/src/SpeedDial/SpeedDial.d.ts Signed-off-by: Diego Andai --- packages/mui-material/src/SpeedDial/SpeedDial.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index 985c36894679ec..e4e5c16c7a330c 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -13,7 +13,7 @@ export type OpenReason = 'toggle' | 'focus' | 'mouseEnter'; export interface SpeedDialSlots { /** * The component that renders the transition. - * [Follow this guide](/material-ui/speedDial/#transitioncomponent-prop) to learn more about the requirements for this component. + * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. * @default {} */ transition?: React.JSXElementConstructor< From 04f068e81f5aa8d5ccce1ac926c529eca9832310 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Fri, 3 May 2024 12:53:31 -0400 Subject: [PATCH 19/21] Update migrating guide --- .../migrating-from-deprecated-apis.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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 c149a3dea6cbfb..c70fd914bb4d5d 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 @@ -1107,7 +1107,18 @@ npx @mui/codemod@next deprecations/speed-dial-props The SpeedDial's `TransitionComponent` prop was deprecated in favor of `slots.transition`: ```diff - +``` From 22f134a97c81ba057ed884f19694a7fa7fdbe7d0 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Fri, 3 May 2024 14:29:32 -0400 Subject: [PATCH 20/21] pnpm docs:api --- docs/pages/material-ui/api/speed-dial.json | 2 +- docs/translations/api-docs/speed-dial/speed-dial.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/material-ui/api/speed-dial.json b/docs/pages/material-ui/api/speed-dial.json index d8f2ec9bb979aa..e5ac729f1ff19f 100644 --- a/docs/pages/material-ui/api/speed-dial.json +++ b/docs/pages/material-ui/api/speed-dial.json @@ -71,7 +71,7 @@ "slots": [ { "name": "transition", - "description": "The component that renders the transition.\n[Follow this guide](/material-ui/speedDial/#transitioncomponent-prop) to learn more about the requirements for this component.", + "description": "The component that renders the transition.\n[Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.", "default": "{}", "class": null } diff --git a/docs/translations/api-docs/speed-dial/speed-dial.json b/docs/translations/api-docs/speed-dial/speed-dial.json index 253eb3b01f9524..6a74bed0beb770 100644 --- a/docs/translations/api-docs/speed-dial/speed-dial.json +++ b/docs/translations/api-docs/speed-dial/speed-dial.json @@ -48,7 +48,7 @@ "description": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { @@ -77,6 +77,6 @@ "root": { "description": "Styles applied to the root element." } }, "slotDescriptions": { - "transition": "The component that renders the transition. Follow this guide to learn more about the requirements for this component." + "transition": "The component that renders the transition. Follow this guide to learn more about the requirements for this component." } } From 727c7901f1ce4a154a6a50045a20581a82fee76d Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Fri, 3 May 2024 15:14:17 -0400 Subject: [PATCH 21/21] http -> https --- docs/translations/api-docs/speed-dial/speed-dial.json | 2 +- packages/mui-material/src/SpeedDial/SpeedDial.d.ts | 2 +- packages/mui-material/src/SpeedDial/SpeedDial.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/translations/api-docs/speed-dial/speed-dial.json b/docs/translations/api-docs/speed-dial/speed-dial.json index 6a74bed0beb770..361d0b25fb3df5 100644 --- a/docs/translations/api-docs/speed-dial/speed-dial.json +++ b/docs/translations/api-docs/speed-dial/speed-dial.json @@ -48,7 +48,7 @@ "description": "The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object." }, "TransitionProps": { - "description": "Props applied to the transition element. By default, the element is based on this Transition component." + "description": "Props applied to the transition element. By default, the element is based on this Transition component." } }, "classDescriptions": { diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index e4e5c16c7a330c..fcbd55f7ad01d8 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -111,7 +111,7 @@ export interface SpeedDialProps transitionDuration?: TransitionProps['timeout']; /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ TransitionProps?: TransitionProps; diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.js b/packages/mui-material/src/SpeedDial/SpeedDial.js index 0c4bbda62dc701..cb35e3a25de29d 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.js +++ b/packages/mui-material/src/SpeedDial/SpeedDial.js @@ -547,7 +547,7 @@ SpeedDial.propTypes /* remove-proptypes */ = { ]), /** * Props applied to the transition element. - * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. + * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component. * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) */ TransitionProps: PropTypes.object,