Design QA · branch design/ds-kit · Oct 22 · local, not pushed

Design kit QA

Before and after for every part of the kit, the booking flow sketch, the checks and what's still open. Use the tabs to jump.

Summary

The shared parts are built in the app, documented on the design site and captured for Figma. Nothing is pushed yet.

75components in the inventory, all in the kit
3places that match: site kit, app /dev/kit, Figma
493 / 498e2e passing; the 5 were overlapping test runs, they pass alone
0new token violations (CI check)
Open the kit (master)Status tableOpen decisions

Selection

One picker look everywhere; buttons gained large and loading.

Chips, segments, option cards
Chips, segments, option cards
Next, primary, secondary, disabled
Next, primary, secondary, disabled
Before · liveBefore: Weekly rules: day chips were solid green squares
AfterAfter: Weekly rules: day chips were solid green squares
Weekly rules: day chips were solid green squares
Before · liveBefore: Feed pet segments
AfterAfter: Feed pet segments
Feed pet segments

Layout and Settings

Settings is on list rows; one section-title style on nine more screens.

Before · liveBefore: Settings: list rows, Sign out as a red row, version as a footer
AfterAfter: Settings: list rows, Sign out as a red row, version as a footer
Settings: list rows, Sign out as a red row, version as a footer
Step header, list rows
Step header, list rows
Summary rows, result state
Summary rows, result state

Feedback

Sheets rise and have a handle; toasts can Undo; DANGER follows Figma; Skeleton replaces spinners where used.

Sheet
Sheet
DANGER
DANGER
Toast with Undo
Toast with Undo
Toasts, result, Skeleton
Toasts, result, Skeleton

Booking flow sketch

The step-by-step booking request, playable from kit parts only (/dev/booking-flow). Nothing is sent; it's for the product call.

1 · Who
1 · Who
2 · Where
2 · Where
3 · Which days
3 · Which days
4 · Drop-off
4 · Drop-off
5 · Pick-up
5 · Pick-up
6 · Check
6 · Check
Request sent
Request sent

Checks

Everything that runs on this branch.

TypecheckPasses
Token check (CI)Passes · 67 known cases, none new
Screen map (CI)Up to date
e2e, full suite493 / 498 · the 5 were overlapping runs; all pass alone, the header test 3 / 3
Bugs found and fixed by the suiteSheet rise moved Done under the pointer (now CSS on web) · loading wrapper changed the button label's position (now only while loading)
Figma pluginKit: 10 boards, 134 instances · main run passes the mock

Still open

Three need someone else; one is a merge order.

For engineers

Run it, read the code panels, keep tokens clean.