[material-ui][Dialog] Add slots and slotProps #44792

sai6855 · 2024-12-17T10:38:44Z

Part of #41281

…t props

mui-bot · 2024-12-17T10:41:53Z

Netlify deploy preview

https://deploy-preview-44792--material-ui.netlify.app/

@material-ui/core: parsed: +0.10% , gzip: +0.10%
Dialog: parsed: +0.59% , gzip: +0.32%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 51ca92b

sai6855 · 2024-12-17T11:07:06Z

In Dialog BackdropComponent and PaperComponent are being used as as={Component}

BackDropComponent

material-ui/packages/mui-material/src/Dialog/Dialog.js

Line 294 in f98a06c

as: BackdropComponent,

PaperComponent

material-ui/packages/mui-material/src/Dialog/Dialog.js

Line 321 in f98a06c

as={PaperComponent}

Should i deprecate these or leave as it is similarly to IconComponent like here #42157 (comment)

cc @DiegoAndai @siriwatknp

DiegoAndai · 2024-12-27T19:25:19Z

@sai6855, I think:

BackdropComponent can be deprecated in favor of slots.backdrop.component
PaperComponent can be deprecated in favor of slots.paper.component

Please test this though, as I haven't.

…into dialog-slots

siriwatknp · 2025-01-07T02:10:14Z

@sai6855 Is this PR ready for review? if yes, please switch from "draft" to "ready".

sai6855 · 2025-01-07T03:52:14Z

Migratio guide is pending, I'll add it mark it ready for review

sai6855 · 2025-01-09T07:19:46Z

I'm facing few issues while deprecating PaperComponent, will try to find solution and update

siriwatknp · 2025-01-13T06:56:47Z

packages/mui-material/src/Dialog/Dialog.d.ts


-export interface DialogProps extends StandardProps<ModalProps, 'children'> {
+export interface DialogSlots {


Missing root, backdrop, container, and paper slots.

…into dialog-slots

sai6855 · 2025-01-14T06:54:02Z

@siriwatknp PR is ready for review now, I haven't deprecated PaperComponent reason being, in existing version PaperComponent is not equivalent to PaperProps.component. In this demo if PaperComponent='form' instead of PaperProps.component styling of Dialog breaks, so i haven't deprecated PaperComponent yet.

check the demo here: https://stackblitz.com/edit/react-mlv38cpv?file=Demo.tsx,

siriwatknp · 2025-01-15T07:34:01Z

packages/mui-material/src/Dialog/Dialog.d.ts

@@ -1,12 +1,96 @@
 import * as React from 'react';
 import { SxProps, Breakpoint } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { BackdropProps, InternalStandardProps as StandardProps, Theme } from '..';


Suggested change

import { BackdropProps, InternalStandardProps as StandardProps, Theme } from '..';

import { InternalStandardProps as StandardProps, Theme } from '..';

import { BackdropProps } from '../Backdrop';

fixed here 4c61efb

siriwatknp · 2025-01-15T07:35:20Z

packages/mui-material/src/Dialog/Dialog.d.ts

+  transition?: React.JSXElementConstructor<
+    TransitionProps & { children?: React.ReactElement<any, any> }
+  >;


Suggested change

transition?: React.JSXElementConstructor<

TransitionProps & { children?: React.ReactElement<any, any> }

>;

transition?: React.ElementType

Is there a blocker using React.ElementType? The reason to use it is to widening the type so user can pass their custom component.

not really, i used previous type. updated here 6ae70b7

siriwatknp · 2025-01-15T07:36:22Z

packages/mui-material/src/Dialog/Dialog.d.ts

+     * By default, the avaible props are based on a div element.
+     */
+    container: SlotProps<
+      React.ElementType<React.HTMLAttributes<HTMLDivElement>>,


Suggested change

React.ElementType<React.HTMLAttributes<HTMLDivElement>>,

'div',

I found that this is simpler.

fixed 79e8ea6

siriwatknp · 2025-01-15T07:38:17Z

packages/mui-material/src/Dialog/Dialog.d.ts

@@ -125,3 +212,5 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
 * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
 */
 export default function Dialog(props: DialogProps): React.JSX.Element;
+
+export interface DialogOwnerState extends DialogProps {}


Suggested change

export interface DialogOwnerState extends DialogProps {}

export interface DialogOwnerState extends Omit<DialogProps, 'slots' | 'slotProps'> {}

to prevent recursive types.

fixed 12c6f4f

siriwatknp · 2025-01-15T08:00:17Z

packages/mui-material/src/Dialog/Dialog.js

+    slotProps: backwardCompatibleSlotProps,
+  };
+
+  const [RootSlot, rootSlotProps] = useSlot('root', {


Suggested change

const [RootSlot, rootSlotProps] = useSlot('root', {

const [RootSlot, rootSlotProps] = useSlot('root', {

shouldForwardComponentProp: true,

If the elementType is a styled component of another styled component, this prop should be set to true, so that slotProps.root.component does not replace the inner styled component.

got it added here 51ca92b.

If the elementType is a styled component of another styled component, this prop should be set to true, so that slotProps.root.component does not replace the inner styled component.

Does that mean, shouldForwardComponent:true is missing here? given TableSortLabelRoot is of another styled component (ButtonBase)

https://github.com/sai6855/material-ui/blob/51ca92bdb08fadb1a08ce75ac2ed1b75f02fa445/packages/mui-material/src/TableSortLabel/TableSortLabel.js#L132-L133

Yes, that's right.

siriwatknp · 2025-01-15T08:01:53Z

packages/mui-material/src/Dialog/Dialog.js

+  const [BackdropSlot, { as: backdropComponent, ...backdropSlotProps }] = useSlot('backdrop', {
+    elementType: DialogBackdrop,
+    externalForwardedProps,
+    ownerState,
+  });


Suggested change

const [BackdropSlot, { as: backdropComponent, ...backdropSlotProps }] = useSlot('backdrop', {

elementType: DialogBackdrop,

externalForwardedProps,

ownerState,

});

const [BackdropSlot, backdropSlotProps] = useSlot('backdrop', {

shouldForwardComponentProp: true,

elementType: DialogBackdrop,

externalForwardedProps,

ownerState,

});

With shouldForwardComponentProp: true, the backdropSlotProps will not produce as prop.

[material-ui][Dialog] Add slots and slotProps and deprecate *Componen…

454319b

…t props

sai6855 marked this pull request as draft December 17, 2024 10:38

sai6855 added docs Improvements or additions to the documentation component: dialog This is the name of the generic UI component, not the React module! deprecation New deprecation message package: material-ui Specific to @mui/material labels Dec 17, 2024

fix

7132318

sai6855 added 2 commits December 17, 2024 17:18

fix tests

435948a

fix import

8f1a0ee

sai6855 requested a review from siriwatknp December 18, 2024 05:57

sai6855 and others added 10 commits January 6, 2025 10:53

Merge branch 'master' into dialog-slots

3a81578

add paperslot

db4bea2

Merge branch 'master' into dialog-slots

8d2d1cb

fix class name

9c57580

add dialog backdrop

f6fc3f3

Merge branch 'dialog-slots' of https://github.com/sai6855/material-ui …

58dac5b

…into dialog-slots

update d.ts

82fea7a

dcos:api

3a71f67

typescript formatted

13c0dae

dcos:api

9702617

sai6855 and others added 4 commits January 7, 2025 11:54

remove paper and backdrop slots

b030488

fix

55c170f

fix

a9abb54

Merge branch 'master' into dialog-slots

c9cbda4

siriwatknp reviewed Jan 13, 2025

View reviewed changes

sai6855 and others added 10 commits January 13, 2025 13:36

add paper slot

af3d06f

add backdrop slot

9093003

add container slot

6bbf6ba

add root slot

aef9657

add slots

f447b80

Merge branch 'master' into dialog-slots

208807a

add prop descriptions

517369f

proptypes

6665320

Merge branch 'dialog-slots' of https://github.com/sai6855/material-ui …

cbef359

…into dialog-slots

prettier

de4de37

sai6855 marked this pull request as ready for review January 14, 2025 06:27

sai6855 requested a review from siriwatknp January 14, 2025 06:54

siriwatknp reviewed Jan 15, 2025

View reviewed changes

sai6855 added 4 commits January 15, 2025 13:16

fix Backdrop import

4c61efb

fix transition slot type

6ae70b7

use 'div'

79e8ea6

prevent recursive types in DialogOwnerState

12c6f4f

sai6855 changed the title ~~[material-ui][Dialog] Add slots and slotProps and deprecate *ComponentProps~~ [material-ui][Dialog] Add slots and slotProps Jan 15, 2025

sai6855 requested a review from siriwatknp January 15, 2025 07:59

siriwatknp reviewed Jan 15, 2025

View reviewed changes

add shouldForwordComponent prop

51ca92b

sai6855 requested a review from siriwatknp January 15, 2025 09:41

siriwatknp approved these changes Jan 15, 2025

View reviewed changes

sai6855 merged commit ff9b9e4 into mui:master Jan 15, 2025
22 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui][Dialog] Add slots and slotProps #44792

[material-ui][Dialog] Add slots and slotProps #44792

sai6855 commented Dec 17, 2024

mui-bot commented Dec 17, 2024 •

edited

Loading

sai6855 commented Dec 17, 2024

DiegoAndai commented Dec 27, 2024

siriwatknp commented Jan 7, 2025 •

edited

Loading

sai6855 commented Jan 7, 2025

sai6855 commented Jan 9, 2025

siriwatknp Jan 13, 2025

sai6855 commented Jan 14, 2025

siriwatknp Jan 15, 2025

sai6855 Jan 15, 2025

siriwatknp Jan 15, 2025

sai6855 Jan 15, 2025

siriwatknp Jan 15, 2025

sai6855 Jan 15, 2025

siriwatknp Jan 15, 2025

sai6855 Jan 15, 2025

siriwatknp Jan 15, 2025

sai6855 Jan 15, 2025

siriwatknp Jan 15, 2025

siriwatknp Jan 15, 2025


		export interface DialogProps extends StandardProps<ModalProps, 'children'> {
		export interface DialogSlots {

	import { BackdropProps, InternalStandardProps as StandardProps, Theme } from '..';
	import { InternalStandardProps as StandardProps, Theme } from '..';
	import { BackdropProps } from '../Backdrop';

	React.ElementType<React.HTMLAttributes<HTMLDivElement>>,
	'div',

	export interface DialogOwnerState extends DialogProps {}
	export interface DialogOwnerState extends Omit<DialogProps, 'slots' \| 'slotProps'> {}

	const [RootSlot, rootSlotProps] = useSlot('root', {
	const [RootSlot, rootSlotProps] = useSlot('root', {
	shouldForwardComponentProp: true,

[material-ui][Dialog] Add slots and slotProps #44792

[material-ui][Dialog] Add slots and slotProps #44792

Conversation

sai6855 commented Dec 17, 2024

mui-bot commented Dec 17, 2024 • edited Loading

Netlify deploy preview

Bundle size report

sai6855 commented Dec 17, 2024

DiegoAndai commented Dec 27, 2024

siriwatknp commented Jan 7, 2025 • edited Loading

sai6855 commented Jan 7, 2025

sai6855 commented Jan 9, 2025

Choose a reason for hiding this comment

sai6855 commented Jan 14, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mui-bot commented Dec 17, 2024 •

edited

Loading

siriwatknp commented Jan 7, 2025 •

edited

Loading