Skip to content

feat: SW-2054 refine Data App Shell nav rail + workflow step styling#138

Open
GracePan-Tetra wants to merge 1 commit into
feat/dataappshell-collapsible-railfrom
feat/dataappshell-rail-style
Open

feat: SW-2054 refine Data App Shell nav rail + workflow step styling#138
GracePan-Tetra wants to merge 1 commit into
feat/dataappshell-collapsible-railfrom
feat/dataappshell-rail-style

Conversation

@GracePan-Tetra

Copy link
Copy Markdown
Contributor

Stacked on #137#136. Review/merge in order; bases retarget to main as the stack lands.

What

UI/style pass on the Data App Shell nav rail and the workflow step demo.

Side nav rail (component)

  • Rail width 60px → 48px; nav buttons are now icon-only (label moved to aria-label + tooltip).
  • Button box 36px → 30px; icon glyphs 20px → 16px.
  • Removed the divider under the app logo; nudged the logo up 4px.
  • Unified breadcrumb text size to text-sm.

Workflow step panel (story demo)

  • Demo steps renamed to generic "Step N Name"; removed per-step input/output counts.
  • Step card height 52px → 40px; step name uses the text-title-sm MD3 token; inactive steps lightened (font-light).
  • Removed the INPUT/OUTPUT data-count pills and now-dead helpers (formatCount, DataCount, DataCountPills).
  • Added an outline Back button next to Next, shown from step 2 onward.

Before / After

  • Rail: labeled (Project/Explorer) + divider + 60px → icon-only, no divider, 48px.
  • Step panel: "Data Overview…" rows with counts → "Step N Name", 40px, lighter inactive.

Scope note

Most of the workflow/step changes live in DataAppShell.stories.tsx (demo code) — no shipped API impact. Real component changes are limited to rail sizing, logo spacing, divider, and breadcrumb font.

Checks

  • yarn lint
  • yarn typecheck

🤖 Generated with Claude Code

@GracePan-Tetra GracePan-Tetra requested review from a team as code owners June 17, 2026 00:36
@vercel

vercel Bot commented Jun 17, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ts-lib-ui-kit-storybook Ready Ready Preview, Comment Jun 17, 2026 3:01am

Request Review

@GracePan-Tetra GracePan-Tetra changed the title feat(data-app-shell): refine nav rail + workflow step styling feat: SW-2054 refine Data App Shell nav rail + workflow step styling Jun 17, 2026
Side nav rail (component):
- Narrow rail 60px -> 48px; icon-only nav buttons (label moved to
  aria-label + tooltip); button box 36px -> 30px; glyphs 20px -> 16px.
- Remove divider under the app logo; nudge logo up 4px.
- Unify breadcrumb text size to text-sm.

Workflow step panel (story demo):
- Rename demo steps to generic "Step N Name"; drop per-step counts.
- Step card height -> 40px; step name uses the text-title-sm token;
  inactive steps lightened (font-light).
- Remove the INPUT/OUTPUT data-count pills and dead helpers.
- Add an outline Back button next to Next from step 2 onward.

Play-tests updated to query nav buttons by accessible name and the
new labels/sizes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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