sp-dialog
NPM
0.48.1
Storybook
View Storybook
Try it on
webcomponents.dev
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 )
Attributes and Properties #
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 #
button
footer
heading
hero
default slot
Events #
close
Event
Announces that the dialog has been closed.
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 #
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 #
<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>
<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>
<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>