feat(ui): add Mosaic AlertDialog - #9433
Open
maxyinger wants to merge 1 commit into
Open
Conversation
A Dialog that interrupts to ask for a decision and waits for one. Base UI's shape: the same parts as Dialog, with the three props that would let it stop being an alert dialog removed rather than defaulted — `role` is `alertdialog`, `closedBy` is `closerequest`, `size` is `prompt`. Everything else is Dialog's own component rather than a wrapper around it, so there is one implementation of each and no way for the two to drift. No `CloseButton` part, for the same reason an outside press cannot dismiss it: a corner X is a way out without answering. `AlertDialog.Actions` is the one addition — the response row, which is anatomy here in a way a dialog's footer is not. A grid rather than a flex row, because the phone layout is a property on the container instead of something every button has to be told: `grid-auto-columns` is `1fr` under the sheet band, so the buttons split the row and span it, and `auto` above it, where the tracks size to their labels and sit at the inline end. Full-width beats a right-aligned pair floating against one edge of a screen-wide sheet. The cancel goes first, which makes it the first tabbable element and therefore what the alert opens focused on — the least destructive choice, with no `initialFocus` plumbing, and with the keyboard order agreeing with the screen. Title and Description are both required, and both warn in development when missing: an alert dialog's description is announced with its name at the moment it interrupts, so without one the user is choosing between "Cancel" and "Delete" with nothing saying what is being deleted. The existing name warning skipped any role but `dialog`, which would have made it silently inert here, and it now names the component it is complaining about instead of always saying "Dialog".
🦋 Changeset detectedLatest commit: d768246 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds the Mosaic
AlertDialog— aDialogthat interrupts to ask for a decision and waits for one. Third of the stacking / close-confirmation stack, based on #9432 (which is based on #9427). Review that one first; the diff here is only the new component.Base UI's shape: the parts are
Dialog's parts minus dismissibility. The three props that would let it stop being an alert dialog are removed from the type rather than defaulted —roleisalertdialog,closedByiscloserequest(an outside press can't answer a question; Escape still can), andsizeisprompt. Every part exceptPopupandActionsisDialog's own component rather than a wrapper around it, so there's one implementation of each and no way for the two to drift.There's no
Cancel/Actionpart, matching Base UI: the cancel isAlertDialog.Closeand the action is a plainButton. That also removed the need forinitialFocus— the cancel is the first child of the actions row, so it's the first tabbable element and the alert opens focused on it. NoCloseButtoneither, for the same reason an outside press doesn't dismiss: a corner X is a way out without answering.AlertDialog.Actionsis the one addition, since Base UI leaves that div to the consumer's CSS. It's a grid rather than a flex row, which puts the phone layout on the container instead of on every button:grid-auto-columnsis1frbelow48rem, where a prompt is a full-width sheet and the buttons split the row evenly, andautoabove it, where the tracks size to their labels and sit at the inline end. StyleX has no child selector, soflex: 1per button wasn't reachable from the parent.A Title and a Description are both required and both warn in development when missing — an alert dialog's description is announced with its name at the moment it interrupts, so without one the choice reads as "Cancel" or "Delete" with nothing saying what is being deleted. Two supporting fixes came out of that: the existing accessible-name warning skipped any role but
dialog, which would have made it silently inert for every alert dialog, and it now names the component it's complaining about instead of always sayingDialog.The wrapper accepts
finalFocus(andinitialFocus), which an alert needs more than a dialog does: it's usually raised by something that happened rather than by a trigger, so there's nothing for focus to return to. The swingsetDiscardChangesstory passes the field's ref, so answering "keep editing" puts the caret back where the work was.No call sites migrate here.
destructive.tsxand the org-profile edit view adopt this in PR 5, after the close-confirmation APIs land in PR 4.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change