feat(ui): add Mosaic AlertDialog - #9433
Open
maxyinger wants to merge 3 commits into
Open
Conversation
🦋 Changeset detectedLatest commit: 05ac5ec 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.
|
9 tasks
maxyinger
added a commit
that referenced
this pull request
Aug 13, 2026
Scope `DialogPartNameContext` to the alert's popup, so a plain `Dialog` nested inside one no longer inherits the name, and share `Dialog`'s content resolver instead of copying it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
maxyinger
force-pushed
the
max/mosaic-alert-dialog
branch
from
August 13, 2026 19:58
8adf099 to
1b32869
Compare
Contributor
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
maxyinger
added a commit
that referenced
this pull request
Aug 13, 2026
Scope `DialogPartNameContext` to the alert's popup, so a plain `Dialog` nested inside one no longer inherits the name, and share `Dialog`'s content resolver instead of copying it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
maxyinger
force-pushed
the
max/mosaic-alert-dialog
branch
from
August 13, 2026 22:24
1b32869 to
2be6c73
Compare
9 tasks
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".
The designs give every `prompt` the same footer, alert dialogs included: one full-width button, or two at even halves with a 0.75rem gap. Not a pair sized to their labels against the inline end, which is what this shipped as. So the media branch goes, and the row gets shorter rather than longer: `grid-auto-columns: 1fr` unconditionally already means one button fills the row and two split it, with nothing to switch on at 48rem and no edge case waiting for a third. The phone layout was this all along — it is now simply the layout.
Scope `DialogPartNameContext` to the alert's popup, so a plain `Dialog` nested inside one no longer inherits the name, and share `Dialog`'s content resolver instead of copying it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
maxyinger
force-pushed
the
max/mosaic-alert-dialog
branch
from
August 13, 2026 23:08
2be6c73 to
05ac5ec
Compare
maxyinger
commented
Aug 13, 2026
Comment on lines
+6
to
+20
| /** | ||
| * The response row. An alert dialog exists to be answered, so its buttons are anatomy rather | ||
| * than content — the one part `Dialog` deliberately does not ship, because a dialog's footer is | ||
| * whatever the consumer composes and an alert dialog's is always the same two choices. | ||
| * | ||
| * One layout at every width, because that is the convention for a `prompt` generally rather than | ||
| * a rule about alert dialogs: its buttons span the surface, one full width or two at even halves. | ||
| * A right-aligned pair sized to its labels was tried first and is what the designs do not do. | ||
| * | ||
| * A GRID rather than a flex row, and that is what makes both cases the same declaration. Filling | ||
| * the row needs `flex: 1` on each CHILD, which a parent cannot set — StyleX has no child | ||
| * selector, and reaching into the children would mean every call site remembering to pass | ||
| * something. `grid-auto-flow: column` with `grid-auto-columns: 1fr` puts it on the container | ||
| * instead: every button takes an equal share of the row, so one fills it and two split it, with | ||
| * no branch and nothing for a third to break. |
Collaborator
Author
There was a problem hiding this comment.
fuggin opus.
All these styles are more comments than style. I kinda want to strip them out, but also maybe they're useful context for future agents editing 🤷
any thoughts?
maxyinger
commented
Aug 13, 2026
| * The row holding the answer. Render the cancel first — see `alert-dialog.styles.ts` for why that | ||
| * ordering is what focuses it on open. | ||
| */ | ||
| const Actions = React.forwardRef<HTMLDivElement, AlertDialogActionsProps>(function AlertDialogActions( |
Collaborator
Author
There was a problem hiding this comment.
almost wonder if this should just live in Dialog since we'll use in on other prompt sized dialogs for inputs that will have the same styled actions 🤔 . easy swap if so
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.
https://swingset-git-max-mosaic-alert-dialog.clerkstage.dev/components/alert-dialog
Description
AlertDialogDialogwith some baked in opinionsAlertDialog.Actionsapi surface on top ofDialogBaked in behavior on dialog
role'alertdialog'closedBy'closerequest'size'prompt'Preview
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change