APPROVED DESIGN IN PROGRESS IMPLEMENTATION PENDING

A modal is an element that overlays the main window. It creates a mode where the main window is disabled and non-interactive, while remaining visible. The modal presents a dialog box to the user. Users must interact with the modal in order to return to the main window.

Our current Modal

Current properties and variants

• renderHeaderCloseButton: True / False

• renderDefaultCloseButton: True / False

• Sizes

  • Small: max-width = 300px

  • Default: max-width = 500px

  • Large: max-width = 800px

  • Extra Large: max-width = 1140px

This proposal is for adding new properties and then using those to offer preconfigured Alert Dialog and Confirmation Dialog components.

🌳 New Properties, Variants and Behaviors

Scrolling (True or False)

When set to True the height of the modal will be capped at 80% the height of the viewport and modal content will scroll inside the dialog.

Note: ensure that scroll behavior in the dialog uses inertial scrolling (https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/)

When set to False, if the modal would exceed the height of the viewport it will scroll along the whole page

Pearson’s Modal component articulates these options well: https://uxframework.pearson.com/c/modal#behavior

Modal Footer Text (optional)

Allow for additional text or markup to be added to the left of modal actions

Make the top Close X button sticky

For a non-scrolling modal that exceeds the height of the viewport make the X button sticky to the top of viewport.

Add a Fullscreen Size

Previously named “Fleximodal” add a size that makes the modal full screen. A fullscreen modal should force the Scrolling option to true. See Fullscreen Modal.

Updated Standard Modal

Footer Row Text

Scrollable Standard Modal

Large Modal

Large Modal Sample

Mobile

Preconfigured modal components

Using the new property options above, create the following components:

• Marketing Modal

• Alert Modal

🛠 Resources

• Existing component: https://paragon-edx-next.netlify.app/components/modal