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 ''
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
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 #

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" 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.dispatchEvent(
new Event('close', {
bubbles: true,
})
);
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;
dialogWrapper.open = true;
function handleEvent({type}) {
spAlert(this, `<sp-dialog-wrapper> '${type}' event handled.`);
dialogWrapper.open = false;
dialogWrapper.dispatchEvent(
new Event('close', {
bubbles: true,
})
);
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>