Mural's Modal package

Table of contents

1. Installation
2. Component usage
3. Available mixins

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.

1. Modal
2. Modal Header
3. Modal Footer
4. 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;
}