Skip to content

feat: migrate misc components#594

Open
rohanchkrabrty wants to merge 1 commit intomainfrom
migrate-misc
Open

feat: migrate misc components#594
rohanchkrabrty wants to merge 1 commit intomainfrom
migrate-misc

Conversation

@rohanchkrabrty
Copy link
Contributor

@rohanchkrabrty rohanchkrabrty commented Feb 18, 2026

Description

[Provide a brief description of the changes in this PR]

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Refactor (no functional changes, no bug fixes just code improvements)
  • Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
  • Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
  • Test (adding missing tests or correcting existing tests)
  • Improvement (Improvements to existing code)
  • Other (please specify)

How Has This Been Tested?

[Describe the tests that you ran to verify your changes]

Checklist:

  • My code follows the style guidelines of this project
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation (.mdx files)
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

[Add screenshots here]

Related Issues

[Link any related issues here using #issue-number]

Summary by CodeRabbit

Release Notes

  • New Features

    • Added render prop to Button, Flex, Grid, and GridItem components for flexible element rendering.
    • Added nativeButton and focusableWhenDisabled options to Button component.
    • Added width: 'full' option to Flex component.
  • Bug Fixes

    • Fixed pointer events handling for disabled buttons.
  • Breaking Changes

    • Removed asChild prop from Button, Grid, and GridItem components; use the new render prop instead.

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

vercel bot commented Feb 18, 2026

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

Project Deployment Actions Updated (UTC)
apsara Ready Ready Preview, Comment Feb 18, 2026 5:10am

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 18, 2026

📝 Walkthrough

Walkthrough

Components refactored from Radix UI's asChild pattern to Base UI's render prop and useRender utility. Button component migrated to use ButtonPrimitive from @base-ui/react. CSS updated to enable pointer events on disabled buttons. All props documentation updated to reflect new rendering API.

Changes

Cohort / File(s) Summary
Button Props Documentation
apps/www/src/content/docs/components/button/props.ts
Removed asChild property; added nativeButton, focusableWhenDisabled, and render (accepts ReactElement or function returning ReactElement) to ButtonProps.
Layout Props Documentation
apps/www/src/content/docs/components/flex/props.ts, apps/www/src/content/docs/components/grid/props.ts
Replaced asChild with render prop across Flex, Grid, and GridItem props; added width: 'full' option to Flex.
Button Implementation
packages/raystack/components/button/button.tsx
Migrated from custom button wrapper to ButtonPrimitive from @base-ui/react; removed asChild logic and Slot usage; added render and nativeButton props; updated ref type and component signature.
Layout Components
packages/raystack/components/flex/flex.tsx, packages/raystack/components/grid/grid.tsx, packages/raystack/components/grid/grid-item.tsx
Replaced Slot-based rendering with useRender from @base-ui/react; removed asChild props; updated public prop types from HTMLAttributes to useRender.ComponentProps; centralized style computation using mergeProps.
Button Styling
packages/raystack/components/button/button.module.css
Added pointer-events: initial to .button-disabled rule to enable pointer events on disabled buttons.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested labels

Do not merge

Suggested reviewers

  • paanSinghCoder
  • rsbh

Poem

🐰 A button hops to primitive lands,
With render props in gentle hands,
Grid and Flex now reflow with care,
useRender blooms everywhere!
Base UI's dance, so smooth and bright!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'migrate misc components' is vague and generic, using a non-descriptive term ('misc') that doesn't clearly convey the specific nature of the migration. Provide a more specific title that describes the actual migration (e.g., 'migrate components to use BaseUI render props and useRender' or 'replace Slot/asChild with BaseUI render-based APIs').
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ 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 migrate-misc

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

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/raystack/components/button/button.tsx (1)

143-175: ⚠️ Potential issue | 🟠 Major

Respect consumer-supplied nativeButton and focusableWhenDisabled.

These props are currently overridden, so callers can’t opt into native-button semantics with render or control focus behavior when disabled.

🔧 Proposed fix
   (
     {
       className,
       variant = 'solid',
       color = 'accent',
       size = 'normal',
       disabled,
       loading,
       loaderText,
       leadingIcon,
       trailingIcon,
       maxWidth,
       width,
       style = {},
       children,
       render,
+      nativeButton,
+      focusableWhenDisabled,
       ...props
     },
     ref
   ) => {
     const isLoaderOnly = loading && !loaderText;
     const widthStyle = { maxWidth, width };
     const buttonStyle = { ...widthStyle, ...style };
+    const resolvedNativeButton = nativeButton ?? !render;
+    const resolvedFocusableWhenDisabled =
+      focusableWhenDisabled ?? Boolean(loading);

     return (
       <ButtonPrimitive
         className={`${button({ variant, size, color, disabled, loading, className })} ${isLoaderOnly ? getLoaderOnlyClass(size) : ''}`}
         ref={ref}
         disabled={disabled}
         style={buttonStyle}
         render={render}
-        nativeButton={!render}
-        focusableWhenDisabled={loading}
+        nativeButton={resolvedNativeButton}
+        focusableWhenDisabled={resolvedFocusableWhenDisabled}
         {...props}
       >
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/raystack/components/button/button.tsx` around lines 143 - 175, The
ButtonPrimitive currently forces nativeButton and focusableWhenDisabled values
and can override consumer intent; instead compute values that respect
consumer-supplied props (e.g., const nativeButtonVal = props.nativeButton ??
!render and const focusableWhenDisabledVal = props.focusableWhenDisabled ??
loading) and pass those computed values to ButtonPrimitive
(nativeButton={nativeButtonVal}
focusableWhenDisabled={focusableWhenDisabledVal}), ensuring you reference
ButtonPrimitive, render, loading, nativeButton and focusableWhenDisabled so the
component uses consumer values when provided and only falls back to the
defaults.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@packages/raystack/components/button/button.tsx`:
- Around line 143-175: The ButtonPrimitive currently forces nativeButton and
focusableWhenDisabled values and can override consumer intent; instead compute
values that respect consumer-supplied props (e.g., const nativeButtonVal =
props.nativeButton ?? !render and const focusableWhenDisabledVal =
props.focusableWhenDisabled ?? loading) and pass those computed values to
ButtonPrimitive (nativeButton={nativeButtonVal}
focusableWhenDisabled={focusableWhenDisabledVal}), ensuring you reference
ButtonPrimitive, render, loading, nativeButton and focusableWhenDisabled so the
component uses consumer values when provided and only falls back to the
defaults.

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.

1 participant