[Joy UI] Add Modal component

[siriwatknp]

Preview: https://deploy-preview-34043--material-ui.netlify.app/joy-ui/react-modal/

Joy provides 3 modal components (I decided not to create a Dialog component yet):

• Modal (similar to Material UI)
• ModalClose (new): a handy close button that fits nicely with the Modal, ModalDialog
• ModalDialog (new): for rendering a role="dialog" modal
• ModalDialogTitle (similar to Material UI's DialogTitle) bind with ModalDialog's aria-labelledby attribute. (continue in a separate PR)
• ModalDialogDescription (new): this component handles the binding logic with the ModalDialog similar to ModalDialogTitle but with aria-describedby attribute. (continue in a separate PR)

According to WAI ARIA, dialog can be modal or non-modal.

It is more explicit to render a modal dialog with ModalDialog component. The good part is that it produces a single DOM which is easier to customize compare to the Material UI's Dialog. To display an alert dialog, just switch to role="alertdialog".

Note: Material UI's Dialog is specific to Material Design's Dialog which is not the same as WAI ARIA.

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

@mui/joy: parsed: +4.91% , gzip: +5.15%

Generated by 🚫 dangerJS against 3063797

[Sandeep06Dev]

I think we should have consider on these two :

1. In the demo of Full-screen Modal, it will be good to have a exit button.
2. No Transition effect example? Previously we have this https://mui.com/material-ui/react-dialog/#transitions

[siriwatknp]

1. In the demo of Full-screen Modal, it will be good to have a exit button.

Good call, will add it to the demo.

2. No Transition effect example? Previously we have this https://mui.com/material-ui/react-dialog/#transitions

In the first stage of Joy, I won't add built-in transition props to keep the component lean as much as possible. However, I do understand that the transition is quite important from the UX perspective, so I will add a demo on how to integrate other transition/animation libraries with Joy UI.

[danilo-leal]

This is looking great so far! A few considerations that popped up while reviewing it:

• We probably could make this clearer but are the ModalDialogTitle and ModalDialogDescription able to receive the same props as the Typography component? I see how that wouldn't make sense_but_ I also see how that would be intuitive to expect (I did, in fact, while doing the small doc demos tweaks).
• Directly related to that, should we say something about using a Typography element inside any of these two? Is this ok to do or to avoid? What are the use cases I'd want to do that?
• Are we missing a ModalOverlay component? How do I customize that?
• Should we add a prop for easily centering the modal both horizontally and vertically? That would be handy.
• Should we add the capacity control whether or not clicking on the overlay closes the modal/dialog?

[siriwatknp]

@danilo-leal Hey, I decided to remove the ModalDialogTitle and ModalDialogDescription to make this PR smaller. I think we can continue the title and description in a separate PR to try out other alternatives. What do you think?

[danilo-leal]

Sweet, ok! Two quick questions before we wrap this up:

1. I know that in Material UI we place the Modal component within the Utils category, but should we keep doing that? It sounds intuitive to me to have it in a Feedback/Overlay category of sorts.
2. Should we add an introduction/playgrund demo to it?

[siriwatknp]

Sweet, ok! Two quick questions before we wrap this up:

1. I know that in Material UI we place the Modal component within the Utils category, but should we keep doing that? It sounds intuitive to me to have it in a Feedback/Overlay category of sorts.

Agreed!

2. Should we add an introduction/playgrund demo to it?

Added!

[danilo-leal]

Awesome, this is looking great! One last thing I'm seeing is a discrepancy on the layout prop － on the docs, we say the Modal only supports center and fullScreen but the playground shows a possible top value 🤔

[siriwatknp]

Awesome, this is looking great! One last thing I'm seeing is a discrepancy on the layout prop － on the docs, we say the Modal only supports center and fullScreen but the playground shows a possible top value 🤔

The top (the default value) has been added recently (it was null before which does not sound right when building the playground).

[danilo-leal]

Should we make center the default, then? I'm struggling to find justification for the top value 🤔 It feels like something uncommon.

[siriwatknp]

Should we make center the default, then? I'm struggling to find justification for the top value 🤔 It feels like something uncommon.

So, only center (default) and fullscreen, is that what you mean? Only 2 values look good enough to me, developers can extend it anyway.

[danilo-leal]

Yup, that's it!

[siriwatknp]

Yup, that's it!

Done!

[danilo-leal]

Amazing, nice work Jun! 🎉