Skip to content

Port resizable component to react-resizable-panels v4 - #476

Merged
mikeallisonJS merged 1 commit into
mainfrom
fix/resizable-panels-v4
Oct 21, 2026
Merged

mikeallisonJS merged 1 commit into
mainfrom
fix/resizable-panels-v4

Conversation

@mikeallisonJS

@mikeallisonJS mikeallisonJS commented Oct 14, 2026 •

Copy link
Copy Markdown
Owner

Follow-up to #470. The resizable wrapper in packages/ui still used the react-resizable-panels v3 API while the repo is on v4.

v4 renamed the primitives, and this PR updates the wrapper to match:

  • PanelGroup is now Group, and PanelResizeHandle is now Separator.
  • The prop types use GroupProps, PanelProps and SeparatorProps.
  • Orientation styling keys off aria-orientation instead of data-panel-group-direction.

The result matches shadcn's current v4 registry version, kept in this repo's formatting.

No app imports this component today, so nothing on the live sites changes.

Verification:

  • vp check no longer reports the three missing-export warnings for this file.
  • tsc on packages/ui no longer reports the five errors in this file. The eight remaining errors are pre-existing ones in chart.tsx.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Improvements
    • Resizable panel layouts continue to apply orientation-specific styling for horizontal and vertical arrangements, helping panels and their separators display consistently as the layout direction changes.

v4 renamed PanelGroup to Group and PanelResizeHandle to Separator, and
replaced the data-panel-group-direction attribute with aria-orientation.
The shadcn wrapper still used the v3 names, so it failed to type-check
and would render undefined components. This matches shadcn's current
v4 registry version of the component.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 14, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
captainofbass Ready Ready Preview Oct 14, 2026 8:10pm UTC
mikeallisonjs Ready Ready Preview Oct 14, 2026 8:10pm UTC
sltdnb Ready Ready Preview Oct 14, 2026 8:10pm UTC

Request Review

@coderabbitai

coderabbitai Bot commented Oct 14, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 052f5582-8b1b-4868-bca5-256212289bcb
📥 Commits

Reviewing files that changed from the base of the PR and between b74814c and 75c0470.

📒 Files selected for processing: 1
  • packages/ui/src/components/resizable.tsx

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

The resizable wrappers now use GroupProps, PanelProps, and SeparatorProps. The group and handle render the corresponding updated primitives. Orientation styling uses aria-orientation selectors.

Changes: Resizable wrappers

Layer / File(s) Summary
Wrapper types and primitive rendering
packages/ui/src/components/resizable.tsx
The wrappers use the corresponding react-resizable-panels prop types. The group and handle render Group and Separator. Orientation selectors use aria-orientation, and the unused React import is removed.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to 75c04

This change updates the resizable wrapper to the resolved library API; no material merge risk remains.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 1 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly and concisely describes the main change: updating the resizable component to the react-resizable-panels v4 API.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
  • Fix all pre-merge checks with AI
✨ Finishing Touches: 💡 1
📝 Generate docstrings: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

@mikeallisonJS
mikeallisonJS merged commit 61ffa02 into main Oct 21, 2026
7 checks passed
@mikeallisonJS
mikeallisonJS deleted the fix/resizable-panels-v4 branch October 21, 2026 23:06

This branch was successfully deployed

3 active deployments
Preview – captainofbass — 75c04708 Deployed Oct 14, 2026 by vercel[bot]
Preview – mikeallisonjs — 75c04708 Deployed Oct 14, 2026 by vercel[bot]
Preview – sltdnb — 75c04708 Deployed Oct 14, 2026 by vercel[bot]
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.

2 participants