feat(paper-forms): progress bar on set-up pages#9767
Draft
tutntut wants to merge 4 commits into
Draft
Conversation
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
tutntut
force-pushed
the
form-setup-progress-bar-v1
branch
from
July 20, 2026 01:54
82ecb7e to
0d3c1da
Compare
tutntut
changed the title
tutntut
changed the title
tutntut
force-pushed
the
form-setup-progress-bar-v1
branch
from
July 20, 2026 02:15
0d3c1da to
8bf66aa
Compare
Add a thin linear progress bar across the paper-tracking create-form set-up pages (title -> data source -> secret key). It fills proportionally as the admin advances, and is gated behind the paper-tracking flag so other create-form flows are unaffected. Exposes progressbar aria semantics for accessibility. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Round the track and fill corners, lighten the track (neutral.300 -> neutral.200), and ease the fill transition, matching the workflow-v2 phase bar so the paper-tracking surfaces feel consistent. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…[part 3] Wrap the bar in the same centered 45rem container the set-up screens use, with matching horizontal padding, so it spans from the "Set up your form" header to the primary button rather than the full modal width. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…idth [part 4] The Details page uses a 45rem content column but the data-source and secret-key pages used 42.5rem, so content shifted between steps and the progress bar only lined up on the first page. Standardise all three on 45rem so the column and the bar stay put across the wizard. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
tutntut
force-pushed
the
form-setup-progress-bar-v1
branch
from
July 20, 2026 05:16
9c186b4 to
21b60d6
Compare
Contributor
Author
|
Getting @bookwormsuf to review first: Comments:
|
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
2 participants
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.
Problem
The paper-tracking create-form set-up flow (behind
enable-paper-tracking-set-up-page)walks admins through several set-up pages, but gives no sense of how far along
they are. This adds a progress bar across those pages.
Solution
Adds a thin linear progress bar to the create-form modal, spanning the three
paper-tracking set-up pages in order: title → data-source question → secret key.
It fills proportionally as the admin advances.
CreateFormModalContent, driven by the wizard'scurrentStep.enable-paper-tracking-set-up-pageis on, so thenon-flagged create-form flow is visually unchanged.
progressbarARIA semantics (aria-valuenow/min/max, label) for accessibility.This builds on develop's existing
CreateFormModalwizard — no changes to theflow, steps, or any other behaviour.
Screenshots
Breaking Changes
No - backwards compatible. Purely additive UI, gated behind an existing flag.
Tests
Unit test added (
CreateFormProgressBar.test.tsx): aria step reporting + proportional fill.Manual:
TC1: Bar appears and advances (flag on)
enable-paper-tracking-set-up-pageTC2: No change when flag off