[Feature] Modal should have customizable sizes

[somangshu]

Summary

As a user I should be able to customize the modal size by changing the size property from the property pane or dragging the borders within the canvas.

Motivation

If a user wants to use the modal to show more information; ex comprising of tables, charts etc, he should be able to create a bigger modal viewport in order to create his own layout.

[areyabhishek]

@somangshu a better way would be allow them to resize the modal by dragging the boundaries. Why not do that instead of giving size options through property pane?

[somangshu]

@areyabhishek I agree. This is better is terms of customization!

[jsartisan]

@areyabhishek @somangshu I feel just giving 3-4 sizes to users like small, medium, large and huge would suffice every usecase.

[jsartisan]

Just got another request for resizing option today.

[GreenFlux]

a better way would be allow them to resize the modal by dragging the boundaries.

Yes, and allow individual anchoring the boundaries to each window edge. This could be used to create a sidebar menu that anchors on the top, left, and bottom, with a fixed width, and navigation sidebar that pops up from a 'hamburger menu'.

[phangs]

joining in. i'd prefer a draggable edges of the form to resize. but having a property of the modal to input a height and width would also be nice.

[somangshu]

Yes, and allow individual anchoring the boundaries to each window edge. This could be used to create a sidebar menu that anchors on the top, left, and bottom, with a fixed width, and navigation sidebar that pops up from a 'hamburger menu'.

@GreenFlux does this mean that the user should also be able to move the modal position?

[GreenFlux]

@somangshu , maybe not 'move' as in drag, but rather, redefine the fixed position & size so it's not always centered horizontally & vertically. Although dragging could also be useful.

At first I was thinking of submitting a separate feature request for a new widget that provides a sidebar or navigation drawer. But I think the same effect could be archived with a new type of Modal, or additional options for anchoring the Form Modal edges to the window edges- and specifying a fixed width for the sidebar to extend from to the right.

The main app UI should grey out in the background when a navigation drawer opens, just like the current Modal widget. So if we could just resize the Modal and lock 3 of the 4 edges to the screen edge, it would look like a navigation drawer and could be invoked from a 'hamburger menu' button nested in the top left.

Another use-case could be multiple small Modals placed all over a UI that are chained together to create a 'Get Started' style onboarding tour of the app. Each one could have buttons for continue & dismiss, and could be used to train new users.

[somangshu]

@GreenFlux thanks for taking the time to write such a detailed explanation 🙂🙏. Really liked the idea of having a drawer menu for navigation 🚀. We have examples of bottom sheets, side sheets, and full-screen dialogue in modern design systems like material UI. We are currently evaluating these options as either new widgets or making changes to the current modal. We will discuss this internally and try to quickly come up with solutions.

[somangshu]

@marks0351 can the modal resize be the same as widget resize? Also can we change the position on the modal based on props? ex: Two options, Centered or defined offset. Please share a better approach, If any

Another user requested for this feature today.

[somangshu]

Based on a discussion with @marks0351

Because of a platform limitation, Implementing resize handles need custom implementation. Resize handles today work for a widget only if it has a parent, which is not the case here. He can take this ahead in the following manner.

• Introduce a type property: This tells us what kind of modal we need
  • Traditional: Modal is center positioned with the height and width defined.
  • BottomSheet: Modal is bottom positioned (anchored) with height and width defined.
  • SideSheet: Modal is right/left positioned (anchored) with height (100% and disabled) and width defined.
    • Additional Properties: Alignment: Left/Right
• We also introduce rounded corners

This still is not the appropriate UX as the property pane is going to be in the view port when the above value have changed.

cc: @areyabhishek @momcilo-appsmith @Nikhil-Nandagopal

[areyabhishek]

We should introduce a good way to resize the modals instead of introducing the other properties. The main thing people need is a bigger modal. The other properties sound interesting, but not sure if they'll get used.

Different issue, but we also need an animation for opening and closing the modal. Today it pops open abruptly.

[somangshu]

@areyabhishek implementing resize handles is a bigger engineering effort and will take time, This is a much requested feature and hence the above proposed solutions. The side/bottom sheets are also important because they will allow our user to use this widgets for multiple use cases ex: a drawer (checkout the discussion above)

@marks0351 approx. how much time will we need to implement the resize handle feature?

[marks0351]

let me lay down the use cases that need a solve for this. should not take more than a sprint.

[tomjose92]

Hey guys, any timeline on when this enhancement will be rolled out? And what is the final option provided, resizing by drag or by defining height/width

[marks0351]

Hi @tomjose92 apologies, this got delayed because of the existing pipeline of features. we will soon update this issue with the details of the timeline and enhancements to Modal widget.