“Dialog” Component

Design: zeplin.

The modal dialog is a disruptive dialog box that appears in front of a page’s content. It is used to convey important information within context of the page, since it blocks the page’s content while keeping it in view (on medium and large viewports).

Modal dialogs should be used intentionally and sparingly. They are disruptive to a user’s flow and thus should be used to:

Confirm a user’s action, especially if the action is destructive (e.g. dropping a course) or irreversible.
Provide additional information—especially rich information containing lists or images—that cannot fit into a tooltip or text on the page.
Let users fill up a form within context, in cases where this helps to either speed up the process or return users to their original flows after the completion of the form. For instance, the “Add a member to a course schedule” modal allows an admin to quickly add someone to a course schedule without having to go to a separate page.

Note About Accessibility

Always use button to open dialogs. Even when in cases where the button is supposed to look like a link, button with class “link” should be used instead of an anchor tag. Using a button is better for accessibility.

Basic Dialog

Usage

<button class="button button--primary" data-dialog="basicDialog">
    Open Modal Dialog
</button>

<x-dialog id="basicDialog">
    @slot('title')
        Dialog title
    @endslot

    <p>Dialog content</p>
</x-dialog>

Confirmation Dialog

Usage

<button class="button button--primary" data-dialog="deleteCommentDialog">
    Open Confirmation Dialog
</button>

<x-dialog id="deleteCommentDialog">
    @slot('title')
        Delete reply?
    @endslot

    <p>
        Are you sure you want to delete your reply? This action cannot be undone.
    </p>

    @slot('footer')
        <button value="ACTION_DELETE" class="button button--warning">Yes, delete comment</button>
        <button value="" class="button button--ghost">Cancel</button>
    @endslot
</x-dialog>

To intercept delete button click we can use code like below:

const deleteCommentDialog = document.querySelector('#deleteCommentDialog');
deleteCommentDialog.addEventListener('close', () => {
    if (deleteCommentDialog.returnValue === 'DELETE_ACTION') {
        deleteReply();
    }
});

Dialog with AJAX form

Usage

<button class="button button--primary" data-dialog="searchMemberDialog">
    Open Form Modal Dialog
</button>

<x-dialog id="searchMemberDialog">
    @slot('title')
        Add a member to a course schedule
    @endslot

    <div class="form__field">
        <label for="memberKeyword" class="pb-small mb-none">
            Name, email or member ID
        </label>
        <div class="inputGroup">
            <input type="text" id="memberKeyword" name="keyword" placeholder="Please enter a member’s name, ID, or email address" required minlength="3" autofocus autocomplete="off">
            <div class="inputGroup__addon inputGroup__addon--noBorder">
                <button type="submit" class="button button--primary ixdf-spinner">
                    Search
                </button>
            </div>
        </div>
    </div>
</x-dialog>

Below is example of code that could handle AJAX requests:

const authorDialog = document.querySelector('#searchMemberDialog');
authorDialog.addEventListener('submit', (event) => {
    event.preventDefault();

    populateAuthorSearchResults(authorDialog);
});
authorDialog.addEventListener('close', () => {
    cleanupAuthorSearchResults(authorDialog);
});