[Bug]: alert-dialog docs example bug

[nikkimk]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

alert-dialog

Expected behavior

In the docs should provide a working version of how to use an alert-dialog in a modal.

Actual behavior

In the docs for sp-alert-dialog , the dialog appears in the top left corner after clicking on the "open modal" button. It also does not have a background and there is no visible overlay, so the modal contents are unreadable.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to the the alert-dialog docs
2. Click on the "open modal" button.
3. The dialog appears in the top left corner after clicking on . It also does not have a background and there is no visible overlay, so the modal contents are unreadable.

Sample code or abstract reproduction which illustrates the problem

Current example code is

<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 }));"
        >
            Confirm
        </sp-button>
    </sp-alert-dialog>
</sp-overlay>

Code should be

<sp-button id="trigger">open modal</sp-button>
        <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"
                >
                    <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>

Severity

SEV 2

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!