Problem Statement

Currently, it is not possible to disable the Close button in the top right corner of a modal. Since we ave recently introduced the ability to disable all buttons using a prop, there is a disparity/incosnsitency, as this Close button in the top right could reflect the functionality of a “Close” button at the bottom, which can now be disabled while the former can not.

Goal

Provide a consistent User Experience with Modals.

Context

Ongoing development and enhancement of our Design System

Details

Implement a disableCloseButton prop that disables the top right (“X”) Cose button.

Notes

Currently, we have disableConfirmButton and disableCancelButton props that specifically target buttons we assume to exist in many (simpler) use cases when a user has not passed any other custom children to ModalFooter. When using custom children in ModalFooter we leave it to the responsibilty of the user to disable these whenever they seem fit.
In both cases it is currently impossible to disable the Close button in the Modal header. When a user uses the buttons that we render and does not pass custom children, when setting disableCancelButton to true, it seems safe to assume both buttons will serve the same purpose, and we should disable the CloseButton accordingly.

Estimation

• Priority: High
• Effort: Low
• Status: Backlog

Acceptance Criteria

• the Close button in the modal header can be disabled using a disableCloseButton prop
• When disableCancelButton is set to true, disable the Close Button, too.
• Tests exist and pass
• Story with disabled Close button is in storybook