Support for bottom sheets from Material Design specs

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

It would be great to have an implementation of the Bottom sheet component from the 2019 Material Design specs (https://material.io/components/sheets-bottom/#). I didn't see an issue for it already so I figured I'd create this one to get the conversation started. I'd be potentially interested in helping to create that implementation, though not in the immediate future.

The specs break the component down into three types, which each have pretty distinct behaviour:

1. Standard bottom sheets

• These are permanently anchored to the bottom of the app and are elevated above the other content
• There are no guidelines on how these should look, other than that they should always be 100% width and anchored to the very bottom of the page

2. Modal bottom sheets

• These are sheets that appear after some user interaction and cover part of the screen, with a modal backdrop covering the rest of it
• Once open, they can potentially opened in "full screen" by swiping up
• They can be closed by swiping down or tapping on the backdrop
  • It's recommended to have some UI like a close button to close the fullscreen mode
• Again, there are very few guidelines on how these should look

3. Expanding bottom sheets

• These are a very specific UI component that appears at the bottom right of the screen and, when clicked, open a fullscreen modal sheet

I don't think it's necessary to provide a component for Standard bottom sheets, since this can already be achieved very easily, however it would be useful to have components for Modal bottom sheets and Expanding bottom sheets. Since they quite different, I think they should be separate components. I am more interested in the Modal bottom sheets which I have seen used much more in real applications and I think has more use cases, so I think that work should be considered a higher priority.

Since the specs don't give much direction on the visuals of the modal sheet, I think that should be completely left to the user, and only the behaviour should be implemented. Perhaps, with the exception of an optional bar element (not sure what to call it, see screenshots).

P.S. maybe we could call the bar element a "handle bar" or "handle" ?

Motivation 🔦

I think these are a really useful component which I've been seeing more and more in modern apps and I find are delightful to use. They are a great way to make options available to mobile users since it keeps things accessible to the thumbs at the bottom of the screen. It also helps to keep context with the activity you were in before opening the sheet. I would like to use something like this in one of my projects in the future.

I think the most complex part of implementing a bottom sheet is the swiping interactions and making them nice and fluid. If they don't work well, it loses much of its magic and delight-fullness. This is why I think it should be part of mui core, so that it is easy for developers to add a bottom sheet with solid behaviour with little effort.

Start with the linked 2019 Material Design bottom-sheet specification and determine whether the scope includes modal sheets, expanding sheets, or both. No files or tests are named; completion would require agreed behavior for opening, swiping, resizing, fullscreen transitions, and backdrop dismissal, followed by implementation and coverage for those interactions.