docs(alert-dialog): fixed modal example (#5666)

* docs(alert-dialog): fixed modal example

* docs(alert-dialog): fixed typo

* docs(alert-dialog): added dialog base example

* docs(alert-dialog): added links to overlay and modal

Author: nikkimk

packages/alert-dialog/README.md

@@ -27,9 +27,9 @@ import { AlertDialog } from '@spectrum-web-components/alert-dialog';
 
 The alert dialog consists of several key parts:
 
--   **Title:** All alert dialogs must have a title, using `slot="heading"`, that uses a few words to convey the outcome of what will happen if a user continues with an action
--   **Content:** Alert dialogs can include a description using the default slot. A description briefly communicates any additional information or context that a user needs to know to continue with an action
--   Action buttons, using `slot="button"`, that allow users to respond
+- **Title:** All alert dialogs must have a title, using `slot="heading"`, that uses a few words to convey the outcome of what will happen if a user continues with an action
+- **Content:** Alert dialogs can include a description using the default slot. A description briefly communicates any additional information or context that a user needs to know to continue with an action
+- Action buttons, using `slot="button"`, that allow users to respond
 
 ```html
 <sp-alert-dialog
@@ -63,12 +63,12 @@ The alert dialog consists of several key parts:
 
 Use `slot="button"` to render your action button(s) that allow users to respond
 
--   An alert dialog must have one primary action button (with `variant="primary"`) with the option to include a secondary action and/or a cancel action.
--   Non-primary action buttons should be `variant="secondary"` and `treatment="outline"`.
--   The three buttons should be rendered in the DOM in the following order:
-    -   **Cancel action:** Offers an option to go back and cancel the action.
-    -   **Secondary action:** Offers a secondary action. e.g. "Remind me later"
-    -   **Primary action:** The first (right-most) button communicates what the button will do if selected, or to acknowledge and dismiss the dialog. Check [variants](#variants) for the correct primary button styling. See also the [Alert Dialog design options](https://spectrum.adobe.com/page/alert-dialog/#Options).
+- An alert dialog must have one primary action button (with `variant="primary"`) with the option to include a secondary action and/or a cancel action.
+- Non-primary action buttons should be `variant="secondary"` and `treatment="outline"`.
+- The three buttons should be rendered in the DOM in the following order:
+    - **Cancel action:** Offers an option to go back and cancel the action.
+    - **Secondary action:** Offers a secondary action. e.g. "Remind me later"
+    - **Primary action:** The first (right-most) button communicates what the button will do if selected, or to acknowledge and dismiss the dialog. Check [variants](#variants) for the correct primary button styling. See also the [Alert Dialog design options](https://spectrum.adobe.com/page/alert-dialog/#Options).
 
 ```html
 <sp-alert-dialog
@@ -296,57 +296,103 @@ Destructive alert dialogs are for when a user needs to confirm an action that wi
 
 #### Context
 
-An alert dialog should be placed inside a modal overaly:
+An alert dialog should be placed inside a modal [overlay](../overlay/) or a [dialog base](../dialog-base/):
+
+<sp-tabs selected="modal" auto label="Alert dialogs in context">
+<sp-tab value="modal">Modal overlay</sp-tab>
+<sp-tab-panel value="modal">
 
 ```html
 <sp-button id="trigger">open modal</sp-button>
-<sp-overlay trigger="trigger@click" type="modal">
-    <sp-alert-dialog
-        role="alertdialog"
-        aria-labelledby="modal-heading"
-        aria-describedby="modal-message"
-        variant="confirmation"
-    >
-        <h2 id="modal-heading" slot="heading">Important Notice</h2>
-        <p id="modal-message">This action requires your confirmation.</p>
-        <sp-button
-            slot="button"
-            variant="secondary"
-            treatment="outline"
-            onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
-        >
-            Cancel
-        </sp-button>
-        <sp-button
-            slot="button"
-            variant="accent"
-            treatment="fill"
-            onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
+<sp-overlay trigger="trigger@click" type="modal" placement="bottom">
+    <sp-popover>
+        <sp-alert-dialog
+            role="alertdialog"
+            aria-labelledby="modal-heading"
+            aria-describedby="modal-message"
+            variant="confirmation"
         >
-            Confirm
-        </sp-button>
-    </sp-alert-dialog>
+            <h2 id="modal-heading" slot="heading">Important Notice</h2>
+            <p id="modal-message">This action requires your confirmation.</p>
+            <sp-button
+                slot="button"
+                variant="secondary"
+                treatment="outline"
+                onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
+            >
+                Cancel
+            </sp-button>
+            <sp-button
+                slot="button"
+                variant="accent"
+                treatment="fill"
+                onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
+            >
+                Confirm
+            </sp-button>
+        </sp-alert-dialog>
+    </sp-popover>
 </sp-overlay>
 ```
 
+</sp-tab-panel>
+<sp-tab value="dialog">Dialog base</sp-tab>
+<sp-tab-panel value="dialog">
+
+```html
+<overlay-trigger type="modal">
+    <sp-dialog-base underlay slot="click-content">
+        <sp-alert-dialog
+            role="alertdialog"
+            aria-labelledby="modal-heading"
+            aria-describedby="modal-message"
+            variant="confirmation"
+        >
+            <h2 id="modal-heading" slot="heading">Important Notice</h2>
+            <p id="modal-message">This action requires your confirmation.</p>
+            <sp-button
+                slot="button"
+                variant="secondary"
+                treatment="outline"
+                onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
+            >
+                Cancel
+            </sp-button>
+            <sp-button
+                slot="button"
+                variant="accent"
+                treatment="fill"
+                onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
+            >
+                Confirm
+            </sp-button>
+        </sp-alert-dialog>
+    </sp-dialog-base>
+    <sp-button slot="trigger" variant="primary">Toggle Dialog</sp-button>
+</overlay-trigger>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
 ### Accessibility
 
 #### `<sp-alert-banner>` Element
 
--   Use `role="alertdialog"` on the alert dialog
--   Make sure the alert dialog has an `aria-labelledby` attribute that references the title's `id`.
--   Make sure the alert dialog has an `aria-describedby` attribute that references the content's `id`.
+- Use `role="alertdialog"` on the alert dialog
+- Make sure the alert dialog has an `aria-labelledby` attribute that references the title's `id`.
+- Make sure the alert dialog has an `aria-describedby` attribute that references the content's `id`.
 
 #### Title
 
--   Consider the appropriate variant based on the message's importance and urgency
--   Use concise, meaningful dialog title that clearly states the purpose
--   Use semantic heading elements (`<h2>`) for the dialog title
+- Consider the appropriate variant based on the message's importance and urgency
+- Use concise, meaningful dialog title that clearly states the purpose
+- Use semantic heading elements (`<h2>`) for the dialog title
 
 #### Content
 
--   Provide clear, concise content that explains the situation and required actions
+- Provide clear, concise content that explains the situation and required actions
 
 ####Buttons
 
--   Ensure button labels clearly indicate the action they will perform
+- Ensure button labels clearly indicate the action they will perform