mui / mui/material-ui

[Modal] Normalize the component & usage across all products

Open
#38,630 1 comment 2 reactions 1 assignee View on GitHub

@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 hideBackdrop prop 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.