Drawer

General Guidelines

A drawer is used when user input is needed to complete a task. These may include, but are not limited to, forms, dropdowns, selectors, and links.

Placement

A drawer slides into view from the right of the screen and spans the height of the screen.

Voice and Tone

Drawer content should remain clear, concise, and intuitive. Drawers should provide guidance as to what the user should do next.

Grammar and Mechanics

• Content should be sentence case
• Content should consist of short sentences that convey instructions clearly and concisely

Usage

Do's and Don'ts

Do use for complex tasks that require user input

Don’t use for critical confirmations that require user interaction

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-drawer="basic_drawer">Basic drawer</button>

<div class="iris-drawer" id="basic_drawer" aria-hidden="true" data-size="wide">
    <section class="iris-drawer__content">
        <header class="iris-drawer__header">
            <h2 class="iris-drawer__title">Create a Puppy</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-drawer__body">
            <div class="iris-form-group iris-form-group--stacked">
                <label class="iris-form-label required" for="message_message">Describe your puppy</label>
                <div class="iris-form-inputs pad-bottom--0">
                    <div class="iris-textfield">
                        <textarea class="iris-textfield__input" id="message_message" name="Message" placeholder="My puppy is..." required="required"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <footer class="iris-drawer__footer">
            <button class="iris-button iris-button--primary mar-bottom--md" data-close data-size="full-width" type="button">Create Puppy</button>
            <button class="iris-button iris-button--secondary" data-close data-size="full-width" type="button">Cancel</button>
        </footer>
    </section>
</div>

Notes:

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

Variants

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

<div class="iris-drawer" data-size="narrow">
    // Narrow drawer (350px)
</div>

<div class="iris-drawer" data-size="wide">
    // Wide drawer (500px)
</div>

Narrow

<button class="iris-button iris-button--primary" id="narrow" data-drawer="narrow_drawer">Narrow drawer</button>

<div class="iris-drawer" id="narrow_drawer" aria-hidden="true" data-size="narrow">
    <section class="iris-drawer__content">
        <header class="iris-drawer__header">
            <h2 class="iris-drawer__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-drawer__body">
            // Body Content
        </div>

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

Wide

<button class="iris-button iris-button--primary" id="wide" data-drawer="wide_drawer">Wide drawer</button>

<div class="iris-drawer" id="wide_drawer" aria-hidden="true" data-size="wide">
    <section class="iris-drawer__content">
        <header class="iris-drawer__header">
            <h2 class="iris-drawer__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-drawer__body">
            // Body content
        </div>

        <footer class="iris-drawer__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 drawer's label needs to be different text than contained in the element with a class of iris-drawer__title, add an aria-labelledby attribute to the drawer parent element to override.

Accessibility that drawer provides for you:

• Handles adding role="dialog" to the parent drawer 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 drawer element to ensure it is focusable.
• Adds aria-labelledby="[TITLE_ID]" attribute to connect the drawer to the element with a class of iris-drawer__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 DrawerComponent Object of an Element

var element = document.getElementById('test_iris_drawer');
var DrawerComponent = Alkami.Iris.DrawerComponent.componentForElement(element);

Getting the notification for opening / closing events

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

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

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

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

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

Events

Events fire on the source Element.

Constructors

new DrawerComponent(element, options?)

• element - The iris-drawer Element.
• options - Options passed to the Drawer.

Creates a new drawer Component.

Methods

static DrawerComponent.init(node?)

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

static DrawerComponent.destroy(node)

Destroys the DrawerComponent viewmodel associated with the node.

static DrawerComponent.refresh(nodes)

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

static DrawerComponent.componentForElement(sourceElement)

• sourceElement - The element that may be a DrawerComponent.

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

Properties

drawer.open

• boolean

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

drawer.freeze

• boolean

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

Variables

The variables used in this component are as follows:

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

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

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

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

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

// Width variables
$drawer-width-narrow: 350px;
$drawer-width-wide: 500px;

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

Themeability

This component is not themeable.