feat(templates): add the dialog wizard page template - #5798
Open
ernestt wants to merge 1 commit into
Open
Conversation
A three-step wizard inside a Dialog — scheduling a recurring report — for flows short enough that leaving the page costs more than the modal's constraints. What the template is for, beyond the other three wizards: the container is the differentiator. A page wizard gets the full content width and a vertical rail can afford descriptions per step; a modal gets 620px and a body that scrolls against maxHeight, so the step markers go compact, the action row pins to the bottom, and the budget is two to four short steps. The header carries the title and the stepper as two pinned rows, because a stepper placed in the body slides out of view on the longest step — the one where knowing your position matters most. The dialog renders with `isInline` and stays open. A real modal is promoted to the browser's top layer, where no ancestor transform or overflow can clip it, so an open one inside a scaled gallery tile paints over the whole gallery instead of inside its tile — and the docsite's own template preview is itself a Dialog, which Astryx forbids nesting. Inline draws the same anatomy without the <dialog> element, the backdrop, or the modal behaviour. The module header spells out the four-line change back to a real modal, and what to put behind it. Layout uses height="fill" rather than auto. An auto Layout sizes to its content and lets the dialog clip the overflow, which on the Delivery step hid 14px of the summary and cut into the footer buttons. Filling the bounded shell puts the scroll where it belongs: the content region scrolls 117px on that step, the action row stays put, and nothing is unreachable. Scoring 99/100 (A) against the template rubric. Co-authored-by: Cursor <cursoragent@cursor.com>
ernestt
requested review from
cixzhang,
imdreamrunner and
josephfarina
as code owners
August 31, 2026 23:26
meta-cla
Bot
added
the
CLA Signed
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR No new or modified components detected. Bundle Size SummaryNo component packages changed. Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
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.
Adds
form-wizard-dialog, the fourth and last of the wizard templates: a three-step flow for scheduling a recurring report, run inside a Dialog.Rubric score: 99/100 (grade A). Pass bar is B (75).
What this one is for
The container is the whole differentiator. A page wizard gets the full content width; a vertical rail can afford a description under every step. A modal gets 620px and a body that scrolls against
maxHeight, so the step markers go compact, the action row pins to the bottom, and the budget is two to four short steps. Past that, the flow wants a page.The title and the stepper are two pinned header rows rather than body content, because a stepper placed in the body slides out of view on the longest step — the one where knowing your position matters most.
Inline, and why
The dialog renders with
isInlineand stays open. A real modal is promoted to the browser's top layer, where no ancestortransformoroverflow: hiddencan clip it — so an open one inside a scaled gallery tile paints over the whole gallery instead of inside its tile. The docsite's own template preview is also a Dialog, and Astryx forbids nesting dialogs.isInlinedraws the same anatomy without the<dialog>element, the backdrop, or the modal behaviour. The module header spells out the four-line change back to a real modal, and what belongs on the page behind it. This follows the precedent already set bysettings-dialog.A bug found on the way
Layoutinside the dialog washeight="auto". An auto Layout sizes to its content and lets the dialog clip the overflow rather than scroll it, which on the Delivery step hid 14px of the summary outright and cut into the footer buttons.height="fill"puts the scroll where the module header always claimed it was: the content region scrolls 117px on that step, the action row stays put, nothing is unreachable.Also fixed while scoring: the cadence
FieldpairedisGroupLabelwithinputID, butFieldLabeldropshtmlForin group mode, so the id was inert and the radiogroup was falling back to a duplicatearia-label. Now wired the documented way —labelID+aria-labelledby— so the group takes the label the user can actually see.Validation and confirmation
Blocking a step reports the count beside the button that is refusing to advance. Completing the flow raises a toast: a real modal would close, and closing is most of the confirmation, so with nothing to close the toast carries it and the draft resets.
Light, dark, narrow
Test plan
aria-labelledbytypecheck:template-docs, eslint and prettier cleanMade with Cursor