Problem with current dialogs:

• light dialogs are often too small > little window with lots of fields to be scrolled

• strong dialogs are often too big > huge window with one field and amply white space

• various glitches on both dialog types (browser resizing, responsiveness, button sizes)

• bad usability

• 2 (fixed) sizes is a concept from M5 which comes from a time where responsiveness hadn't established yet

Solution:

"One responsive dialog size with option light or strong"

1. harmonize size for both light and strong dialogs

   • fixed width: 740px (intermediate size btw current light and strong)

   • min height: 312px

   • flexible height according to the content, max height can span from browser top to bottom (top/bottom spacing 30px)

   • scroll bar only if more content than max height

2. add responsive behavior

   • 2 breakpoints, 3 sizes

3.  light, strong and tabs are configurable options

   • background: light or strong (both block interaction with the part of the interface it covers, note that in the current implementation in M6 only the strong dialogs block the interaction)

   • tab sheet: yes or no (aka complex dialog)

Detailed specs

https://app.zeplin.io/project/5acc848ede054e0a4865f805/dashboard?seid=5da5d523b61eac2f84fc407e

Note for documentation:

https://documentation.magnolia-cms.com/display/DOCS61/Dialog+types

When to use light or strong dialogs

• strong dialogs ask for data collection

• light dialogs ask for quick input but do not severely interrupt the user

When to use simple or complex dialogs (with or without tabs)

• simple: whenever only few data points need to be collected

• complex: allows to collect larger amounts of data than its simple counterpart