Skip to main content

Modal Migration Guide

Migrating from v7.2.0​

The new version uses the 3rd party MUI library for the Modal implementation. This change was made to improve the accessibility and usability of the modal component.

In doing so some of the props have changed and will need to be updated in order to effectively use the new version of the Modal component.

Changes​

The following props have been removed:

  • appElement
  • brand
  • shouldCloseOnOverlayClick
  • style
  • onHide

See below for an explanation of why these props have been removed and how to update your code to use the new version of the Modal component.

The new API is as follows:

  <Modal
    aria-labelledby="" // changed from `labelledby`
    aria-describedby="" // changed from `describedby`
    open={} // changed from `isOpen`
    className="" // unchanged
    onClose={} // unchanged
    onShow={} // unchanged
    shouldCloseOnOverlayClick // unchanged
  ></Modal>

FAQ​

How has Custom Styling changed?​

The MUI Modal component does not have a style prop. If you need to style the modal you can use the sx prop to add custom styles to the modal as per our example Custom Styling.

Why was onHide removed?​

The onHide prop is used for analytics reporting and has been removed as it can be handled in the onClose prop.

Check the Properties for more information on the new props and how to use them.