Skip to content

feat: SW-2053 add collapsible nav rail (navRailHidden) to Data App Shell#137

Open
GracePan-Tetra wants to merge 2 commits into
mainfrom
feat/dataappshell-collapsible-rail
Open

feat: SW-2053 add collapsible nav rail (navRailHidden) to Data App Shell#137
GracePan-Tetra wants to merge 2 commits into
mainfrom
feat/dataappshell-collapsible-rail

Conversation

@GracePan-Tetra

Copy link
Copy Markdown
Contributor

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

What

Adds a navRailHidden?: boolean prop to DataAppShell. When true, 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 navRailHidden={collapsed} sidebarPanel={<WorkflowPanel .../>} ... />

Default false — fully backward compatible.

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

🤖 Generated with Claude Code

@GracePan-Tetra GracePan-Tetra requested review from a team as code owners June 17, 2026 00:35
@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 2:59am

Request Review

@GracePan-Tetra GracePan-Tetra changed the title feat(data-app-shell): collapsible nav rail (navRailHidden prop) feat: SW-2053 add collapsible nav rail (navRailHidden) to Data App Shell Jun 17, 2026
GracePan-Tetra and others added 2 commits June 16, 2026 22:53
Replace the demo breadcrumb trail with generic placeholder labels
(All Projects / Project Name / worksession name).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a `navRailHidden` prop to DataAppShell. When true, the desktop
icon nav rail is not rendered, so collapsing the sidebar panel can
hide both the rail and the panel, giving the content full width.

Wired in the Default story to the panel's collapsed state, with a
play-test asserting the rail is hidden when collapsed.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@GracePan-Tetra GracePan-Tetra force-pushed the feat/dataappshell-breadcrumb-text branch from ca66967 to dac22ff Compare June 17, 2026 02:54
@GracePan-Tetra GracePan-Tetra force-pushed the feat/dataappshell-collapsible-rail branch from 15afa45 to 20f19ab Compare June 17, 2026 02:54
Base automatically changed from feat/dataappshell-breadcrumb-text to main June 17, 2026 14:48

@owilliams-tetrascience owilliams-tetrascience left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Rename navRailHiddenshowNavRail (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 54321jenn-ts left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

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.

3 participants