Mural's Modal package
Table of contents
Installation
Review the design system's global usage guidelines to learn how to install components. This package's
name is @muraldevkit/ds-component-modal
.
Component usage
Review individual component READMEs for available properties.
- Modal
- Modal Header
- Modal Footer
- Modal Trigger - This is a wrapper component for both the trigger button and the modal to support proper accessibility setup between the two elements.
Available mixins
The modal component provides the following mixins for its animations for use with custom modals to remain consistent with the design language:
mrl-modal-scrim-in
mrl-modal-scrim-out
mrl-modal-dialog-in
mrl-modal-dialog-out
Example
The following example demonstrates how the mixins would be used in a custom implementation to ensure accessibility. Note, JavaScript is required to add/remove classes since the display property can not be transitioned.
.modal-scrim {
display: flex;
}
// Transitions
.modal-scrim.transition-in {
@include mrl-modal-scrim-in;
}
.modal-scrim.transition-out {
@include mrl-modal-scrim-out;
}
// For accessibility only transition the modal when
// the user hasn't turned on reduced motion
@media (prefers-reduced-motion: no-preference) {
.modal-scrim.transition-in .modal-dialog {
@include mrl-modal-dialog-in;
}
.modal-scrim.transition-out .modal-dialog {
@include mrl-modal-dialog-out;
}
}
// Completely hide the modal for keyboard and screen reader users
.modal-scrim.closed {
display: none;
}