[Modal] Normalize the component & usage across all products
Open
@mnajdova is already working on this.
Since Aug 24, 2023.
scope: modal
umbrella
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
This issue will serve as an umbrella for all issues (inconsistencies) found around the modal vs non-modal features noticed on all different products.
- Material UI - we are missing a non-modal dialog demo. We technically have the
hideBackdropprop that makes this possible, but we are not educating people about this. The docs states "A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.", but there are also non-modal dialogs scenarios, that should likely support, for e.g. check https://accessuse.eu/en/non-modal-dialogs.html#:~:text=A%20non%2Dmodal%20dialog%20pops,partly%20covered%20by%20the%20dialog. This page has great examples of both use-cases https://www.nngroup.com/articles/modal-nonmodal-dialog/ - Joy UI - we are missing a page for the Dialog, the only demo we have lives on the modal's page, it may not be straight forward to find it - https://mui.com/joy-ui/react-modal/#modal-dialog. The modal should be treated as a utility component, used in different components, we should not educate people to use it directly, but have components for the most common use-cases it is associated with, like dialogs, drawers etc.
- Inconsistencies between using modal vs non-modal popups in some components. For e.g. on the Select component, Material UI uses a modal element for the options list - this means that when the select is open, users cannot directly take different action by clicking on an element outside of the list. For example try this demo - https://cml5vj.csb.app/ (open the select and try clicking on the button while it is opened). While this works great for mobile, the behavior is a bit odd on desktop, as you can likely find a spot to click in order to close the select without taking unintended action. On the contrast Base UI (and Joy UI) offer only the non-modal option, which works great on desktop, but could be problematic on mobile devices, where you may not have an available space to tab in order to close the select without taking an action. In my opinion we should support both of these scenarios in all libraries.
Issues
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.