...

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

...