⚠ This page is served via a proxy. Original site: https://github.com
This service does not collect credentials or authentication data.
Skip to content

feat: migrate Sheet to Base UI#582

Merged
rohanchkrabrty merged 9 commits intomainfrom
base-sheet
Feb 6, 2026
Merged

feat: migrate Sheet to Base UI#582
rohanchkrabrty merged 9 commits intomainfrom
base-sheet

Conversation

@rohanchkrabrty
Copy link
Contributor

@rohanchkrabrty rohanchkrabrty commented Feb 4, 2026

Description

Breaking Changes

  • close prop renamed to showCloseButton — defaults to true (previously false)
  • asChild prop removed from Sheet.Trigger

Changes

  • Migrated Sheet component from Radix UI Dialog to Base UI Dialog primitives
  • Replaced keyframe animations with CSS transitions using Base UI's data-starting-style and data-ending-style attributes
  • Updated CSS to use Base UI data attributes:
  • Added overlayProps prop to customize backdrop/overlay behavior

Docs & Tests

  • Updated documentation to reflect Base UI Dialog API and new component structure
  • Updated all demo examples to use Sheet.Header, Sheet.Body, and Sheet.Footer
  • Updated props documentation with Base UI-specific props
  • Fixed all 19 tests to work with Base UI's component structure

Summary by CodeRabbit

  • New Features

    • Added Sheet.Header, Sheet.Body, and Sheet.Footer components for improved structural composition.
    • Added controlled open state support with open, defaultOpen, and onOpenChange props.
  • Refactor

    • Restructured Sheet API to use header/body/footer composition pattern.
    • Simplified trigger usage and renamed close control to showCloseButton (now enabled by default).
    • Enhanced overlay customization with new overlay properties.
  • Style

    • Updated sheet animations with transform-based positioning and improved motion preferences.
  • Tests

    • Added accessibility tests for slider component.

@rohanchkrabrty rohanchkrabrty self-assigned this Feb 4, 2026
@vercel
Copy link

vercel bot commented Feb 4, 2026

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

Project Deployment Actions Updated (UTC)
apsara Ready Ready Preview, Comment Feb 6, 2026 4:44am

@rohanchkrabrty rohanchkrabrty changed the title feat: migrate Dialog to Base UI feat: migrate Sheet to Base UI Feb 4, 2026
@rohanchkrabrty rohanchkrabrty changed the base branch from main to base-accordion February 4, 2026 04:17
@rohanchkrabrty rohanchkrabrty changed the base branch from base-accordion to base-popover February 4, 2026 04:19
Base automatically changed from base-popover to main February 6, 2026 04:35
@coderabbitai
Copy link

coderabbitai bot commented Feb 6, 2026

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The Sheet component architecture has been restructured with a new header/body composition pattern, introducing new exported components (Header, Title, Description, Body, Footer). The API transitions from a close control to showCloseButton, state management shifts to controlled open behavior, and animations are refactored from data-state keyframes to transform-based transitions. Slider accessibility tests were also added.

Changes

Cohort / File(s) Summary
Sheet Component Structure
packages/raystack/components/sheet/sheet.tsx, packages/raystack/components/sheet/sheet-content.tsx, packages/raystack/components/sheet/sheet-misc.tsx
Introduces new client components for Sheet composition: SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter. Sheet root now extends DialogPrimitive.Root with new static members. SheetContent refactored to handle overlayProps and showCloseButton.
Sheet Styling
packages/raystack/components/sheet/sheet.module.css
Replaces data-state animation keyframes (slideIn/slideOut) with transform-based positioning using data-starting-style and data-ending-style selectors. Adds transition properties for overlay and content elements, introduces layout styles for header/body/footer, and adds reduced-motion accessibility handling.
Sheet Documentation & Props
apps/www/src/content/docs/components/sheet/index.mdx, apps/www/src/content/docs/components/sheet/props.ts
Documents new Sheet.Header, Sheet.Body, Sheet.Footer component props. Updates Sheet.Title and Sheet.Description to inherit from DialogPrimitive. Refactors SheetProps to support controlled open state (defaultOpen, open, onOpenChange). Updates SheetContentProps with overlayProps and showCloseButton rename.
Sheet Demo & Tests
apps/www/src/content/docs/components/sheet/demo.ts, packages/raystack/components/sheet/__tests__/sheet.test.tsx
Updates demos and tests to use new Sheet.Header and Sheet.Body composition pattern. Removes asChild wrapper from Sheet.Trigger. Changes close control to showCloseButton with inverted default. Updates accessibility expectations from custom aria-label to standardized "Sheet" label.
Slider Accessibility Tests
packages/raystack/components/slider/__tests__/slider.test.tsx
Adds new accessibility tests verifying default aria-label for single and range sliders, and aria-valuetext presence when provided via props.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

  • paanSinghCoder
  • rsbh
  • rohilsurana

Poem

🐰 A Sheet so grand, now wrapped with care,
With Header, Body—structure fair!
Transform animations dance with grace,
While aria-labels find their place,
Components compose, accessibility true—
Hop-hop-hooray, refactored anew! 🎉

✨ 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-sheet

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

@rohanchkrabrty rohanchkrabrty merged commit 77fe47f into main Feb 6, 2026
3 of 5 checks passed
@rohanchkrabrty rohanchkrabrty deleted the base-sheet branch February 6, 2026 04:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants