feat: add component SideNavigation by te6-in · Pull Request #1395 · daangn/seed-design

te6-in · 2026-03-30T07:44:59Z

No description provided.

changeset-bot · 2026-03-30T07:45:06Z

⚠️ No Changeset found

Latest commit: 21fbad1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-03-30T07:45:07Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 612c018c-810f-45be-a531-07eecee1e389

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/side-navigation

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-03-30T07:46:54Z

Alpha Preview (Stackflow SPA)

Branch Preview URL: https://feature-side-navigation.seed-design-stackflow-spa.pages.dev
Preview URL: https://678c61ec.seed-design-stackflow-spa.pages.dev
Commit: 21fbad1

github-actions · 2026-03-30T07:56:47Z

Alpha Preview (Docs)

Branch Preview URL: https://feature-side-navigation.seed-design.pages.dev
Preview URL: https://ed47075c.seed-design.pages.dev
Commit: 21fbad1

github-actions · 2026-04-02T12:53:40Z

Alpha Preview (Storybook)

Branch Preview URL: https://feature-side-navigation.seed-design-storybook.pages.dev
Preview URL: https://aab6ce4e.seed-design-storybook.pages.dev
Commit: 21fbad1

Scaffold Menu styled components using Primitive.* elements as placeholders for future headless and recipe integration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace Primitive-based placeholders with @base-ui-components/react Menu primitives. MenuPositioner internally wraps Portal + Positioner. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Add qvism-preset menu slot recipe with size variant and tokens - Wire recipe to React components via createSlotRecipeContext - Add MenuSubmenuRoot and MenuSubmenuTrigger exports - Add ActivityMenu with basic, grouped, nested, disabled demos Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Implement useMenu hook on top of @floating-ui/react@0.27 (public API), composing useClick, useRole, useDismiss, useListNavigation, useTypeahead, and useInteractions for a fully headless menu with: - Open/close state (controlled + uncontrolled) - Arrow key navigation with loopFocus - Typeahead character search - Escape and outside click dismiss - Modal scroll lock - data-* attributes (data-open, data-highlighted, data-disabled) 42/47 core tests passing, 2/16 submenu tests passing. Remaining core gaps: group aria-labelledby wiring, Enter/Space item activation on non-button elements, drag-from-trigger interaction. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…nused ref - Add onKeyDown handler to getItemProps for Enter/Space click simulation on div-based menu items (floating-ui only handles buttons natively) - Remove unused groupLabelIdMap ref Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…test harnesses Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…-layer

…ng bottom sheet as well

Use Floating UI's size middleware to dynamically constrain menu max-height to the actual available viewport space, preventing overflow when the trigger is near viewport edges. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…gation # Conflicts: # packages/css/all.layered.min.css # packages/css/all.min.css

Scaffold the SideNavigation compound component with 13 slots: Root (nav), Header, Content, Footer, Group, GroupLabel, MenuGroup (Collapsible.Root), MenuGroupContent (Collapsible.Content), MenuItem, MenuItemTrigger (Collapsible.Trigger), MenuSubItem, Trigger, and Inset. Also adds Primitive.nav to react-primitive for semantic navigation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…sage example Rename for clarity: - MenuItem → MenuItemButton (standalone navigation) - MenuGroup → MenuItemCollapsibleRoot - MenuGroupContent → MenuItemCollapsibleContent - MenuItemTrigger → MenuItemCollapsibleTrigger - MenuSubItem → MenuItemCollapsibleItem Add ActivitySideNavigation in stackflow-spa as a bare usage example demonstrating all compound component slots. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…onents Add three recipes in side-navigation.ts: - sideNavigation (slot recipe): layout slots for root, header, content, footer, group, groupLabel, trigger - sideNavigationInset (single recipe): no-op placeholder for Inset (lives outside Root context) - sideNavigationMenuItem (slot recipe): item, collapsibleContent, chevron slots Update React components to use createSlotRecipeContext pattern: - Root uses withProvider, child slots use withContext - MenuItemCollapsibleRoot uses withRootProvider for menuItem context - MenuItemButton and Inset use standalone recipe calls (Badge pattern) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…se coordination Introduce @seed-design/react-side-navigation with: - useSideNavigation: collapsed state management (controllable pattern) - useSideNavigationCollapsible: sidebar-aware collapsible (useCollapsible superset) - Compound components: Provider, Root, Trigger, MenuItemCollapsible* - Derived state pattern (effectiveOpen = collapsed ? false : userOpen) - Provider separated from Root to support sibling Inset access Update styled layer to consume headless components and add collapse recipes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…igger click Remove the behavior where clicking a collapsible trigger in collapsed state would uncollapse the sidebar and open the collapsible. In collapsed state, collapsible open requests are now ignored. This interaction will be replaced with hover-based Menu behavior. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…ate preservation - Use CSS-only panel collapse (scrollbar-gutter + overflow) instead of JS state reset to preserve collapsible open/close state across sidebar collapse/expand cycles - Enforce single-line labels with ellipsis truncation for consistent item height - Add scrollbar-gutter: stable in expanded state, auto in collapsed state - Add docs registry and stackflow example for SideNavigation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…et exports, and expand example - Add CSS background-attachment scroll divider on content slot (local/scroll trick) - Add inside focus ring on menu item ::before, outside focus ring on trigger - Flatten snippet exports to SideNavigation-prefixed named exports (no object export) - Add more menu groups to stackflow example for scroll testing - Remove duplicate SideNavigationMenuItemButton (merged into SideNavigationMenuItem) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…n content slot - Top: 1px divider via background-attachment local/scroll trick - Bottom: 16px mask-image fog that fades into paddingBottom: 16px - No JS needed — fog is always on, padding ensures no content is obscured at scroll end Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

github-actions bot assigned te6-in Mar 30, 2026

te6-in force-pushed the feature/side-navigation branch from 396b683 to 357e268 Compare March 30, 2026 08:18

te6-in force-pushed the alpha branch from 9d52143 to 649102e Compare April 3, 2026 09:00

te6-in force-pushed the feature/side-navigation branch 2 times, most recently from 75a0589 to 43c5cd1 Compare April 3, 2026 10:44

te6-in force-pushed the alpha branch from 18e13a7 to d1ad8aa Compare April 3, 2026 11:36

te6-in and others added 19 commits April 3, 2026 20:37

feat(menu): add Menu compound component primitives

7185408

Scaffold Menu styled components using Primitive.* elements as placeholders for future headless and recipe integration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

feat(menu): wrap Base UI Menu primitives as headless layer

4f991e9

Replace Primitive-based placeholders with @base-ui-components/react Menu primitives. MenuPositioner internally wraps Portal + Positioner. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

refactor(menu): align useMenu API with SEED headless pattern, update …

e9fbb52

…test harnesses Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

feat(menu): add headless React components, context, and exports

5247698

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

refactor(menu): use headless components in test harnesses

a7a23ce

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

refactor

f3af560

feat: menu implementation

3deb3bb

refactor: remove @radix-ui/react-dialog; add @seed-design/dismissable…

e8d6ef7

…-layer

docs: menu

e0438b4

feat: allow customizing the portalled root of menu

6ebaa8e

docs

c88800f

feat: implement matching reference width

cdcd0a9

refactor

db46d32

refactor

907680a

fix: fix dismissing menu on bottom sheet by clicking outside dismissi…

f30b6d4

…ng bottom sheet as well

te6-in and others added 17 commits April 3, 2026 20:39

feat: implement layout

f5942ed

test(layout): add storybook story

4260b83

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Merge remote-tracking branch 'origin/feat/layout' into feat/side-navi…

364d37d

…gation # Conflicts: # packages/css/all.layered.min.css # packages/css/all.min.css

fix: collapse all collapsibles when sidebar isn't expanded

0b9a99d

chore: bump icons

7056f87

feat: implement selected & disabled

50ebbd2

docs: block example

1179ca3

fix: fix styles

bcd9e12

feat

1c28fd5

te6-in force-pushed the feature/side-navigation branch from 43c5cd1 to 8ad09f0 Compare April 3, 2026 11:58

feat: integrate menu with side navigation

21fbad1

te6-in force-pushed the feature/side-navigation branch from 8ad09f0 to 21fbad1 Compare April 3, 2026 12:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add component SideNavigation#1395

feat: add component SideNavigation#1395
te6-in wants to merge 37 commits intoalphafrom
feature/side-navigation

te6-in commented Mar 30, 2026

Uh oh!

changeset-bot bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 30, 2026 •

edited

Loading

Review skipped

Uh oh!

github-actions bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 30, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 2, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

te6-in commented Mar 30, 2026

Uh oh!

changeset-bot bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Stackflow SPA)

Uh oh!

github-actions bot commented Mar 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Docs)

Uh oh!

github-actions bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Alpha Preview (Storybook)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

changeset-bot bot commented Mar 30, 2026 •

edited

Loading

coderabbitai bot commented Mar 30, 2026 •

edited

Loading

github-actions bot commented Mar 30, 2026 •

edited

Loading

github-actions bot commented Mar 30, 2026 •

edited

Loading

github-actions bot commented Apr 2, 2026 •

edited

Loading