Implement "bottom sheets" functionality

[markshust]

I'd like to use a "fully expanded bottom sheet", ex. https://www.google.com/design/spec/components/bottom-sheets.html#bottom-sheets-modal-bottom-sheets

This functionality is quite needed for modal's that slide up from the bottom. I didn't notice it anywhere in the code.

[rkstar]

something like what materializecss has done would be perfect.

this is the code implementation of their leanModal component

[markshust]

Similar to the bottom sheet style, yes. But also with fully expanded option to go full screen modal.

[justjacksonn]

May as well make it capable of any side, not just bottom, as well as center out, etc.

[markshust]

I believe the material in this case is only supposed to be derived from the bottom up, as that is where the paper is coming from. I guess you can leave it up to the user though, to not follow this if they wish :)

[chadfurman]

Where are we at with this ticket? It looks like I should just use https://github.com/TeamWertarbyte/material-ui-bottom-sheet

[xsh2047]

This component is very similar to the Drawer component, would we just refactor to incorporate the additional features or utilize it?

[kgregory]

@chadfurman @markoshust As @zabieru96 points out, the Drawer component supports opening from the bottom (see demo).

This could be a decent starting point for you. To implement a fully-expanded bottom sheet using a drawer, you'd set anchor to bottom, override the anchorBottom class so that top is set to 0 instead of auto, and include a toolbar with a close button.

Perhaps this is all we'd need to do for an initial offering of BottomSheet:

• wrap a bottom Drawer
• expose a prop for fully-expanded behavior
• make sure that the Drawer leaves room for the user to dismiss it when it is not set for full-expansion
• make left and right auto and define a width at the large breakpoint (see: Tablet/Desktop)

@oliviertassinari I know you had done some nice work with bottom sheets before, what do you think?

[oliviertassinari]

@kgregory One important limitation we have with the Drawer is that it's not supporting touch events. This is something we could fix later, but it's an important limitation on mobile. We can always build the feature on top of the Drawer, but this is going to require quite some work. We can also build the component on top of the Modal. That might be simpler. I can't say for sure without trying.