Modal

[btbunze]

Name of Component(s) Modal

Filename(s) Modal.vue

Purpose Display information in a focus-locked panel

Functionality

• The modal should have two states, open and closed
• Any number of buttons should be able to open a modal
• Any number of modals should be able to exist on a page
• Only one modal should be allowed to be open at a time
• Modals should appear at the end of the body
• Focus should be trapped inside modal while open
• Modal should be able to be closed by clicking the background, clicking a close button, or pressing esc

State

• Global
  • openModal(id) - Opens modal by id
  • closeModal() - Closes open modal
  • activeModalId - Id of the currently open modal

Props

• hasOverscroll - decides how to handle overflow content
• initialFocus - decides what element to focus when modal opens
• id (different name?) - for distinguishing between modals

Content Slots

• Panel Content - Contains all content of the modal's panel

Dependencies

• HeadlessUI
  • Dialog, DialogPanel, DialogTitle, DialogDescription, TransitionRoot

[DrewTJohnson]

@btbunze This looks great to me! I love the global state, I think that's a great idea.

[jakedohm]

@btbunze looks good to me too. Let's build/ship!!

[btbunze]

https://github.com/besteadfast/carbon/commit/1191143c16bfc8218640fde3d8359d1bc75c2dba

Ready for review! @jakedohm @DrewTJohnson

Usage:

<button @click="$store.modal.openModal('1')">Open</button>
<modal modal-id="1">
    <div class="modal-body">
        <div class="px-s8 py-s10 border-t-2 border-gray-200 group">
            <dialog-title>Example Title</dialog-title>
            <dialog-description>Example Description </dialog-description>
            <p>Other Body content</p>
        </div>
    </div>
</modal>