refactor: add forwardRef to Badge component #1404
Conversation
WalkthroughRefactors Badge to extend native div props, adds React.forwardRef with ref forwarded to the root div, and sets component displayName; core rendering and data attributes unchanged. (Adds tests verifying ref forwarding and data attributes.) Changes
Sequence Diagram(s)sequenceDiagram
participant Caller as ParentComponent
participant Badge as Badge (forwardRef)
participant Div as <div> (root)
Caller->>Badge: render <Badge ref={ref} ... />
Note right of Badge: forwardRef wrapper receives ref\nand props (children, variant, size, ...)
Badge->>Div: render root `<div ref={ref} ... data-badge-* />`
Div-->>Caller: DOM node available via ref.current
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/components/ui/Badge/Badge.tsx (3)
9-14: Props refactor looks good; consider narrowing variants and sizes.Extending native div props is the right call. Optionally, tighten
variant,size, andcolorwith union types derived from your design tokens to improve DX and prevent invalid values.
16-16: Forwarding the ref correctly; consider exporting a helper ref type.The
forwardRef<HTMLDivElement, BadgeProps>setup is solid. For consumer ergonomics, you could also exportexport type BadgeRef = React.ElementRef<'div'>;.+export type BadgeRef = React.ElementRef<'div'>;
19-24: Confirm attribute override intent; simplify composition to avoid extra closure.Right now
{...composedAttributes()} {...props}lets consumerdata-*props override your standardized data attributes. If you want the component’svariant/size/colorto be canonical, spreadpropsfirst and place composed attributes last. Also, you can dropuseComposeAttributeshere and build the object once to avoid an extra function call.-const composedAttributes = useComposeAttributes(dataAttributes(), accentAttributes()); +const composedAttributes = { ...dataAttributes(), ...accentAttributes() }; -return <div ref={ref} className={clsx(rootClass, className)} {...composedAttributes()} {...props}> +return <div ref={ref} className={clsx(rootClass, className)} {...props} {...composedAttributes}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/components/ui/Badge/Badge.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/ui/Badge/Badge.tsx (1)
src/core/hooks/createDataAttribute/index.ts (3)
useCreateDataAttribute(10-25)useCreateDataAccentColorAttribute(48-55)useComposeAttributes(33-40)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (1)
src/components/ui/Badge/Badge.tsx (1)
26-28: Good: forwardRef wrapper and displayName set for DevTools.No issues here.
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the Badge component to support ref forwarding using React.forwardRef, enabling parent components to directly access the Badge's DOM element. The refactor also updates the TypeScript props interface to extend React's built-in component props.
- Converts Badge to use React.forwardRef for ref forwarding capability
- Updates BadgeProps to extend React.ComponentPropsWithoutRef<'div'> for better type safety
- Adds displayName property for improved debugging experience
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/components/ui/Badge/tests/Badge.test.tsx (2)
35-39: Strengthen ref test by asserting identity and element typeNon-null is weak; also assert the ref points to the rendered root and is an HTMLDivElement.
- test('forwards refs to the underlying element', () => { - const ref = React.createRef<HTMLDivElement>(); - render(<Badge ref={ref}>Badge</Badge>); - expect(ref.current).not.toBeNull(); - }); + test('forwards refs to the underlying element', () => { + const ref = React.createRef<HTMLDivElement>(); + render(<Badge ref={ref}>Badge</Badge>); + const el = screen.getByText('Badge'); + expect(ref.current).toBe(el); + expect(ref.current).toBeInstanceOf(HTMLDivElement); + });
41-46: Data- naming is correct; add a test ID for stability*
Thedata-badge-variantanddata-badge-sizeattributes are produced byuseCreateDataAttribute('badge', …), matching the intended “badge” prefix, whiledata-rad-ui-accent-colorcomes from the accent‐color hook. No changes needed to the attribute names. To stabilize the test, add adata-testid(e.g.badge) on the<Badge>and switch fromgetByText('Badge')togetByTestId('badge').
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
src/components/ui/Badge/tests/Badge.test.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
Summary
Testing
npm testnpm run lintSummary by CodeRabbit
New Features
Refactor