search

Temzasse / react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
https://temzasse.github.io/react-modal-sheet/
MIT License
783 stars 74 forks source link

Add example for Standard Bottom Sheet #132

Open mizdra opened 11 months ago

mizdra commented 11 months ago

Hello. I have saved hours of time by using this library. Thanks!

I want a sheet that shows only <Sheet.Header> when closed and both <Sheet.Header> and <Sheet.Content> when open. The main content of the page can still be accessed when only <Sheet.Header> is displayed. This is called "Standard Bottom Sheet" in the material design documentation.

Several people besides me seem to want this feature.

While this feature can be implemented using react-modal-sheet, it is tricky to implement. Also, it is not a case that is generously supported by react-modal-sheet, so some behavior will not be as expected.

To solve this problem, I thought it would be good to have a reference implementation of Standard Bottom Sheet. With it, anyone can implement the Standard Bottom Sheet. It would also make it possible to identify what kind of behavior is not as expected.

So I created a reference implementation of the Standard Bottom Sheet and created this PR to add to the example.

Could you accept this proposal?

DEMO

https://github.com/Temzasse/react-modal-sheet/assets/9639995/cc0da5d3-3df8-4188-b27c-c6ae439383a6

NOTE

I have written code comments detailing some of the bugs I found during the creation of the reference implementation. These should be transcribed in a separate issue, but we will not do that yet. I will do so when this PR is merged.

mizdra commented 11 months ago

Ready for review. Could you please re-review? @Temzasse

mizdra commented 10 months ago

Would you review this PR? @Temzasse