feat: migrate sidebar to Base UI

[rohanchkrabrty]

Description

Breaking Changes

• Data attributes changed: data-state="expanded" → data-open, data-state="collapsed" → data-closed
• Data attribute format: Boolean data attributes now use presence-based format (e.g., data-collapse-disabled instead of data-collapse-disabled="true")

Changes

• Removed @radix-ui/react-collapsible dependency - component now uses plain useState for state management
• Component no longer extends Radix's Collapsible.Root props, now extends ComponentPropsWithoutRef<'aside'>
• Added explicit defaultOpen = true default value
• Simplified internal state handling with direct useState instead of Collapsible wrapper

Docs & Tests

• Updated CSS selectors to use new data attributes ([data-open], [data-closed], [data-collapse-disabled])
• Updated test assertions for data-closed attribute instead of data-state="collapsed"
• Updated onOpenChange callback signature remains (open: boolean) => void

Summary by CodeRabbit

• Refactor
  • Restructured Sidebar component's internal architecture for improved maintainability.
  • Updated component props interface to extend standard HTML aside element properties.
  • Changed default open state to true.
  • Updated state attribute naming in CSS selectors from data-state to data-open/data-closed.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Feb 4, 2026 8:38pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

A refactoring of the SidebarRoot component that transitions from using Collapsible.Root composition to direct aside element rendering with explicit open/closed state management via data-open and data-closed attributes. Includes corresponding updates to CSS selectors, test expectations, and JSDoc annotations.

Changes

Cohort / File(s)	Summary
Documentation & Props apps/www/src/content/docs/components/sidebar/props.ts	Added @default annotations to JSDoc; updated defaultOpen and collapsible defaults in SidebarRootProps documentation.
Component Implementation packages/raystack/components/sidebar/sidebar-root.tsx	Refactored from Collapsible.Root wrapper to direct aside element; replaced open/onOpenChange with explicit data-open/data-closed attributes; changed ref typing from Collapsible.Root to HTMLElement; updated SidebarRootProps to extend ComponentPropsWithoutRef<'aside'> with open, defaultOpen, and onOpenChange properties.
Styling packages/raystack/components/sidebar/sidebar.module.css	Replaced data-state="expanded/collapsed" selectors with data-open/data-closed attributes; simplified attribute selectors by removing value checks (e.g., [data-collapse-hidden] instead of [data-collapse-hidden="true"]).
Tests packages/raystack/components/sidebar/__tests__/sidebar.test.tsx	Updated test expectations to check for data-closed attribute instead of data-state="collapsed"; reordered imports.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A sidebar once nested deep,
Now aside it stands so sleek,
Data-open, data-closed so clear,
No Collapsible here, my dear!
State flows direct, CSS bright,
Organization feels just right! 🎯

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch base-sidebar

---

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