feat: SW-2118 Evolve Data App Shell into composable AppShell container by owilliams-tetrascience · Pull Request #183 · tetrascience/ts-lib-ui-kit

owilliams-tetrascience · 2026-07-17T17:49:07Z

TL;DR

Final PR of the Data App Shell Iteration (SW-2118, PR-6). It turns the Data App Shell into a composable, zone-based container: you pass slots, and the shell arranges the zones, owns a single collapse model, and adapts responsively. Ships 4 documented Storybook variants, each with copy-paste-ready code. Layout and collapse behavior match the design playground + movie attached to the ticket.

What changed

Zone-based layout — a CSS-grid container positions the primary nav, top bar, secondary nav, and body. Hand it slots; omit one and its track collapses away.
One collapse model — a single toggle (controlled or uncontrolled), an optional "collapse everything into one icon rail" mode, and responsive auto-collapse below a breakpoint.
Two nav axes — vertical (icon rail or collapsible sidebar) or horizontal (top nav row).
Matches the design — collapse affordances, the secondary nav sitting below the breadcrumbs, and the collapsed horizontal stepper folding into a step dropdown next to the breadcrumbs.
Removed the top-bar help button — no longer in the design.

New / changed props

Prop	Purpose
`navVariant`	`vertical` (default) or `horizontal`
`primaryNav`	`rail` (default — permanent icon rail) or `sidebar` (collapsible, labelled)
`sidebarPanel` / `secondaryBar` / `rightPanel`	secondary-nav (vertical / horizontal) and right-panel zones
`showNavRail` / `showTopBar`	hide a zone entirely (`false`)
`collapsed` / `defaultCollapsed` / `onCollapsedChange`	the single collapse toggle
`hideNavOnCollapse`	collapse nav + secondary together into one icon rail
`autoCollapse`	media query that auto-collapses (default `(max-width: 1023px)`; `false` to disable)
`headerLeft` / `headerCenter` / `headerActions`	top-bar slots

Also new: ShellContext (useDataAppShell / useOptionalDataAppShell) so zones read shell state, and a shared ShellCollapseButton so every collapse trigger looks identical.
Removed: onHelpClick.

Stories (4)

Story	What it shows
Default	Collapsible labelled sidebar that folds to an icon rail (chevron in the brand row → under the logo)
Secondary Navigation	Icon rail + vertical secondary nav; one toggle collapses both into a single rail (`hideNavOnCollapse`)
Secondary Navigation - Horizontal	Stepper bar under the breadcrumbs; collapses to a compact step dropdown beside them
With Right Panel	Docked, resizable right panel with a top-bar toggle button

Each story's Storybook "Show code" block carries a ready-to-copy <DataAppShell> composition. Legacy/regression stories were removed from the sidebar; their coverage moved into unit tests.

Back-compat

sidebarPanel, rightPanel, showNavRail, and the top-bar slots are unchanged. The primary nav still defaults to the icon rail — opt into the collapsible sidebar with primaryNav="sidebar". The only removal is onHelpClick.

Type of Change

Checklist

yarn lint passes
yarn build passes
yarn test:all passes (1,583 tests)
Storybook stories added/updated
Code coverage remains the same or increased (every changed file ≥ 97% lines; total 96.8%)

Testing

Play tests — sidebar collapse/expand, one-toggle merge under hideNavOnCollapse, the horizontal stepper ⇄ step-dropdown swap and step selection, and the docked right panel (resize, width persistence, focus, Esc).
Unit tests — responsive auto-collapse (matchMedia stub) with manual-collapse precedence, zone hiding, navVariant="horizontal", ShellContext publication + hook errors, and the right-panel overlay variant.

New/renamed stories have parameters.zephyr.testCaseId left blank — apply the zephyr_sync label to generate IDs before merge.

Verification

Deploys to preview environment for manual verification
All CI/E2E checks pass

Screenshots

Verified against the SW-2118 playground HTML and AppShell_Updates.mov in light + dark mode: Default (expanded sidebar ↔ collapsed rail), Secondary Navigation (single-rail merge), Secondary Navigation - Horizontal (stepper bar ↔ step dropdown by the breadcrumbs), and With Right Panel (docked, resizable).

🤖 Generated with Claude Code

vercel · 2026-07-17T17:49:16Z

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

Project	Deployment	Actions	Updated (UTC)
ts-lib-ui-kit-storybook	Ready	Preview, Comment	Jul 23, 2026 8:20pm

Copilot

Pull request overview

Evolves DataAppShell into a more composable “zone-based” AppShell container with a shared collapse model and context, enabling vertical/horizontal navigation variants and additional layout slots while keeping the shell domain-agnostic.

Changes:

Introduces ShellContext (+ hooks) to publish shell layout state (navVariant, collapsed, etc.) to zone children.
Refactors DataAppShell into a CSS-grid “zones” layout, adds responsive auto-collapse, and unifies collapse behavior across zones (optionally via hideNavOnCollapse).
Reworks SecondaryNav, stories, and adds unit tests to cover new collapse/zone behaviors.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/composed/DataAppShell/ShellContext.tsx	Adds context + hooks for publishing shell layout state to children.
src/components/composed/DataAppShell/SecondaryNav.tsx	Updates secondary nav to optionally follow shell collapse; adds collapsed horizontal dropdown mode; uses shared collapse button.
src/components/composed/DataAppShell/index.ts	Exposes new context hooks/types and shared collapse button from the module entrypoint.
src/components/composed/DataAppShell/DataAppShell.tsx	Converts layout to grid “zones”, adds single collapse model + auto-collapse, primary sidebar behavior, and provider wiring.
src/components/composed/DataAppShell/DataAppShell.stories.tsx	Reworks stories around a single configurable demo composition; updates play tests for new behaviors.
src/components/composed/DataAppShell/CollapseButton.tsx	Introduces shared collapse/expand affordance component.
src/components/composed/DataAppShell/tests/DataAppShell.test.tsx	Adds unit coverage for auto-collapse, zone visibility, horizontal nav, and context behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Ties the Data App Shell Iteration together (PR-6). The shell is now a CSS-grid zone container driven by navVariant (vertical | horizontal, default vertical) plus which slots are present — pass false to hide a zone (showNavRail / showTopBar), and new secondaryBar + rightPanel zones. It knows zones, never domain concepts. - ShellContext (new) publishes {navVariant, collapsed, setCollapsed, hideNavOnCollapse}; useDataAppShell / useOptionalDataAppShell exported. - One collapse toggle (controlled/uncontrolled). The primary sidebar now expands by default with the collapse chevron in the brand row and collapses to an icon rail with the expand chevron under the logo — matching the SW-2118 playground/movie. ShellCollapseButton (new) is the shared affordance so every zone's trigger looks identical. - hideNavOnCollapse collapses nav + secondary together into a single icon rail (secondary carries the expand chevron; a floating expand button appears when there is no secondary). - Responsive: auto-collapse below a breakpoint via the autoCollapse media query (leaves restore the expanded state unless the user collapsed manually). - SecondaryNav: follows the shell collapse when hideNavOnCollapse, owns its collapse otherwise; horizontal orientation is now collapsible — collapsed it renders a compact step dropdown for the top bar (like the playground's collapsed wizard). - Stories reworked to the agreed variant order: Default (sidebar only), Secondary Nav · Sidebar, Workflow · Vertical, Workflow · Horizontal, With Right Panel, Customizable (controls-driven), plus a hidden overlay test story. Play tests cover collapse, zone hiding, the step dropdown, and the right panel; unit tests cover responsive auto-collapse, ShellContext, and zone switches. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

…lapse toggle - The secondary (side) zone now starts below the top bar in the vertical grid, so breadcrumbs span the full width beside the primary nav — matching the playground layout. - When a secondary nav is present, the collapse chevron renders only there; the primary sidebar's brand-row chevron is suppressed so there is exactly one collapse affordance. - The collapsed horizontal workflow stays in its own bar below the breadcrumbs, folding its items into the compact step dropdown in place (no longer moved into the top bar by the story). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Follow-up to the review suggestion: use the design-system cn() helper so consumer classes properly override the base via tailwind-merge instead of plain string concatenation. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

The Data App Shell section now lists only Docs + the agreed variants (Default, Secondary Nav · Sidebar, Workflow · Vertical, Workflow · Horizontal, With Right Panel, Customizable). The auxiliary regression stories (breadcrumbs, help button, mobile nav, TDP links, nav groups, etc.) are tagged !dev — hidden from the sidebar but still executed by the test runner, so their play coverage is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Reverts the expanded/collapsible primary sidebar introduced earlier in this PR — the primary nav is the compact 48px icon rail again, as in the existing production shell. The shell-level collapsed state still drives the secondary zone (one toggle via ShellContext) and, with hideNavOnCollapse, hides the rail for the single-rail focus mode. The now-purposeless collapsible prop is removed; ShellCollapseButton remains for the secondary nav triggers. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…p help button Collapse behavior now matches the playground preset for every sidebar variant: - Secondary Nav · Sidebar uses the 'hide primary rail' collapse mode (hideNavOnCollapse) — collapsing the menu sidebar leaves one icon rail, same as Workflow · Vertical. - Workflow · Horizontal collapse removes the stepper bar entirely and tucks the step dropdown into the top bar beside the breadcrumbs ('shrink' mode — the primary rail stays put). Also removes the shell's built-in help button (onHelpClick prop, TopNav rendering, and the Help Button story) — top-bar actions are fully owned by the headerActions slot now. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Adds a headerLeft slot to the shell's top bar (rendered in the left group after the breadcrumb trail) and moves the collapsed horizontal workflow's step dropdown there — top-left next to the breadcrumbs, matching the playground, instead of the centered header slot. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

DataAppShellPrimaryNav's expanded sidebar item combined w-full with mx-1: since w-full sets an explicit 100% width (unlike flex's auto-stretch, which subtracts margins), each row ended up 8px wider than its scroll container and had its right edge clipped — visible as the active row's rounded highlight looking cut off before reaching the sidebar's edge. Moves the 4px inset from the row's margin to padding on the shared items container instead, so every row's own width now already accounts for it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

… is tight TopNavBreadcrumb inherited Breadcrumb's default flex-wrap. With the mobile hamburger and/or a headerLeft node (e.g. the collapsed horizontal workflow's step dropdown) sharing the top bar's flex-1 left group, there wasn't always room for the full trail on one line, so it wrapped — pushing the dropdown/Next button around and overlapping content instead of the trail simply truncating. The trail now stays on one line and only the current (last) crumb truncates; earlier crumbs and separators keep their natural width so the trail still reads left-to-right. The mobile trigger and headerLeft slot are marked shrink-0 so only the breadcrumb gives up width under pressure. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

The Default story now shows the collapsible primary sidebar from the playground pictures: expanded it is a 220px sidebar with the app name, labelled nav and a collapse chevron in the brand row; the chevron collapses it to a 48px icon rail with an expand chevron under the logo. Adds an opt-in primaryNav prop ('rail' | 'sidebar', default 'rail') so the other variants keep the permanent icon rail restored earlier; only Default opts into 'sidebar'. A collapsible sidebar renders its own collapsed rail, so it is never removed by hideNavOnCollapse. ShellDemo gets a matching 'primary' prop and the Default play test exercises the collapse/expand cycle. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…th copyable snippets

…lipping

…vigation - Renames the Workflow variants to Secondary Navigation and Secondary Navigation - Horizontal (the workflow stepper is the secondary-nav demo). - Drops the separate menu-style Secondary Nav · Sidebar story in favor of those, and deletes every previously hidden (!dev) regression story so the file holds only the 4 documented variants. - Each story keeps a copyable <DataAppShell> composition snippet in its Docs 'Show code' block. - Moves the overlay right-panel coverage lost with the deleted story into a RightPanel unit test (overlay renders via Sheet, closed shows only the FAB, header close fires onOpenChange) — keeps every changed file >=95% lines. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Deleting the hidden regression stories dropped a few already-merged lines below the branch-level baseline (breadcrumb link/plain variants, the back-to-platform TDP link, and the sidebar group-section label), tipping the overall-coverage gate. Move that coverage into unit tests: - DataAppShell: breadcrumb link/plain/page branches; AppHeaderMenu back-to-platform as a TDP link (with path) and as an onBackToPlatform button. - PrimaryNav: sidebar-variant group section labels. DataAppShell.tsx and PrimaryNav.tsx are back to 100% lines; overall 96.83% (> the 96.81% base). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

github-actions · 2026-07-23T20:23:20Z

Coverage Report

Status	Category	Percentage	Covered / Total
🟢	Lines	96.83% (🎯 83%) ⬆️ +0.02%	23313 / 24075
🟢	Statements	96.83% (🎯 83%) ⬆️ +0.02%	23313 / 24075
🟢	Functions	95.14% (🎯 74%) ⬇️ -0.32%	1019 / 1071
🟢	Branches	90.49% (🎯 81%) ⬇️ -0.01%	4530 / 5006

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
src/components/composed/DataAppShell/CollapseButton.tsx	100%	100%	100%	100%
src/components/composed/DataAppShell/DataAppShell.tsx	100% 🟰 ±0%	94.11% ⬆️ +5.54%	80% ⬇️ -8.88%	100% 🟰 ±0%
src/components/composed/DataAppShell/PrimaryNav.tsx	100% 🟰 ±0%	95.45% ⬇️ -0.20%	100% 🟰 ±0%	100% 🟰 ±0%
src/components/composed/DataAppShell/SecondaryNav.tsx	99.72% ⬇️ -0.28%	90.62% ⬇️ -1.27%	93.75% ⬇️ -6.25%	99.72% ⬇️ -0.28%	358
src/components/composed/DataAppShell/ShellContext.tsx	100%	83.33%	100%	100%
src/components/composed/TopBar/TopBar.tsx	100% 🟰 ±0%	100% 🟰 ±0%	100% 🟰 ±0%	100% 🟰 ±0%

Generated in workflow #1063 for commit 79caecf by the Vitest Coverage Report Action

Copilot AI review requested due to automatic review settings July 17, 2026 17:49

owilliams-tetrascience requested review from a team as code owners July 17, 2026 17:49

owilliams-tetrascience temporarily deployed to artifactory-prod July 17, 2026 17:49 — with GitHub Actions Inactive

Copilot started reviewing on behalf of owilliams-tetrascience July 17, 2026 17:49 View session

Copilot AI reviewed Jul 17, 2026

View reviewed changes

Comment thread src/components/composed/DataAppShell/CollapseButton.tsx Outdated

Comment thread src/components/composed/DataAppShell/DataAppShell.stories.tsx

owilliams-tetrascience temporarily deployed to artifactory-prod July 17, 2026 19:22 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 17, 2026 19:26 View deployment

owilliams-tetrascience temporarily deployed to artifactory-prod July 17, 2026 19:42 — with GitHub Actions Inactive

owilliams-tetrascience temporarily deployed to artifactory-prod July 17, 2026 19:44 — with GitHub Actions Inactive

owilliams-tetrascience temporarily deployed to artifactory-prod July 17, 2026 19:47 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 17, 2026 19:53 View deployment

owilliams-tetrascience temporarily deployed to artifactory-prod July 21, 2026 15:08 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 21, 2026 15:13 View deployment

owilliams-tetrascience and others added 6 commits July 21, 2026 13:33

Apply suggestions from code review

36217aa

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

refactor: SW-2118 merge collapse-button classes via cn()

b07cce5

Follow-up to the review suggestion: use the design-system cn() helper so consumer classes properly override the base via tailwind-merge instead of plain string concatenation. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

owilliams-tetrascience force-pushed the claude/cool-blackwell-4bebee branch from 776619a to adae8c6 Compare July 21, 2026 17:36

owilliams-tetrascience temporarily deployed to artifactory-prod July 21, 2026 17:36 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 21, 2026 17:39 View deployment

owilliams-tetrascience temporarily deployed to artifactory-prod July 23, 2026 15:35 — with GitHub Actions Inactive

chore: SW-2118 retrigger CI after CodeQL infra flake

4b28a5f

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

owilliams-tetrascience temporarily deployed to artifactory-prod July 23, 2026 15:39 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 23, 2026 15:43 View deployment

owilliams-tetrascience temporarily deployed to artifactory-prod July 23, 2026 16:50 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 23, 2026 16:53 View deployment

owilliams-tetrascience temporarily deployed to artifactory-prod July 23, 2026 17:02 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 23, 2026 17:05 View deployment

owilliams-tetrascience temporarily deployed to artifactory-prod July 23, 2026 17:07 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 23, 2026 17:11 View deployment

owilliams-tetrascience temporarily deployed to artifactory-prod July 23, 2026 17:20 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 23, 2026 17:24 View deployment

feat: add storybook configuration and enhance DataAppShell stories wi…

52c9254

…th copyable snippets

owilliams-tetrascience temporarily deployed to artifactory-prod July 23, 2026 17:44 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 23, 2026 17:47 View deployment

owilliams-tetrascience and others added 3 commits July 23, 2026 15:24

fix: adjust right slot layout in TopBar component

56aeacd

fix: adjust padding in rail variant of itemsAreaVariants to prevent c…

2aef226

…lipping

owilliams-tetrascience temporarily deployed to artifactory-prod July 23, 2026 19:45 — with GitHub Actions Inactive

vercel Bot deployed to Preview July 23, 2026 19:49 View deployment

GracePan-Tetra approved these changes Jul 23, 2026

View reviewed changes

owilliams-tetrascience deployed to artifactory-prod July 23, 2026 20:17 — with GitHub Actions Active

vercel Bot deployed to Preview July 23, 2026 20:20 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: SW-2118 Evolve Data App Shell into composable AppShell container#183

feat: SW-2118 Evolve Data App Shell into composable AppShell container#183
owilliams-tetrascience wants to merge 17 commits into
mainfrom
claude/cool-blackwell-4bebee

owilliams-tetrascience commented Jul 17, 2026 •

edited by atlassian Bot

Loading

Uh oh!

vercel Bot commented Jul 17, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

owilliams-tetrascience commented Jul 17, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TL;DR

What changed

New / changed props

Stories (4)

Back-compat

Type of Change

Checklist

Testing

Verification

Screenshots

Uh oh!

vercel Bot commented Jul 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 23, 2026

Coverage Report

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

owilliams-tetrascience commented Jul 17, 2026 •

edited by atlassian Bot

Loading

vercel Bot commented Jul 17, 2026 •

edited

Loading