Skip to content

feat: migrate Popover to Base UI#584

Merged
rohanchkrabrty merged 6 commits intomainfrom
base-popover
Feb 6, 2026
Merged

feat: migrate Popover to Base UI#584
rohanchkrabrty merged 6 commits intomainfrom
base-popover

Conversation

@rohanchkrabrty
Copy link
Contributor

@rohanchkrabrty rohanchkrabrty commented Feb 4, 2026

Description

Changes

  • Migrated from Radix UI to Base UI (@base-ui/react)
  • Updated styling: separate popoverPositioner class for positioning wrapper

Docs & Tests

  • Updated all tests: positioning attributes now checked on positioner element, not popup
  • Removed aria-label related tests
  • Updated props documentation: removed ariaLabel and avoidCollisions, added new Base UI props
  • Removed redundant accessibility documentation section

Summary by CodeRabbit

  • New Features

    • Popover component now includes collision boundary configuration, custom CSS classes and inline styles, custom render functions, and configurable focus management for initial and final focus targets.
  • Documentation

    • Updated Popover component documentation; accessibility guidance section removed.

@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:42am

@rohanchkrabrty rohanchkrabrty changed the base branch from main to base-accordion February 4, 2026 04:19
Base automatically changed from base-accordion to main February 6, 2026 04:34
@rohanchkrabrty rohanchkrabrty merged commit d81659e into main Feb 6, 2026
3 of 5 checks passed
@coderabbitai
Copy link

coderabbitai bot commented Feb 6, 2026

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The Popover component is migrated from the previous UI library to @base-ui/react, with refactored component composition (Portal → Positioner → Popup), updated props interface (removed ariaLabel/avoidCollisions, added collisionBoundary/initialFocus/finalFocus), corresponding test updates, CSS restructuring, and documentation adjustments.

Changes

Cohort / File(s) Summary
Component Implementation
packages/raystack/components/popover/popover.tsx, packages/raystack/components/popover/props.ts
Migrated from previous UI library to @base-ui/react. PopoverContentProps now extends Positioner and Popup props instead of Content. PopoverContent refactored to forward to Popup with new initialFocus, finalFocus, render, style, and children props. PopoverTriggerProps removes asChild, adds className. Internal composition changed from Portal→Content to Portal→Positioner→Popup.
Styling & CSS
packages/raystack/components/popover/popover.module.css
Introduced new .popoverPositioner class handling z-index; existing .popover class retains visual styling (outline, overflow, font, box model, background, border, color, animation).
Tests
packages/raystack/components/popover/__tests__/popover.test.tsx
Updated prop types to PopoverPrimitive.Root.Props. Removed asChild usage. Adjusted assertions for Base UI semantics: data attributes now on positioner element, ARIA checks generalized or removed, onOpenChange verifies open state as first argument.
Documentation & Demo
apps/www/src/content/docs/components/popover/index.mdx, apps/www/src/content/docs/components/popover/demo.ts
Removed Accessibility section from documentation. Updated demo trigger button label from "Top Popover" to "Popover".

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

  • rsbh
  • paanSinghCoder
  • rohilsurana

Poem

🐰 A popover hops to Base UI's shore,
Props reordered, no asChild no more,
Portal→Positioner→Popup in place,
The component finds its new space!
Accessibility notes fade away
But focus controls brighten the day!

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

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

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