sp-dialog-wrapper

NPM 1.0.1

View Storybook

Try it on webcomponents.dev
Overview API

Description

sp-dialog-wrapper supplies an attribute based interface for the managed customization of an sp-dialog element and the light DOM supplied to it. This is paired it with an underlay attribute that opts-in to the use of an sp-underlay element between your page content and the sp-dialog that opens over it.

Usage

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/dialog

Import the side effectful registration of <sp-dialog-wrapper> via:

import '@spectrum-web-components/dialog/sp-dialog-wrapper.js';

When looking to leverage the DialogWrapper base class as a type and/or for extension purposes, do so via:

import { DialogWrapper } from '@spectrum-web-components/dialog';

Example

Small

<overlay-trigger type="modal">
    <sp-dialog-wrapper
        slot="click-content"
        headline="Dialog title"
        dismissable
        dismiss-label="Close"
        underlay
        footer="Content for footer"
    >
        Content of the dialog
    </sp-dialog-wrapper>
    <sp-button slot="trigger" variant="primary">Toggle Dialog</sp-button>
</overlay-trigger>

Fullscreen Mode

<overlay-trigger type="modal">
    <sp-dialog-wrapper
        slot="click-content"
        headline="Dialog title"
        mode="fullscreen"
        confirm-label="Keep Both"
        secondary-label="Replace"
        cancel-label="Cancel"
        footer="Content for footer"
    >
        Content of the dialog
    </sp-dialog-wrapper>
    <sp-button
        slot="trigger"
        variant="primary"
        onClick="
            const overlayTrigger = this.parentElement;
            const dialogWrapper = overlayTrigger.clickContent;
            function handleEvent({type}) {
                spAlert(this, `<sp-dialog-wrapper> '${type}' event handled.`);
                dialogWrapper.open = false;
                dialogWrapper.removeEventListener('confirm', handleEvent);
                dialogWrapper.removeEventListener('secondary', handleEvent);
                dialogWrapper.removeEventListener('cancel', handleEvent);
            }
            dialogWrapper.addEventListener('confirm', handleEvent);
            dialogWrapper.addEventListener('secondary', handleEvent);
            dialogWrapper.addEventListener('cancel', handleEvent);
        "
    >
        Toggle Dialog
    </sp-button>
</overlay-trigger>

Fullscreen Takeover Mode

<overlay-trigger type="modal">
    <sp-dialog-wrapper
        slot="click-content"
        headline="Dialog title"
        mode="fullscreenTakeover"
        confirm-label="Keep Both"
        secondary-label="Replace"
        cancel-label="Cancel"
        footer="Content for footer"
    >
        Content of the dialog
    </sp-dialog-wrapper>
    <sp-button
        slot="trigger"
        variant="primary"
        onClick="
            const overlayTrigger = this.parentElement;
            const dialogWrapper = overlayTrigger.clickContent;
            function handleEvent({type}) {
                spAlert(this, `<sp-dialog-wrapper> '${type}' event handled.`);
                dialogWrapper.open = false;
                dialogWrapper.removeEventListener('confirm', handleEvent);
                dialogWrapper.removeEventListener('secondary', handleEvent);
                dialogWrapper.removeEventListener('cancel', handleEvent);
            }
            dialogWrapper.addEventListener('confirm', handleEvent);
            dialogWrapper.addEventListener('secondary', handleEvent);
            dialogWrapper.addEventListener('cancel', handleEvent);
        "
    >
        Toggle Dialog
    </sp-button>
</overlay-trigger>

Accessibility

An sp-dialog-wrapper element leverages the headline attribute/property to label the dialog content for screen readers. The headline-visibility attribute will accept a value of "none" to suppress the headline visually.

Attributes and Properties

Property Attribute Type Default Description cancelLabel cancel-label string '' confirmLabel confirm-label string '' dismissLabel dismiss-label string 'Close' dismissable dismissable boolean false error error boolean false footer footer string '' headline headline string '' headlineVisibility headline-visibility 'none' | undefined hero hero string '' heroLabel hero-label string '' mode mode 'fullscreen' | 'fullscreenTakeover' | undefined noDivider no-divider boolean false open open boolean false responsive responsive boolean false When set to true, fills screens smaller than 350px high and 400px wide with the full dialog. secondaryLabel secondary-label string '' size size 's' | 'm' | 'l' | undefined underlay underlay boolean false

Slots

Name Description default slot content for the dialog

Events

Name Type Description cancel Event Announces that the "cancel" button has been clicked. close Event Announces that the dialog has been closed. confirm Event Announces that the "confirm" button has been clicked. secondary Event Announces that the "secondary" button has been clicked. undefined TransitionEvent