Prompt

General Guidelines

A prompt, sometimes known as a modal, is used when a user is required to take an action before they can continue interacting within a workflow.

Placement

Prompts overlay the current content and are meant to disrupt the user flow. Prompts should never be obscured, either by other elements or the screen edge.

Voice and Tone

The prompt message should be clear, concise, and intuitive. It should direct the user as to what they need to do next.

Be as explicit as possible when writing prompt buttons. Use affirmative action text to clearly indicate the outcome of the decision.

Grammar and Mechanics

• The header should be title case unless a question is being asked
• If the header is a question it should be sentence case

Usage

Do's and Don'ts

Do ask a a specific question, concisely elaborate on its impact, and provide clear action buttons

Do provide explicit confirmation and cancel buttons

Don’t pose an ambiguous question with unclear consequences

Coming soon...

Please enjoy a cat while you wait

Examples

For details on when to use this component, please see the Usage tab.

<button class="iris-button iris-button--primary" id="basic" data-prompt="basic_prompt">Basic prompt</button>

<div class="iris-prompt" id="basic_prompt" aria-hidden="true" data-size="medium">
    <section class="iris-prompt__content">
        <header class="iris-prompt__header">
            <h2 class="iris-prompt__title">Are you sure?</h2>
            <button class="iris-button iris-button--ghost" data-modifier="compressed" data-close>
                <span class="font-icon-cancel-x" aria-hidden="true"></span>
            </button>
        </header>
        <div class="iris-prompt__body">
            <p class="text--neutral mar--0">Clicking 'Yes' will remove this transfer or transfer series permanently. Do you wish to continue?</p>
        </div>
        <footer class="iris-prompt__footer">
            <button class="iris-button iris-button--secondary" data-close>No</button>
            <button class="iris-button iris-button--primary" data-close>Yes, delete</button>
        </footer>
    </section>
</div>

Notes:

• Any element that has a data-close attribute, will initiate a close action for the prompt it is a child of.
• Similarly, any element that has a data-prompt="[PROMPT-ID]" attribute will open the prompt that has an id attribute that matches with the prompt-id.

Variants

For the following variants, the only attribute that needs to be updated is the data-size attribute on the prompt element.

<div class="iris-prompt" data-size="small">
    // Small Prompt (350px)
</div>

<div class="iris-prompt" data-size="medium">
    // Medium Prompt (500px)
</div>

<div class="iris-prompt" data-size="large">
    // Large Prompt (620px)
</div>

Small

<button class="iris-button iris-button--primary" id="small" data-prompt="small_prompt">Small Prompt</button>

<div class="iris-prompt" id="small_prompt" aria-hidden="true" data-size="small">
    <section class="iris-prompt__content">
        <header class="iris-prompt__header">
            <h2 class="iris-prompt__title">Title</h2>
            <button class="iris-button iris-button--ghost" data-modifier="compressed" data-close>
                <span class="font-icon-cancel-x" aria-hidden="true"></span>
            </button>
        </header>

        <div class="iris-prompt__body">
            // Body Content
        </div>

        <footer class="iris-prompt__footer">
            // Footer Content
        </footer>
    </section>
</div>

Medium

<button class="iris-button iris-button--primary" id="medium" data-prompt="medium_prompt">Medium Prompt</button>

<div class="iris-prompt" id="medium_prompt" aria-hidden="true" data-size="medium">
    <section class="iris-prompt__content">
        <header class="iris-prompt__header">
            <h2 class="iris-prompt__title">Title</h2>
            <button class="iris-button iris-button--ghost" data-modifier="compressed" data-close>
                <span class="font-icon-cancel-x" aria-hidden="true"></span>
            </button>
        </header>

        <div class="iris-prompt__body">
            // Body content
        </div>

        <footer class="iris-prompt__footer">
            // Footer content
        </footer>
    </section>
</div>

Large

<button class="iris-button iris-button--primary" id="large" data-prompt="large_prompt">Large Prompt</button>

<div class="iris-prompt" id="large_prompt" aria-hidden="true" data-size="large">
    <section class="iris-prompt__content">
        <header class="iris-prompt__header">
            <h2 class="iris-prompt__title">Title</h2>
            <button class="iris-button iris-button--ghost" data-modifier="compressed" data-close>
                <span class="font-icon-cancel-x" aria-hidden="true"></span>
            </button>
        </header>

        <div class="iris-prompt__body">
            // Body content
        </div>

        <footer class="iris-prompt__footer">
            // Footer content
        </footer>
    </section>
</div>

Extra Large

<button class="iris-button iris-button--primary" id="xlarge" data-prompt="xlarge_prompt">Extra Large Prompt</button>

<div class="iris-prompt" id="xlarge_prompt" aria-hidden="true" data-size="xlarge">
    <section class="iris-prompt__content">
        <header class="iris-prompt__header">
            <h2 class="iris-prompt__title">Title</h2>
            <button class="iris-button iris-button--ghost" data-modifier="compressed" data-close>
                <span class="font-icon-cancel-x" aria-hidden="true"></span>
            </button>
        </header>

        <div class="iris-prompt__body">
            // Body content
        </div>

        <footer class="iris-prompt__footer">
            // Footer content
        </footer>
    </section>
</div>

Accessibility

As always, we want all of the components in the application to be accessible. Please keep the following notes in mind while using this component:

• If the prompt's label needs to be different text than contained in the element with a class of iris-prompt__title, add an aria-labelledby attribute to the prompt parent element to override.

Accessibility that Prompt provides for you:

• Handles adding role="dialog" to the parent prompt element and role="document" to the child content section.
• Adds an aria-label to the close button in the top right corner.
• Adds tab-index="1" to the parent prompt element to ensure it is focusable.
• Adds aria-labelledby="[TITLE_ID]" attribute to connect the prompt to the element with a class of iris-prompt__title.
• Manages setting the aria-hidden attribute on open and close.
• Keeps track of previously focused element and returns focus upon close.

API

Examples

Getting the PromptComponent Object of an Element

var element = document.getElementById('test_iris_prompt');
var promptComponent = Alkami.Iris.Prompt.componentForElement(element);

Getting the notification for opening / closing events

var element = document.getElementById('test_iris_prompt');

element.addEventListener('iris.prompt.opening', function(event) {
    console.log('The prompt has started opening.');
});

element.addEventListener('iris.prompt.opened', function(event) {
    console.log('The prompt has finished opening.');
});

element.addEventListener('iris.prompt.closing', function(event) {
    console.log('The prompt has started closing.');
});

element.addEventListener('iris.prompt.closed', function(event) {
    console.log('The prompt has finished closing.');
});

Events

Events fire on the source Element.

Constructors

new PromptComponent(element, options?)

• element - The iris-prompt Element.
• options - Options passed to the Prompt.

Creates a new Prompt Component.

Methods

static Prompt.init(node?)

Initializes any new Prompt Components found if node is not passed in, otherwise initializes only on the node. Returns an array of PromptComponent.

static Prompt.destroy(node)

Destroys the PromptComponent viewmodel associated with the node.

static Prompt.refresh(nodes)

Initializes any new prompt components on the node(s) passed in.. Returns an array of PromptComponent.

static Prompt.componentForElement(sourceElement)

• sourceElement - The element that may be a PromptComponent.

Checks if a DOM element has a PromptComponent object associated with it. Returns the PromptComponent object if one exists or null if one is not found.

Properties

static PromptComponent.open

• boolean

Set/Get the open state of the prompt, which will initiate an open or closing action when set.

static PromptComponent.freeze

• boolean

Set/Get the freeze state of the prompt, which will remove or add back the click and keyboard events to close the prompt.

Variables

The variables used in this component are as follows:

// Background variables
$prompt-background-default: $white;
$prompt-background-footer-default: $wild-sand;

// Box shadow variables
$prompt-box-shadow-default: transparentize(#000000, 0.85);

// Margin variables
$prompt-margin-default: 20px;

// Padding variables
$prompt-padding-default: 30px;

// Text color variables
$prompt-body-color-primary: $mine-shaft;
$prompt-body-color-secondary: $dove-gray;

// Width variables
$prompt-width-small: 350px;
$prompt-width-medium: 500px;
$prompt-width-large: 620px;

// z-index variables
$prompt-z-index-default: z-index('prompt');

Themeability

This component is not themeable.