Skip to content

feat(stepper): add Stepper component - #830

Draft
mattrothenberg wants to merge 5 commits into
mainfrom
feat/stepper-layered
Draft

mattrothenberg wants to merge 5 commits into
mainfrom
feat/stepper-layered

Conversation

@mattrothenberg

Copy link
Copy Markdown
Collaborator

Adds Stepper, a multi-step flow component in LayerDialog's layered frame (vertical and horizontal).

Open question: which fill? The docs page shows both: fill="active" (default, only the current step is white) and fill="progress" (white fills through the furthest step reached). The prop goes away once we pick one.


  • Reviews
    • bonk has reviewed the change
    • automated review not possible because: draft for design feedback
  • Tests
    • Tests included/updated
    • Automated tests not possible - manual testing has been completed as follows:
    • Additional testing not necessary because:

🤖 Generated with Claude Code

mattrothenberg and others added 4 commits September 30, 2026 08:48
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…emo layout

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Move Stepper onto LayerDialog's layered frame: steps sit on the elevated
gray and the active step lifts onto a white card, with actions on the
frame. Add an experimental `fill="progress"` mode that fills white through
the furthest step reached, `Stepper.Complete` with `reset()`, and gate
`goToStep` on reached steps.

Fix unhandled rejections from `beforeNext`, a loading flash on sync Next,
vertical headers locking already-reached steps, and rail error states.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Comment thread packages/kumo/src/components/stepper/stepper.tsx
Comment thread packages/kumo/src/components/stepper/stepper.tsx
Comment thread packages/kumo/src/components/stepper/stepper.tsx Outdated
@ask-bonk

ask-bonk Bot commented Sep 30, 2026

Copy link
Copy Markdown
Contributor

I'm Bonk, and I've done a quick review of your PR.

Posted 3 inline findings. No additional actionable findings.

Review notes
  • Confirmed the target is pull request feat(stepper): add Stepper component #830, feat(stepper): add Stepper component. I’m inspecting the PR diff, applicable component conventions, and existing published reviews before validating behavior and tests.
  • The checkout does not contain a local main ref, so the initial local comparison could not run. The new component source and its unit tests are present; I’m resolving the PR base through GitHub, then reviewing the documentation, exports, and navigation behavior against the full changed files.
  • I verified the component is exported through both the package root and the granular entry point, and the docs route is included in the sidebar. The checkout lacks the base ref needed for a local merge-base diff, so I’m using the PR metadata/changed-file manifest and source-level behavior checks instead.
  • No prior review comments or reviews exist on PR feat(stepper): add Stepper component #830. The targeted unit-test command could not run because pnpm is unavailable in this runner; I completed static inspection of the new state transitions and then checked related Button and Select behavior.
  • Static review identified three behavioral defects: closed vertical panels remain in the keyboard and accessibility tree; Stepper.Back is disabled in a one-step completion view despite the documented completion-back flow; and a finished stepper without Stepper.Complete leaves its Finish button enabled, allowing the completion callback to be retried. I’m posting these as inline suggestions on PR feat(stepper): add Stepper component #830.

github run

@github-actions

github-actions Bot commented Sep 30, 2026 •

Copy link
Copy Markdown
Contributor

📐 Bundle Size

Consumer fixtures bundled against packages/kumo/dist (peers external, minified ESM).

Fixture Raw Gzip Brotli
Button (root) 166.3 KB 50.9 KB 44.1 KB
Button (components/button) 166.2 KB 50.9 KB 44.1 KB
Button + Dialog + Select (root) 291.1 KB 86.8 KB 72.9 KB
Button + Dialog + Select (component subpaths) 291.1 KB 86.8 KB 72.8 KB
Chart (root) 238.6 KB 72.0 KB 61.8 KB
Chart (components/chart) 238.6 KB 72.0 KB 61.9 KB
Badge (components/badge) 36.5 KB 12.7 KB 11.1 KB
Flow (components/flow) 200.6 KB 59.2 KB 51.7 KB
Button (primitives/button) 12.2 KB 4.4 KB 3.9 KB
Primitives barrel 635.8 KB 176.8 KB 139.3 KB
Code highlighting (code) 2.07 MB 469.2 KB 350.4 KB

npm tarball: 550 files, 1.51 MB packed, 6.99 MB unpacked.

⚠️ 24 flagged files in tarball (tests / raw scripts)
  • dist/blocks-source/delete-resource/delete-resource.test.tsx
  • dist/blocks-source/resource-list/resource-list.test.tsx
  • scripts/component-registry/cache.ts
  • scripts/component-registry/discovery.ts
  • scripts/component-registry/example-cleanup.ts
  • scripts/component-registry/index.test.ts
  • scripts/component-registry/index.ts
  • scripts/component-registry/markdown-generator.ts
  • scripts/component-registry/metadata.ts
  • scripts/component-registry/props-filter.ts
  • scripts/component-registry/schema-generator.ts
  • scripts/component-registry/sub-components.ts
  • scripts/component-registry/types.ts
  • scripts/component-registry/utils.ts
  • scripts/component-registry/variant-parser.ts
  • scripts/css-build.ts
  • scripts/generate-globe-land-mask.mjs
  • scripts/generate-primitives.ts
  • scripts/theme-generator/config.ts
  • scripts/theme-generator/generate-css.test.ts
  • scripts/theme-generator/generate-css.ts
  • scripts/theme-generator/index.ts
  • scripts/theme-generator/migrate.ts
  • scripts/theme-generator/types.ts

Report-only: no size thresholds are enforced yet.

Commit: e0b0feab

@github-actions

github-actions Bot commented Sep 30, 2026 •

Copy link
Copy Markdown
Contributor

Visual contracts

Linux Chromium references exercised by the PR's visual-contracts job.

1 curated contract

truncating text trigger

truncating text trigger

- Make collapsed vertical panels inert so hidden fields leave the tab
  order and accessibility tree while keeping the collapse animation.
- Disable Next once the flow is complete so onComplete can't run twice.
- Let Back leave the completion view of a one-step flow.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@pkg-pr-new

pkg-pr-new Bot commented Sep 30, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/@cloudflare/kumo@830

commit: e0b0fea

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 30, 2026 •

Copy link
Copy Markdown

🚀 Deploying Preview to Cloudflare 🚀

Preview URL: https://feat-stepper-layered-kumo-docs.design-engineering.workers.dev (commit e0b0fea)

This URL reflects your latest Preview deployment

Preview Deployments by commit

Status Deployment URL Commit Updated (UTC) See this deployment's details
  • Build: Success ✅
  • Deployment: Success ✅

View logs ↗
https://f5e1f45b-kumo-docs.design-engineering.workers.dev e0b0fea 2026-09-30T15:21:02.289Z Visit the dashboard ↗
  • Build: Success ✅
  • Deployment: Success ✅

View logs ↗
https://4f140119-kumo-docs.design-engineering.workers.dev f87d60c 2026-09-30T15:04:02.106Z Visit the dashboard ↗

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant