feat(checkbox): add state-specific class overrides and renderIcon + docs #413
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe Checkbox component was refactored to support ref forwarding, extended styling customization, and custom icon rendering through new props. The documentation was extensively rewritten to detail these new features, including expanded prop tables, usage examples, and customization guides. No changes were made to the component's external API beyond the new props. Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant Checkbox
ParentComponent->>Checkbox: Render with props (checkedClassName, renderIcon, etc.)
Checkbox->>Checkbox: Compute base and conditional classNames
Checkbox->>Checkbox: Forward ref to root element
Checkbox->>Checkbox: Determine checked state
Checkbox->>Checkbox: Render indicator
alt renderIcon provided
Checkbox->>Checkbox: Call renderIcon(checked)
Checkbox-->>ParentComponent: Render custom icon
else
Checkbox->>Checkbox: Render default Check icon with computed classes
Checkbox-->>ParentComponent: Render default icon
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ 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 comments)
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 (1)
packages/reusables/src/components/ui/checkbox.tsx (1)
76-80: Consider simplifying the export pattern.While the current export structure works, it adds unnecessary indirection. The more standard React pattern would be to export the forwardRef component directly:
-const ForwardedCheckbox = React.forwardRef<CheckboxPrimitive.RootRef, CheckboxProps>(CheckboxImpl); -ForwardedCheckbox.displayName = 'Checkbox'; -export function Checkbox(props: CheckboxProps) { - return <ForwardedCheckbox {...props} />; -} +export const Checkbox = React.forwardRef<CheckboxPrimitive.RootRef, CheckboxProps>(CheckboxImpl); +Checkbox.displayName = 'Checkbox';This eliminates the wrapper function while maintaining the same functionality and ref forwarding capabilities.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/docs/src/content/docs/components/checkbox.mdx(3 hunks)packages/reusables/src/components/ui/checkbox.tsx(1 hunks)
🔇 Additional comments (9)
packages/reusables/src/components/ui/checkbox.tsx (4)
7-15: Excellent interface design with clear prop organization.The
CheckboxPropsinterface is well-structured with descriptive names and proper TypeScript typing. All new props are optional, ensuring backward compatibility, and therenderIconfunction signature provides clear context with the{ checked: boolean }parameter.
17-31: LGTM! Clean function signature with proper ref forwarding.The function signature correctly implements the forwardRef pattern and destructures all props clearly. The explicit destructuring of the
checkedprop helps with readability in the conditional logic below.
32-55: Well-designed class calculation with proper precedence.The class name calculation follows a logical hierarchy: base styles → defaults → conditional state classes → user overrides. This ensures the component works out-of-the-box while allowing full customization. The use of the
cnutility properly handles conditional classes and the checked/unchecked state logic is correctly implemented.
57-74: Clean rendering logic with proper conditional icon handling.The rendering implementation correctly handles both custom and default icons. The
!!checkedconversion ensures a proper boolean is passed torenderIcon, and the fallback to the defaultCheckicon maintains existing behavior. Ref forwarding is properly implemented.apps/docs/src/content/docs/components/checkbox.mdx (5)
14-17: Good documentation formatting improvements.The formatting changes improve consistency and the addition of the React import in the usage example follows best practices. The simplified return statement makes the example more concise and easier to read.
Also applies to: 24-24, 42-42, 48-56
57-82: Comprehensive and accurate props documentation.The props table thoroughly documents all available props with accurate default values and helpful notes. The theme defaults section clearly explains the component's default styling behavior, which will help developers understand how customization works.
83-115: Excellent customization examples with platform considerations.The customization examples clearly demonstrate how to use the new state-specific className props. The inclusion of web-only
data-*selector examples provides developers with alternatives, and the note about React Native limitations is valuable for cross-platform development.
116-148: Clear renderIcon examples with cross-platform awareness.The
renderIconexamples effectively demonstrate custom icon rendering with proper conditional logic for checked/unchecked states. The platform-specificstrokeWidthconsideration shows attention to cross-platform details, and the subtle dot example provides creative inspiration for developers.
150-176: Practical examples showcasing component flexibility.The final examples section provides diverse visual variations that demonstrate the component's flexibility. The examples are concise yet illustrative, showing practical customization patterns that developers can adapt for their use cases.
This PR makes
<Checkbox />fully customizable without breaking existing usage:checkedClassName,uncheckedClassName,iconCheckedClassName,iconUncheckedClassName, plusindicatorClassName.renderIconto swap the default checkmark with any custom node.<Checkbox checked onCheckedChange />works as before.What’s changed
components/ui/checkbox.tsxImplemented state-specific class props and
renderIcon.Preserved default theme behavior:
border-primarybg-primary border-primarytext-primary-foregroundExport remains a
forwardRefcomponent (wrapped so JSX interop is stable).Docs
renderIconusage.API
New optional props:
checkedClassName?: stringuncheckedClassName?: stringindicatorClassName?: stringiconClassName?: stringiconCheckedClassName?: stringiconUncheckedClassName?: stringrenderIcon?: (opts: { checked: boolean }) => React.ReactNodeBackward compatibility
<Checkbox checked onCheckedChange />continues to render with theme defaults.renderIconis provided,iconClassNameprops are ignored by design (caller fully controls the icon).Examples
Custom icon: