From 99394c71138f48453b4e17dc8f369c04fcaea8db Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 11:28:38 -0400 Subject: [PATCH 01/21] docs(dialog): updated dialog docs for accessbility --- packages/dialog/README.md | 126 +++++++++++++++++++++++++++++--------- 1 file changed, 97 insertions(+), 29 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index f72988cf8ab..ca6b4e5c33d 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -1,4 +1,4 @@ -## Description +## Overview `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. @@ -8,23 +8,50 @@ [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dialog?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dialog) [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/RSDikStPmUPSioVpCsYb/src/index.ts) -``` +```bash yarn add @spectrum-web-components/dialog ``` Import the side effectful registration of `` via: -``` +```ts 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: -``` +```ts import { Dialog } from '@spectrum-web-components/dialog'; ``` -## Sizes +### Anatomy + +The dialog consists of several key parts: + +- A heading (via `slot="heading"`) +- Content (via default slot) +- Optional hero content (via `slot="hero"`) +- Optional buttons (via `slot="button"`) +- Optional footer content (via `slot="footer"`) +- Optional dismiss button (via `dismissable` attribute) + +```html + +
+

Disclaimer

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +
Footer information
+ Button + +``` + +### Options + +#### Sizes Small @@ -89,16 +116,14 @@ import { Dialog } from '@spectrum-web-components/dialog'; -## Variants - -### Dismissable +#### Dismissable When supplied with the `dissmissable` attribute an `` 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. ```html - +

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris @@ -113,10 +138,10 @@ Note: the `dissmissable` attribute will not be followed when `mode="fullscreen"` ``` -### No Divider +#### No Divider ```html - +

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris @@ -131,24 +156,67 @@ Note: the `dissmissable` attribute will not be followed when `mode="fullscreen"` ``` -### Hero +### Behaviors + +Use the dialog with an overlay to create a dialog that appears over the current page. The dialog manages several behaviors: + +1. Animation of the dialog content when opening/closing +2. Focus management when the dialog opens +3. Event handling for closing the dialog ```html - -
-

Disclaimer

- 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. - +Overlay Trigger + + + +

Overlay 1

+ 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. + + + + + Overlay Trigger 2 + + +

Overlay 2

+ 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. + + I understand + + + + ``` + +#### Receives focus + +The `receives-focus` attribute can be used to control whether the dialog should receive focus when it is opened. Leverage the `type="modal"` and `receives-focus="auto"` settings in the Overlay API to ensure that focus is thrown into the dialog content when opened and that the tab order will be trapped within it while open. + +```html +Overlay Trigger + + +

Dialog Heading

+ 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. + + +``` + +### Accessibility + +The dialog component ensures proper focus management by: + +- Moving focus into the dialog when opened +- Trapping tab order within the dialog while open +- Returning focus to the trigger element when closed + +For more information on accessibility features, see the [Dialog Base](./dialog-base) component. From 19ca1798a75eb64feba61d49850cbe951fd0137a Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 11:38:50 -0400 Subject: [PATCH 02/21] docs(dialog): updated dialog docs for accessbility From 5d193433805122867b118861765398f003ad4709 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 12:31:16 -0400 Subject: [PATCH 03/21] docs(dialog): testing script removal --- packages/dialog/README.md | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index ca6b4e5c33d..4c47416f892 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -176,23 +176,6 @@ Use the dialog with an overlay to create a dialog that appears over the current - - Overlay Trigger 2 - - -

Overlay 2

- 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. - - I understand - - - - ``` #### Receives focus From 97563813baeb50da055e1b28cdbee2035dc7bd19 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 12:57:26 -0400 Subject: [PATCH 04/21] docs(dialog): still troubleshooting --- packages/dialog/README.md | 88 --------------------------------------- 1 file changed, 88 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 4c47416f892..01ed4eee506 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -115,91 +115,3 @@ The dialog consists of several key parts: - -#### Dismissable - -When supplied with the `dissmissable` attribute an `` 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. - -```html - -

Disclaimer

- 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. - -``` - -#### No Divider - -```html - -

Disclaimer

- 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. - -``` - -### Behaviors - -Use the dialog with an overlay to create a dialog that appears over the current page. The dialog manages several behaviors: - -1. Animation of the dialog content when opening/closing -2. Focus management when the dialog opens -3. Event handling for closing the dialog - -```html -Overlay Trigger - - - -

Overlay 1

- 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. - - - -``` - -#### Receives focus - -The `receives-focus` attribute can be used to control whether the dialog should receive focus when it is opened. Leverage the `type="modal"` and `receives-focus="auto"` settings in the Overlay API to ensure that focus is thrown into the dialog content when opened and that the tab order will be trapped within it while open. - -```html -Overlay Trigger - - -

Dialog Heading

- 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. - - -``` - -### Accessibility - -The dialog component ensures proper focus management by: - -- Moving focus into the dialog when opened -- Trapping tab order within the dialog while open -- Returning focus to the trigger element when closed - -For more information on accessibility features, see the [Dialog Base](./dialog-base) component. From be8f21ebab2d7464cc69bc6c3fc9f2db0d6f3d43 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 13:32:09 -0400 Subject: [PATCH 05/21] docs(dialog): to to completely revert --- packages/dialog/README.md | 101 ++++++++++++++++++++++++++------------ 1 file changed, 69 insertions(+), 32 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 01ed4eee506..f72988cf8ab 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -1,4 +1,4 @@ -## Overview +## 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. @@ -8,50 +8,23 @@ [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dialog?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dialog) [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/RSDikStPmUPSioVpCsYb/src/index.ts) -```bash +``` yarn add @spectrum-web-components/dialog ``` Import the side effectful registration of `` via: -```ts +``` 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: -```ts -import { Dialog } from '@spectrum-web-components/dialog'; ``` - -### Anatomy - -The dialog consists of several key parts: - -- A heading (via `slot="heading"`) -- Content (via default slot) -- Optional hero content (via `slot="hero"`) -- Optional buttons (via `slot="button"`) -- Optional footer content (via `slot="footer"`) -- Optional dismiss button (via `dismissable` attribute) - -```html - -
-

Disclaimer

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. -
Footer information
- Button - +import { Dialog } from '@spectrum-web-components/dialog'; ``` -### Options - -#### Sizes +## Sizes Small @@ -115,3 +88,67 @@ The dialog consists of several key parts: + +## Variants + +### Dismissable + +When supplied with the `dissmissable` attribute an `` 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. + +```html + +

Disclaimer

+ 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. + +``` + +### No Divider + +```html + +

Disclaimer

+ 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. + +``` + +### Hero + +```html + +
+

Disclaimer

+ 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. + +``` From 5bc2cbf1c02391c72b61c0f004744f8d8128c853 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 14:15:35 -0400 Subject: [PATCH 06/21] docs(dialog): testing dialog-base updates --- packages/dialog/dialog-base.md | 194 +++++++++++++++++++++++++++++++-- 1 file changed, 185 insertions(+), 9 deletions(-) diff --git a/packages/dialog/dialog-base.md b/packages/dialog/dialog-base.md index 90a32a34d6b..c13d2ac460d 100644 --- a/packages/dialog/dialog-base.md +++ b/packages/dialog/dialog-base.md @@ -1,6 +1,6 @@ -## Description +## Overview -`sp-dialog-base` accepts slotted dialog content (often an ``) and presents that content in a container that is animated into place when toggling the `open` attribute. In concert with the [Overlay API](../overlay) or [Overlay Trigger](../overlay-trigger), the provided dialog content will be displayed over the rest of the page. Leverage the `interaction = modal` and `receivesFocus = 'auto'` settings in the Overlay API to ensure that focus is thrown into the dialog content when opened and that the tab order will be trapped within it while open. +`sp-dialog-base` accepts slotted dialog content (often an ``) and presents that content in a container that is animated into place when toggling the `open` attribute. In concert with the [Overlay API](../overlay) or [Overlay Trigger](../overlay-trigger), the provided dialog content will be displayed over the rest of the page. ### Usage @@ -8,28 +8,117 @@ [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dialog?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dialog) [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/MLYDVWpWhNxJZDW3Ywqq/src/index.ts) -``` +```bash yarn add @spectrum-web-components/dialog ``` Import the side effectful registration of `` via: -``` +```ts import '@spectrum-web-components/dialog/sp-dialog-base.js'; ``` When looking to leverage the `DialogBase` base class as a type and/or for extension purposes, do so via: -``` +```ts import { DialogBase } from '@spectrum-web-components/dialog'; ``` -## Example +### Anatomy + +The dialog base consists of a single default slot that expects an [`sp-dialog` element](./dialog) to be provided. The dialog base manages the presentation and animation of this content. + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+

+ The click events for the "OK" button are bound to the story not + to the components in specific. +

+ + Ok + + Don't show me this again + + + Toggle Dialog + +``` + +### Options + +#### Sizes + +The dialog wrapper supports different sizes via the `size` attribute: `s`, `m`, `l`. + + + Small + + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + + Toggle Dialog + +``` + + +Medium + + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + + Toggle Dialog + +``` + + +Large + ```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + + Toggle Dialog + +``` + + + + +#### Underlay + +The `underlay` attribute can be used to add an underlay element between the page content and the dialog. + +```html + - +

A thing is about to happen

Something that might happen a lot is about to happen.

@@ -51,6 +140,93 @@ import { DialogBase } from '@spectrum-web-components/dialog'; ``` -## Dialog +#### Dismissable + +The `dismissable` attribute can be used to add an underlay element between the page content and the dialog. + +```html + + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + + Toggle Dialog + +``` + +#### Mode + +The dialog base supports different display modes: + +##### Fullscreen Mode + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + + Toggle Dialog + +``` + +##### Fullscreen Takeover Mode + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+

+ The click events for the "OK" button are bound to the story not + to the components in specific. +

+ + + Toggle Dialog + +``` + +### Behaviors + +The dialog base manages several behaviors: + +1. Animation of the dialog content when opening/closing +2. Focus management when the dialog opens +3. Event handling for closing the dialog + +#### Receives focus + +The `receives-focus` attribute can be used to control whether the dialog should receive focus when it is opened. Leverage the `type="modal"` and `receives-focus="auto"` settings in the Overlay API to ensure that focus is thrown into the dialog content when opened and that the tab order will be trapped within it while open. + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+

+ The click events for the "OK" button are bound to the story not + to the components in specific. +

+ + + Toggle Dialog + +``` + +### Accessibility + +The dialog base component ensures proper focus management by: + +- Moving focus into the dialog when opened +- Trapping tab order within the dialog while open +- Returning focus to the trigger element when closed -`sp-dialog-base` expects a single slotted child element to play the role of the dialog that it will deliver within your application. When leveraging it as a base class be sure to customize the `dialog` getter to ensure that it acquires the appropriate element for your use case in order to correctly pass focus into your content when the dialog is opened. +See the [Dialog](./dialog) component for more information on the accessibility features of the dialog content. From e73ae728a70837a6935d68ce1b683fa492ed2f5e Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 15:29:55 -0400 Subject: [PATCH 07/21] docs(dialog): testing dialog wrapper for test fails --- packages/dialog/dialog-wrapper.md | 277 +++++++++++++++++++++--------- 1 file changed, 192 insertions(+), 85 deletions(-) diff --git a/packages/dialog/dialog-wrapper.md b/packages/dialog/dialog-wrapper.md index 7aacb05e676..c13d2ac460d 100644 --- a/packages/dialog/dialog-wrapper.md +++ b/packages/dialog/dialog-wrapper.md @@ -1,6 +1,6 @@ -## Description +## Overview -`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. +`sp-dialog-base` accepts slotted dialog content (often an ``) and presents that content in a container that is animated into place when toggling the `open` attribute. In concert with the [Overlay API](../overlay) or [Overlay Trigger](../overlay-trigger), the provided dialog content will be displayed over the rest of the page. ### Usage @@ -8,118 +8,225 @@ [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dialog?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dialog) [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/MLYDVWpWhNxJZDW3Ywqq/src/index.ts) -``` +```bash yarn add @spectrum-web-components/dialog ``` -Import the side effectful registration of `` via: +Import the side effectful registration of `` via: + +```ts +import '@spectrum-web-components/dialog/sp-dialog-base.js'; +``` + +When looking to leverage the `DialogBase` base class as a type and/or for extension purposes, do so via: + +```ts +import { DialogBase } from '@spectrum-web-components/dialog'; +``` + +### Anatomy + +The dialog base consists of a single default slot that expects an [`sp-dialog` element](./dialog) to be provided. The dialog base manages the presentation and animation of this content. + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+

+ The click events for the "OK" button are bound to the story not + to the components in specific. +

+ + Ok + + Don't show me this again + + + Toggle Dialog + +``` + +### Options + +#### Sizes + +The dialog wrapper supports different sizes via the `size` attribute: `s`, `m`, `l`. + + + Small + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + + Toggle Dialog + ``` -import '@spectrum-web-components/dialog/sp-dialog-wrapper.js'; + + +Medium + + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + + Toggle Dialog + ``` -When looking to leverage the `DialogWrapper` base class as a type and/or for extension purposes, do so via: + +Large + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + + Toggle Dialog + ``` -import { DialogWrapper } from '@spectrum-web-components/dialog'; + + + + +#### Underlay + +The `underlay` attribute can be used to add an underlay element between the page content and the dialog. + +```html + + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+

+ The click events for the "OK" button are bound to the story not + to the components in specific. +

+ + Ok + + Don't show me this again + + + Toggle Dialog + ``` -## Example +#### Dismissable -### Small +The `dismissable` attribute can be used to add an underlay element between the page content and the dialog. ```html + - - Content of the dialog - + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + Toggle Dialog ``` -### Fullscreen Mode +#### Mode + +The dialog base supports different display modes: + +##### Fullscreen Mode ```html - - Content of the dialog - - - Toggle Dialog - + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+ + + Toggle Dialog ``` -### Fullscreen Takeover Mode +##### Fullscreen Takeover Mode ```html - - Content of the dialog - - - Toggle Dialog - + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+

+ The click events for the "OK" button are bound to the story not + to the components in specific. +

+ + + Toggle Dialog + +``` + +### Behaviors + +The dialog base manages several behaviors: + +1. Animation of the dialog content when opening/closing +2. Focus management when the dialog opens +3. Event handling for closing the dialog + +#### Receives focus + +The `receives-focus` attribute can be used to control whether the dialog should receive focus when it is opened. Leverage the `type="modal"` and `receives-focus="auto"` settings in the Overlay API to ensure that focus is thrown into the dialog content when opened and that the tab order will be trapped within it while open. + +```html + + + +

A thing is about to happen

+

Something that might happen a lot is about to happen.

+

+ The click events for the "OK" button are bound to the story not + to the components in specific. +

+ + + Toggle Dialog ``` -## Accessibility +### Accessibility + +The dialog base component ensures proper focus management by: + +- Moving focus into the dialog when opened +- Trapping tab order within the dialog while open +- Returning focus to the trigger element when closed -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. +See the [Dialog](./dialog) component for more information on the accessibility features of the dialog content. From 23c768401661252c37765cf796e27ab06b985efc Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 15:46:14 -0400 Subject: [PATCH 08/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 137 ++------------------------------------ 1 file changed, 4 insertions(+), 133 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index f72988cf8ab..95a7242f224 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -1,4 +1,4 @@ -## Description +## Overview `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. @@ -8,147 +8,18 @@ [![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dialog?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dialog) [![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/RSDikStPmUPSioVpCsYb/src/index.ts) -``` +```bash yarn add @spectrum-web-components/dialog ``` Import the side effectful registration of `` via: -``` +```ts 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: -``` +```ts import { Dialog } from '@spectrum-web-components/dialog'; ``` - -## Sizes - - -Small - - -```html demo - -

Disclaimer

- 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. - -``` - - -Medium - - -```html demo - -

Disclaimer

- 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. - -``` - - -Large - - -```html demo - -

Disclaimer

- 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. - -``` - - - - -## Variants - -### Dismissable - -When supplied with the `dissmissable` attribute an `` 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. - -```html - -

Disclaimer

- 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. - -``` - -### No Divider - -```html - -

Disclaimer

- 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. - -``` - -### Hero - -```html - -
-

Disclaimer

- 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. - -``` From 24b737b3459c1de4ab48068d0323a38a2bbe0c7e Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 15:56:59 -0400 Subject: [PATCH 09/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 95a7242f224..69d473e0e1b 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -23,3 +23,28 @@ When looking to leverage the `Dialog` base class as a type and/or for extension ```ts import { Dialog } from '@spectrum-web-components/dialog'; ``` + +### Anatomy + +The dialog consists of several key parts: + +- A heading (via `slot="heading"`) +- Content (via default slot) +- Optional hero content (via `slot="hero"`) +- Optional buttons (via `slot="button"`) +- Optional footer content (via `slot="footer"`) +- Optional dismiss button (via `dismissable` attribute) + +```html + +
+

Disclaimer

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. +
Footer information
+ Button + +``` From 69457e33ea7920a44fcfae3f049e0ef1e7a8eee3 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 16:29:35 -0400 Subject: [PATCH 10/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 107 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 107 insertions(+) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 69d473e0e1b..5f8bae731b5 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -48,3 +48,110 @@ The dialog consists of several key parts: Button ``` + +### Options + +#### Dismissable + +When supplied with the `dissmissable` attribute an `` 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. + +```html + +

Disclaimer

+ 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. + +``` + +#### No Divider + +```html + +

Disclaimer

+ 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. + +``` + +### Behaviors + +Use the dialog with an overlay to create a dialog that appears over the current page. The dialog manages several behaviors: + +1. Animation of the dialog content when opening/closing +2. Focus management when the dialog opens +3. Event handling for closing the dialog + +```html +Overlay Trigger + + + +

Overlay 1

+ 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. + + + + + Overlay Trigger 2 + + +

Overlay 2

+ 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. + + I understand + + + + +``` + +#### Receives focus + +The `receives-focus` attribute can be used to control whether the dialog should receive focus when it is opened. Leverage the `type="modal"` and `receives-focus="auto"` settings in the Overlay API to ensure that focus is thrown into the dialog content when opened and that the tab order will be trapped within it while open. + +```html +Overlay Trigger + + +

Dialog Heading

+ 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. + + +``` + +### Accessibility + +The dialog component ensures proper focus management by: + +- Moving focus into the dialog when opened +- Trapping tab order within the dialog while open +- Returning focus to the trigger element when closed + +For more information on accessibility features, see the [Dialog Base](./dialog-base) component. From d9f30b8508134d07bdfde85b91c9538c617a0ad3 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 16:55:07 -0400 Subject: [PATCH 11/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 5f8bae731b5..705b6082313 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -51,6 +51,31 @@ The dialog consists of several key parts: ### Options +#### Sizes + + +Small + + +```html demo + +

Disclaimer

+ 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. + +``` + + + + #### Dismissable When supplied with the `dissmissable` attribute an `` element will surface a "close" button afordance that will dispatch a DOM event with the name of `close` when pressed. From 1567de1b046bc8a47f92fb36db16337358e1d253 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 17:09:03 -0400 Subject: [PATCH 12/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 42 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 705b6082313..0c0eafa4969 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -57,7 +57,7 @@ The dialog consists of several key parts: Small -```html demo +```html

Disclaimer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod @@ -73,6 +73,46 @@ The dialog consists of several key parts: ``` + +Medium + + +```html + +

Disclaimer

+ 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. + +``` + + +Large + + +```html + +

Disclaimer

+ 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. + +``` + From 833f3d5ba7c1564734708cad83913118a96e56bd Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 17:40:56 -0400 Subject: [PATCH 13/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 66 ++++++++++++++++----------------------- 1 file changed, 27 insertions(+), 39 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 0c0eafa4969..8612d0741b1 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -58,19 +58,15 @@ The dialog consists of several key parts: ```html - -

Disclaimer

- 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. - +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. ``` @@ -78,19 +74,15 @@ The dialog consists of several key parts: ```html - -

Disclaimer

- 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. - +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. ``` @@ -98,19 +90,15 @@ The dialog consists of several key parts: ```html - -

Disclaimer

- 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. - +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. ``` From 11f610989706948377a876d4c0ff9cd19bdfe8cc Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Tue, 29 Apr 2025 18:12:01 -0400 Subject: [PATCH 14/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 61 +++++++++------------------------------ 1 file changed, 13 insertions(+), 48 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 8612d0741b1..a291b0ecdbd 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -53,57 +53,22 @@ The dialog consists of several key parts: #### Sizes - -Small - - -```html -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. -``` - - -Medium - - -```html -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. -``` - - -Large - - ```html -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. + +

Disclaimer

+ 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. + ``` - - - #### Dismissable When supplied with the `dissmissable` attribute an `` element will surface a "close" button afordance that will dispatch a DOM event with the name of `close` when pressed. From f81df824de038b63040c6c2d8046850f89bd80f1 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Wed, 30 Apr 2025 09:05:40 -0400 Subject: [PATCH 15/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index a291b0ecdbd..f61445dd481 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -53,21 +53,17 @@ The dialog consists of several key parts: #### Sizes -```html - -

Disclaimer

- 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. - -``` + +Small +1 + +Medium +2 + +Large +3 + + #### Dismissable From 846b55dea81dfff141b79afa6af5495b5a9bf684 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Wed, 30 Apr 2025 09:21:15 -0400 Subject: [PATCH 16/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index f61445dd481..95b2dea5fac 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -49,22 +49,6 @@ The dialog consists of several key parts: ``` -### Options - -#### Sizes - - -Small -1 - -Medium -2 - -Large -3 - - - #### Dismissable When supplied with the `dissmissable` attribute an `` element will surface a "close" button afordance that will dispatch a DOM event with the name of `close` when pressed. From 61b0715736d56ded62e1f959f00bcdc475f1abc2 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Wed, 30 Apr 2025 09:37:10 -0400 Subject: [PATCH 17/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 105 -------------------------------------- 1 file changed, 105 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 95b2dea5fac..69d473e0e1b 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -48,108 +48,3 @@ The dialog consists of several key parts: Button ``` - -#### Dismissable - -When supplied with the `dissmissable` attribute an `` 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. - -```html - -

Disclaimer

- 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. - -``` - -#### No Divider - -```html - -

Disclaimer

- 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. - -``` - -### Behaviors - -Use the dialog with an overlay to create a dialog that appears over the current page. The dialog manages several behaviors: - -1. Animation of the dialog content when opening/closing -2. Focus management when the dialog opens -3. Event handling for closing the dialog - -```html -Overlay Trigger - - - -

Overlay 1

- 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. - - - - - Overlay Trigger 2 - - -

Overlay 2

- 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. - - I understand - - - - -``` - -#### Receives focus - -The `receives-focus` attribute can be used to control whether the dialog should receive focus when it is opened. Leverage the `type="modal"` and `receives-focus="auto"` settings in the Overlay API to ensure that focus is thrown into the dialog content when opened and that the tab order will be trapped within it while open. - -```html -Overlay Trigger - - -

Dialog Heading

- 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. - - -``` - -### Accessibility - -The dialog component ensures proper focus management by: - -- Moving focus into the dialog when opened -- Trapping tab order within the dialog while open -- Returning focus to the trigger element when closed - -For more information on accessibility features, see the [Dialog Base](./dialog-base) component. From 43cbbd6a66ab1f685ae28e8b05a82359cc918852 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Wed, 30 Apr 2025 09:52:55 -0400 Subject: [PATCH 18/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 69d473e0e1b..0a292f28bb2 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -48,3 +48,13 @@ The dialog consists of several key parts: Button ``` + +### Accessibility + +The dialog component ensures proper focus management by: + +- Moving focus into the dialog when opened +- Trapping tab order within the dialog while open +- Returning focus to the trigger element when closed + +For more information on accessibility features, see the [Dialog Base](./dialog-base) component. From f6dedbbab281715f296e5ec054ce4f852d5df4ce Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Wed, 30 Apr 2025 12:07:41 -0400 Subject: [PATCH 19/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 0a292f28bb2..69d473e0e1b 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -48,13 +48,3 @@ The dialog consists of several key parts: Button ``` - -### Accessibility - -The dialog component ensures proper focus management by: - -- Moving focus into the dialog when opened -- Trapping tab order within the dialog while open -- Returning focus to the trigger element when closed - -For more information on accessibility features, see the [Dialog Base](./dialog-base) component. From 627de18b3c435be9b47db1a83510bedb6449f1bc Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Wed, 30 Apr 2025 12:37:41 -0400 Subject: [PATCH 20/21] docs(dialog): testing where dialog docs break --- packages/dialog/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 69d473e0e1b..ba605defd2d 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -48,3 +48,7 @@ The dialog consists of several key parts: Button ``` + +### Accessibility + +The dialog component ensures proper focus management by: From a37c15ad0e6869b89f73d24096cdaab854791364 Mon Sep 17 00:00:00 2001 From: Nikki Massaro Date: Wed, 30 Apr 2025 16:08:34 -0400 Subject: [PATCH 21/21] docs(dialog): added anatomy section --- packages/dialog/README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index ba605defd2d..69d473e0e1b 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -48,7 +48,3 @@ The dialog consists of several key parts: Button ``` - -### Accessibility - -The dialog component ensures proper focus management by: