[Feature]: Introduce side or bottom drawer widget(alternative to modal)

areyabhishek commented 2 years ago

Is there an existing issue for this?

[X] I have searched the existing issues

Summary

Side drawers are a common UI element in web apps and mobile apps today. They look elegant and can serve different purposes.

Examples:

Why should this be worked on?

This is a widget that can replace Modal's functionality in some places and in other places it can act like a menu bar.

dilippitchika commented 2 years ago

Similar to the modal widget, this is a container which slides on top of the current page. This is useful for letting users focus without having to leave the page

Adding references from component libraries https://ant.design/components/drawer/ https://mdbootstrap.com/docs/standard/extended/drawer/#docsTabsOverview https://chakra-ui.com/docs/components/overlay/drawer

dilippitchika commented 2 years ago

Internal user was looking for this - https://www.notion.so/appsmith/Rishabh-Kashyap-85ea180b031b42e58ef0f7a4910580cf

vishaldfreak commented 1 year ago

Interested in this.

neumartin commented 1 year ago

Very useful and interesting feature! Do you know if this is implemented or planned for a coming feature?

GeraldineAlphonse commented 9 months ago

Interested in this too !

Nikhil-Nandagopal commented 9 months ago

@GeraldineAlphonse we don't have this on our roadmap yet. Could you tell us your use case here?

pulyabacsi commented 8 months ago

@GeraldineAlphonse we don't have this on our roadmap yet. Could you tell us your use case here?

I can share my use cases for this:

1. Multiple actions for a selected row, some actions needs additional guidence text: I have an item in my datatable (e.g an Invoice, IT asset etc.) I could add a menu button to access all actions for that particular row, but sometime is make sense to add some helper text to the button about what it will perform. With a side drawer I could list out all the actions, sectionize them and add the helper text where needed.

2. I need some info from the screen where I opened the drawer: Modals are covering the center of the screen. Drawer functions similar to a modal, giving the user a focused action area. I could the selected rows details, or compare an oepend row to another row visible in my datatable. There are loads of reasons why drawer in some cases is better than a modal.

There can be three types of drawers which could be useful I think. 1) Overlay: Comes on top of the content like a modal from the right side. Can be closed. 2) Fixed: a fixed panel on the right side, breaking the page into two parts. Cannot eb closed. 3) Sqeezing: Sometimes it is a good idea to have a drawer which is not sliding on top of the data. It should sqeeze the visible page from the right side. Can be closed.

appsmithorg / appsmith