feat: SW-2118 Evolve Data App Shell into composable AppShell container#183
Open
owilliams-tetrascience wants to merge 5 commits into
Open
feat: SW-2118 Evolve Data App Shell into composable AppShell container#183owilliams-tetrascience wants to merge 5 commits into
owilliams-tetrascience wants to merge 5 commits into
Conversation
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>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 17, 2026 17:49 — with 
GitHub Actions
Inactive
GitHub Actions
Inactive
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
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
DataAppShellinto a CSS-grid “zones” layout, adds responsive auto-collapse, and unifies collapse behavior across zones (optionally viahideNavOnCollapse). - 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.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 17, 2026 19:22 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
…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>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 17, 2026 19:42 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
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
temporarily deployed
to
artifactory-prod
July 17, 2026 19:44 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
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>
owilliams-tetrascience
temporarily deployed
to
artifactory-prod
July 17, 2026 19:47 — with
GitHub Actions
Inactive
GitHub Actions
Inactive
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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
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.
Summary
Final PR of the Data App Shell Iteration (SW-2118, PR-6) — ties PR-1…PR-5 together by evolving the existing Data App Shell into a configurable grid container, matching the attached playground/movie (including the moved collapse triggers).
navVariant(vertical|horizontal, default vertical): CSSgrid-template-areasplace the primary nav, secondary (side), top bar, secondary bar, and body zones; slots absent from the tree collapse their track. New zone switches:showNavRail,showTopBar; new zones:secondaryBar(horizontal stepper) and the existingrightPanel. The shell knows zones, never domain concepts.ShellContextpublishes{navVariant, collapsed, setCollapsed, hideNavOnCollapse}(useDataAppShell/useOptionalDataAppShellexported).collapsed/defaultCollapsed/onCollapsedChange). The primary sidebar now renders expanded by default with the collapse chevron in the brand row; collapsed it becomes a 48px icon rail with the expand chevron directly under the logo — per the playground. A sharedShellCollapseButtonkeeps every zone's trigger identical.hideNavOnCollapsecollapses nav + secondary together into a single icon rail (the secondary rail carries the expand chevron; a floating expand button appears when no secondary exists).autoCollapsemedia query (default(max-width: 1023px), passfalseto disable) auto-collapses on enter and restores on leave unless the user collapsed manually.hideNavOnCollapse, owns its own toggle otherwise (explicitcollapsedprop always wins). Horizontal orientation is now collapsible — collapsed it renders a compact step dropdown for the top bar, exactly like the playground's collapsed wizard.hideNavOnCollapse) · 4 Workflow · Horizontal · 5 With Right Panel · 6 Customizable (Storybook-controls-driven, like theui/sidebarstory) — plus a hidden overlay-panel test story.Back-compat notes for reviewers:
sidebarPanel,rightPanel,showNavRail, and all existing top-bar props are unchanged; the visible behavior change is the primary sidebar starting expanded (collapse to get the old rail, or setdefaultCollapsed).Type of Change
Checklist
yarn lintpassesyarn buildpassesyarn test:allpasses (158 files / 1545 tests)Testing
Play tests cover: sidebar collapse/expand via the brand-row chevron, independent secondary collapse, one-toggle merge under
hideNavOnCollapse, the horizontal stepper ⇄ top-bar step dropdown swap, step selection via dropdown, docked right panel (resize, persistence, focus, Esc) and the overlay variant. Unit tests cover responsive auto-collapse (matchMedia stub), manual-collapse precedence, zone hiding,navVariant="horizontal", ShellContext publication, and hook error behavior. New/reworked stories haveparameters.zephyr.testCaseIdleft absent — apply thezephyr_synclabel to generate IDs.Verification
Screenshots
Verified against the SW-2118 playground HTML and AppShell_Updates.mov in light + dark mode: Default (expanded sidebar, brand-row chevron), collapsed rail (chevron under logo), Secondary Nav · Sidebar (permanent rail + independent secondary), Workflow · Vertical (single-rail merge), Workflow · Horizontal (stepper bar ⇄ step dropdown by the breadcrumbs).
🤖 Generated with Claude Code