sp-dialog-wrapper

Examples

API

Attributes and Properties #

Property	Attribute	Type	Default	Description
`cancelLabel`	`cancel-label`	`string`	`''`
`confirmLabel`	`confirm-label`	`string`	`''`
`dir`	`dir`	`'ltr' \| 'rtl'`	`'ltr'`
`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.`

Description #

sp-dialog-wrapper supplies an attribute based interface for the managed custmization 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 #

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" placement="none">
    <sp-dialog-wrapper
        slot="click-content"
        headline="Dialog title"
        dismissable
        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" placement="none">
    <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" placement="none">
    <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.

Spectrum Web Components