feat: SW-2053 add collapsible nav rail (showNavRail) to Data App Shell

[GracePan-Tetra]

Stacked on #136 (breadcrumb). Review/merge that first; base will retarget to main after.

What

Adds a showNavRail?: boolean prop to DataAppShell. When false, the desktop icon nav rail is not rendered.

This lets a consumer collapse the sidebar so that both the workflow panel and the app nav rail hide, giving the content area full width — instead of leaving the rail behind.

API

<DataAppShell showNavRail={!collapsed} sidebarPanel={<WorkflowPanel .../>} ... />

Default true — fully backward compatible.

Naming: Renamed from navRailHidden → showNavRail per review (@owilliams-tetrascience) to match the kit's positive-visibility convention (showLegend, showCloseButton, etc.). The prop is new/unreleased, so this is non-breaking. Call site reads showNavRail={!collapsed} instead of the double-negative navRailHidden={collapsed}.

Scope

• DataAppShell.tsx: new prop + render guard on IconRailSidebar.
• DataAppShell.stories.tsx: wire to the Default story's collapsed state + play-test asserting the rail is hidden when collapsed.

Behavior

• Before: collapsing the panel leaves the icon rail visible.
• After: collapsing hides the rail too; expanding restores it.

Checks

• yarn lint ✅
• yarn typecheck ✅
• yarn test:storybook ✅ (13/13)

🤖 Generated with Claude Code

[vercel]

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	Jun 23, 2026 10:56pm

[owilliams-tetrascience]

Functionally this works and it's backward-compatible 👍 — one naming change before merge.

Rename navRailHidden → showNavRail (default true).

Everywhere else in the kit, visibility toggles are written in the positive: showLegend, showCloseButton, showLineNumbers, etc. There's no *Hidden prop anywhere, so this one stands out.

It also reads cleaner at the call site — showNavRail={!collapsed} ("show the rail when not collapsed") instead of the double-negative navRailHidden={collapsed} / navRailHidden = false.

/** Show the desktop icon nav rail. Set false to reclaim width when the panel is collapsed. */
showNavRail?: boolean; // default true

{showNavRail && <IconRailSidebar {...sidebarProps} />}

Since the prop is brand-new and unreleased, the rename is free now and would be a breaking change later. Behavior stays identical.

[54321jenn-ts]

LGTM

[54321jenn-ts]

@owilliams-tetrascience done in 9728b25 — renamed navRailHidden → showNavRail (default true) across the prop definition, the render guard ({showNavRail && <IconRailSidebar />}), and the Default story call site (now showNavRail={!collapsed}). Behavior is unchanged.

Checks: yarn lint ✅ · yarn typecheck ✅ · yarn test:storybook ✅ (13/13, incl. CollapsedWorkflow asserting the rail is hidden when collapsed).

@GracePan-Tetra heads up — pushed this rename straight to your branch.

[Copilot]

Pull request overview

Adds an opt-in control to the DataAppShell composed component to hide the desktop icon nav rail when the workflow panel is collapsed, allowing the main content area to reclaim full width. This change fits into the library’s “composed” shell layout components by making the shell’s navigation chrome configurable for data-dense layouts.

Changes:

• Introduces a new DataAppShell prop to conditionally render the desktop icon nav rail.
• Wires the new prop into the default “workflow” story so the rail hides when the workflow panel is collapsed.
• Extends the CollapsedWorkflow play test to assert the icon rail is not present when collapsed.

Reviewed changes

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

File	Description
src/components/composed/DataAppShell/DataAppShell.tsx	Adds a new prop and render guard around the desktop icon rail.
src/components/composed/DataAppShell/DataAppShell.stories.tsx	Updates the default shell story to drive the new prop from the collapsed state and adds a play assertion for the hidden rail.

---

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

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🟢	Lines	94.74% (🎯 83%) 🟰 ±0%	20628 / 21771
🟢	Statements	94.74% (🎯 83%) 🟰 ±0%	20628 / 21771
🟢	Functions	93.58% (🎯 74%) 🟰 ±0%	919 / 982
🟢	Branches	88.74% (🎯 81%) 🟰 ±0%	3768 / 4246

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
src/components/composed/DataAppShell/DataAppShell.tsx	97.93% ⬆️ +0.01%	88.52% ⬆️ +0.19%	85.71% 🟰 ±0%	97.93% ⬆️ +0.01%	214-215, 299-304

Generated in workflow #830 for commit 84fba9b by the Vitest Coverage Report Action