fix(ui): forward button refs

[zoldyzdk]

Summary

Fixes the CopyPageDropdown menu not showing its items by adding React.forwardRef support to the shared Button component.

CopyPageDropdown uses the Button through dropdown trigger composition, which requires refs to be forwarded correctly for the dropdown primitives to anchor and render the menu items.

Changes

• Wraps the internal Button render function with React.forwardRef
• Types forwarded refs based on the selected element type
• Makes children optional to support icon-only/ref-driven button usage

Test plan

• pnpm test
• pnpm build

Summary by CodeRabbit

• New Features

  • Button component now supports ref forwarding, enabling improved component composition patterns.

• Changes

  • Children prop in the Button component is now optional, providing greater flexibility in how the component can be utilized.

[netlify]

👷 Deploy request for tanstack pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	7af1e16

[coderabbitai]

📝 Walkthrough

Walkthrough

The Button component is refactored to support React.forwardRef. An internal ButtonInner function is introduced to accept a ref parameter, the Button export wraps it with React.forwardRef, and the children prop is made optional in ButtonOwnProps. Type definitions are updated to include the ButtonRef type and a ref-compatible ButtonComponent signature.

Changes

Button Ref Forwarding

Layer / File(s)	Summary
Type Definitions src/ui/Button.tsx	Added ButtonRef<TElement> type alias and updated ButtonComponent type signature to include optional ref in props.
Props & Implementation src/ui/Button.tsx	Made children prop optional in ButtonOwnProps. Created ButtonInner<TElement> function with ref parameter and destructured props.
Ref Export & Wiring src/ui/Button.tsx	Wrapped ButtonInner with React.forwardRef and exported as Button. Ref is passed through to the underlying element via createElement.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

---

🐰 Hop forward, Button true! Refs now flow,

Through forwardRef's magical glow,

No longer trapped in prop-land's spell,

A parent's grip will hold it well! ✨🔗

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(ui): forward button refs' directly and clearly summarizes the main change: adding ref forwarding support to the Button component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

src/ui/Button.tsx (1)

150-152: 💤 Low value

Optional: set an explicit displayName on the forwarded component.

After wrapping with React.forwardRef, React DevTools will show the component as ForwardRef(ButtonInner) instead of Button. Setting an explicit displayName improves the debugging experience without affecting runtime behavior.

♻️ Proposed addition

 export const Button = React.forwardRef(
   ButtonInner as React.ForwardRefRenderFunction<unknown, ButtonProps>,
 ) as unknown as ButtonComponent
+
+;(Button as unknown as { displayName?: string }).displayName = 'Button'

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/ui/Button.tsx` around lines 150 - 152, The exported forwarded component
currently uses React.forwardRef with ButtonInner and thus will appear as
ForwardRef(ButtonInner) in DevTools; set an explicit displayName on the
resulting Button component (e.g., Button.displayName = 'Button') immediately
after the forwardRef assignment so React DevTools shows the desired name;
reference the exported symbol Button and the inner component ButtonInner when
applying this change.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/ui/Button.tsx`:
- Around line 150-152: The exported forwarded component currently uses
React.forwardRef with ButtonInner and thus will appear as
ForwardRef(ButtonInner) in DevTools; set an explicit displayName on the
resulting Button component (e.g., Button.displayName = 'Button') immediately
after the forwardRef assignment so React DevTools shows the desired name;
reference the exported symbol Button and the inner component ButtonInner when
applying this change.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9921c2bd-41a0-40ee-8b19-84e0490b7c96

📥 Commits

Reviewing files that changed from the base of the PR and between 3a4a24b and 7af1e16.

📒 Files selected for processing (1)

• src/ui/Button.tsx