sp-dialog

NPM

1.0.0

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description dismissLabel dismiss-label string 'Close' dismissable dismissable boolean false error error boolean false mode mode 'fullscreen' | 'fullscreenTakeover' | undefined noDivider no-divider boolean false size size 's' | 'm' | 'l' | undefined variant variant AlertDialogVariants

Slots #

Name Description button Button elements addressed to this slot may be placed below the content when not delivered in a fullscreen mode footer Content addressed to the `footer` will be placed below the main content and to the side of any `[slot='button']` content heading Acts as the heading of the dialog. This should be an actual heading tag `` hero Accepts a hero image to display at the top of the dialog default slot Content not addressed to a specific slot will be interpreted as the main content of the dialog

Events #

Name Type Description close Event Announces that the dialog has been closed.

1.0.0 (2024-10-31) #

Bug Fixes #

  • dialog-wrapper: update heading to fully span grid area (#4810) (7d1f461)

0.49.0 (2024-10-15) #

Note: Version bump only for package @spectrum-web-components/dialog

0.48.1 (2024-10-01) #

Note: Version bump only for package @spectrum-web-components/dialog

0.48.0 (2024-09-17) #

Note: Version bump only for package @spectrum-web-components/dialog

0.47.2 (2024-09-03) #

Note: Version bump only for package @spectrum-web-components/dialog

0.47.1 (2024-08-27) #

Note: Version bump only for package @spectrum-web-components/dialog

0.47.0 (2024-08-20) #

Note: Version bump only for package @spectrum-web-components/dialog

0.46.0 (2024-08-08) #

Features #

  • upgrade menu and dialog grid css (#4638) (ab9d468)

0.45.0 (2024-07-30) #

Note: Version bump only for package @spectrum-web-components/dialog

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/dialog

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/dialog

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/dialog

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/dialog

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/dialog

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/dialog

0.42.1 (2024-04-02) #

Bug Fixes #

  • dialog-wrapper: add dismiss-label attribute for the close button's label (#4154) (c450a09)

0.42.0 (2024-03-19) #

Bug Fixes #

  • styles, theme: surface exports that omit Spectrum Vars proactively (#4142) (5b524c1)

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/dialog

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/dialog

0.41.0 (2024-02-13) #

Bug Fixes #

  • tray: only allow "click" events when they "pointerdown"ed on the Underlay (#4020) (4f9aa4a)

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/dialog

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/dialog

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/dialog

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/dialog

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/dialog

0.40.0 (2023-11-16) #

Note: Version bump only for package @spectrum-web-components/dialog

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/dialog

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/dialog

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/dialog

0.39.1 (2023-10-06) #

Bug Fixes #

  • alert-dialog: use resize observer in place of page resize event for content measurement work (b963813)

0.39.0 (2023-09-25) #

Bug Fixes #

  • alert-dialog: add Alert Dialog package (#3501) (1062847)

0.38.0 (2023-09-05) #

Bug Fixes #

  • dialog: include tab order management at slotchange time (0c7a079)

0.37.0 (2023-08-18) #

Features #

  • dialog: leverage Overlay v2 (5c21ab5)

0.36.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/dialog

0.35.0 (2023-07-31) #

Note: Version bump only for package @spectrum-web-components/dialog

0.34.0 (2023-07-11) #

Note: Version bump only for package @spectrum-web-components/dialog

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/dialog

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/dialog

0.32.0 (2023-06-01) #

Bug Fixes #

  • overlay: ensure CSS calcs resolve to the expected measurement value (51a3feb)

Features #

  • popover: use core tokens (68328cc)

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/dialog

0.30.0 (2023-05-03) #

Bug Fixes #

  • add docs and address PR comments (568062a)
  • add grid areas workaround locally until available in Spectrum CSS (4c5ed9d)
  • allow ActiveOverlay to manage open state (a7c4cff)
  • centralize updated first focusable selector (300e84c)
  • correct the relationship between overlayWillCloseCallback and phased animations (c63db8d)
  • dialog: dialog wrapper headline a11y (205e8f7)
  • dialog: don't show DialogWrapper divider when there's no headline (b46f724)
  • dialog: ensure :focus-visible polyfill availability (b50e396)
  • dialog: include all dependencies (9be0da0)
  • dialog: include all dependencies (7090320)
  • dialog: more complete support for Spectrum CSS input (925934a)
  • dialog: normalize sizing technique to align with future t-shirt size usage (da33797)
  • dialog: prevent "fullscreen*" dialogs from being "dissmisable" (c3a6420)
  • dialog: support "error" in wrapper, prevent undelay closure when not dismissable (6789102)
  • dialog: swap secondary and cancel button order (3df1705)
  • dialog: updates for delivering dialog content accessibly (f0ed33c)
  • dialog: use default value for "resolveTransitionPromise" for open by default dialogs (7317a3f)
  • dialog: use styles from the modal package (0f04ce1)
  • ensure browser understandable extensions (f4e59f7)
  • have sp-dialog-wrapper confirm scroll management of its dialog when opening (fed9536)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • match footer default color to content (fd2b6f9)
  • prevent "hover" overlays from returning focus to the root of a parent modal (ceb8fa7)
  • prevent Dialog Wrapper from dispatching two "close" events (be6d23b)
  • prevent reuse of applied IDs when associating Dialogs to their content (962c3e8)
  • pull out rendering for Dialog into individual methods (84aa3ec)
  • remove nothing update (b066ebc)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update side effect listings (8160d3a)
  • update to latest spectrum-css packages (a5ca19f)
  • use icons without "size" values (3fc7c91)

Features #

  • action-button: add action button pattern (03ac00a)
  • add dialog, dialog-wrapped, and underlay elements (3df9050)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • dialog: descendent attribute support, responsive attribute added (568cedb)
  • dialog: update spectrum css input (405ca5e)
  • dialog: use latest @spectrum-css/dialog beta (b5d5718)
  • include all Dev Mode files in side effects (f70817c)
  • leverage "exports" field in package.json (321abd7)
  • leverage latest Spectrum button API (9caf2f6)
  • overlay: manage focus throwing and tab trapping (27a0b53)
  • picker: support responsive delivery of menu (20031d1)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • use latest exports specification (a7ecf4b)

0.11.16 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.15 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.14 (2023-03-22) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.13 (2023-03-08) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.12 (2023-02-13) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.11 (2023-02-08) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.10 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.9 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.8 (2022-12-08) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.7 (2022-11-21) #

Bug Fixes #

  • dialog: dialog wrapper headline a11y (205e8f7)
  • dialog: don't show DialogWrapper divider when there's no headline (b46f724)

0.11.6 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.5 (2022-10-28) #

Note: Version bump only for package @spectrum-web-components/dialog

0.11.4 (2022-10-17) #

Bug Fixes #

  • correct the relationship between overlayWillCloseCallback and phased animations (c63db8d)

0.11.3 (2022-10-10) #

Bug Fixes #

  • prevent reuse of applied IDs when associating Dialogs to their content (962c3e8)

0.11.2 (2022-09-14) #

Bug Fixes #

  • add docs and address PR comments (568062a)
  • add grid areas workaround locally until available in Spectrum CSS (4c5ed9d)

0.11.1 (2022-08-24) #

Bug Fixes #

  • prevent "hover" overlays from returning focus to the root of a parent modal (ceb8fa7)
  • dialog: swap secondary and cancel button order (3df1705)

0.11.0 (2022-08-09) #

Features #

  • include all Dev Mode files in side effects (f70817c)

0.10.9 (2022-08-04) #

Bug Fixes #

  • pull out rendering for Dialog into individual methods (84aa3ec)
  • remove nothing update (b066ebc)

0.10.8 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/dialog

0.10.7 (2022-06-29) #

Bug Fixes #

  • prevent Dialog Wrapper from dispatching two "close" events (be6d23b)

0.10.6 (2022-06-07) #

Bug Fixes #

  • dialog: use default value for "resolveTransitionPromise" for open by default dialogs (7317a3f)

0.10.5 (2022-05-27) #

Note: Version bump only for package @spectrum-web-components/dialog

0.10.4 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/dialog

0.10.3 (2022-04-21) #

Note: Version bump only for package @spectrum-web-components/dialog

0.10.2 (2022-03-30) #

Note: Version bump only for package @spectrum-web-components/dialog

0.10.1 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/dialog

0.10.0 (2022-03-04) #

Features #

  • leverage latest Spectrum button API (9caf2f6)

0.9.1 (2022-02-22) #

Bug Fixes #

  • dialog: updates for delivering dialog content accessibly (f0ed33c)

0.9.0 (2022-02-02) #

Features #

  • picker: support responsive delivery of menu (20031d1)

0.8.3 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/dialog

0.8.2 (2022-01-07) #

Note: Version bump only for package @spectrum-web-components/dialog

0.8.1 (2021-12-13) #

Note: Version bump only for package @spectrum-web-components/dialog

0.8.0 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/dialog

0.7.1 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/dialog

0.7.0 (2021-11-02) #

Bug Fixes #

  • centralize updated first focusable selector (300e84c)

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.6.18 (2021-10-12) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.17 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.16 (2021-09-13) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.15 (2021-08-24) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.14 (2021-08-17) #

Bug Fixes #

  • dialog: normalize sizing technique to align with future t-shirt size usage (da33797)

0.6.13 (2021-08-03) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.12 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.11 (2021-07-01) #

Bug Fixes #

  • have sp-dialog-wrapper confirm scroll management of its dialog when opening (fed9536)
  • match footer default color to content (fd2b6f9)

0.6.10 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.9 (2021-06-07) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.8 (2021-05-24) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.7 (2021-05-12) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.6 (2021-04-15) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.5 (2021-04-09) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.4 (2021-03-29) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.3 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.2 (2021-03-22) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.1 (2021-03-05) #

Note: Version bump only for package @spectrum-web-components/dialog

0.6.0 (2021-03-04) #

Features #

  • use latest exports specification (a7ecf4b)

0.5.3 (2021-02-11) #

Bug Fixes #

  • update to latest spectrum-css packages (a5ca19f)

0.5.2 (2021-02-02) #

Note: Version bump only for package @spectrum-web-components/dialog

0.5.1 (2021-01-28) #

Bug Fixes #

  • allow ActiveOverlay to manage open state (a7c4cff)

0.5.0 (2021-01-21) #

Bug Fixes #

  • dialog: ensure :focus-visible polyfill availability (b50e396)
  • dialog: include all dependencies (9be0da0)
  • dialog: more complete support for Spectrum CSS input (925934a)
  • dialog: prevent "fullscreen*" dialogs from being "dissmisable" (c3a6420)
  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use icons without "size" values (3fc7c91)
  • dialog: support "error" in wrapper, prevent undelay closure when not dismissable (6789102)
  • dialog: use styles from the modal package (0f04ce1)

Features #

  • action-button: add action button pattern (03ac00a)
  • dialog: update spectrum css input (405ca5e)
  • dialog: use latest @spectrum-css/dialog beta (b5d5718)

0.4.0 (2021-01-13) #

Bug Fixes #

  • use icons without "size" values (3fc7c91)
  • dialog: more complete support for Spectrum CSS input (925934a)
  • include the "types" entry in package.json files (b432f59)
  • stop merging selectors in a way that alters the cascade (369388f)
  • dialog: support "error" in wrapper, prevent undelay closure when not dismissable (6789102)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • dialog: use styles from the modal package (0f04ce1)

Features #

  • action-button: add action button pattern (03ac00a)
  • dialog: update spectrum css input (405ca5e)
  • dialog: use latest @spectrum-css/dialog beta (b5d5718)

0.3.4 (2020-10-12) #

Bug Fixes #

  • dialog: include all dependencies (7090320)

0.3.3 (2020-10-12) #

Bug Fixes #

  • include default export in the "exports" fields (f32407d)

0.3.2 (2020-09-25) #

Bug Fixes #

  • update side effect listings (8160d3a)

0.3.1 (2020-09-14) #

Note: Version bump only for package @spectrum-web-components/dialog

0.3.0 (2020-08-31) #

Features #

  • update to Spectrum CSS v3.0.0 (e8b3d8f)

0.2.4 (2020-08-19) #

Note: Version bump only for package @spectrum-web-components/dialog

0.2.3 (2020-07-27) #

Note: Version bump only for package @spectrum-web-components/dialog

0.2.2 (2020-07-24) #

Bug Fixes #

  • ensure browser understandable extensions (f4e59f7)

0.2.1 (2020-07-22) #

Note: Version bump only for package @spectrum-web-components/dialog

0.2.0 (2020-07-17) #

Features #

  • overlay: manage focus throwing and tab trapping (27a0b53)
  • leverage "exports" field in package.json (321abd7)

0.1.1 (2020-06-08) #

Note: Version bump only for package @spectrum-web-components/dialog

0.1.0 (2020-05-12) #

Features #

  • add dialog, dialog-wrapped, and underlay elements (3df9050)
  • dialog: descendent attribute support, responsive attribute added (568cedb)

Description #

sp-dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. When used directly the sp-dialog element surfaces a slot based API for deep customization of the content to be included in the overlay.

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> via:

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

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

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

Sizes #

Small 
<sp-dialog size="s">
    <h2 slot="heading">Disclaimer</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
    augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
    in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra
    nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo
    duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus
    nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem
    ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu
    mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
    dignissim cras lobortis.
</sp-dialog>
 Medium 
<sp-dialog size="m">
    <h2 slot="heading">Disclaimer</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
    augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
    in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra
    nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo
    duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus
    nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem
    ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu
    mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
    dignissim cras lobortis.
</sp-dialog>
 Large 
<sp-dialog size="l">
    <h2 slot="heading">Disclaimer</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
    augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
    in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra
    nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo
    duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus
    nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem
    ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu
    mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
    dignissim cras lobortis.
</sp-dialog>

Variants #

Dismissable #

When supplied with the dissmissable attribute an <sp-dialog> element will surface a "close" button afordance that will dispatch a DOM event with the name of close when pressed.

Note: the dissmissable attribute will not be followed when mode="fullscreen" or mode="fullscreenTakeover" are applies in accordance with the Spectrum specification.

<sp-dialog size="m" dismissable>
    <h2 slot="heading">Disclaimer</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
    augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
    in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra
    nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo
    duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus
    nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem
    ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu
    mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
    dignissim cras lobortis.
</sp-dialog>

No Divider #

<sp-dialog size="m" dismissable no-divider>
    <h2 slot="heading">Disclaimer</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
    augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
    in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra
    nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo
    duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus
    nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem
    ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu
    mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
    dignissim cras lobortis.
</sp-dialog>

Hero #

<sp-dialog size="medium" dismissable no-divider>
    <div
        slot="hero"
        style="background-image: url(https://picsum.photos/1400/260)"
    ></div>
    <h2 slot="heading">Disclaimer</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris
    augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam
    in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra
    nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo
    duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus
    nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem
    ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu
    mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper
    dignissim cras lobortis.
</sp-dialog>