Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughA comprehensive checkbox component system is introduced with supporting design tokens, including a base Checkbox wrapper around Radix UI, CheckboxLabel and CheckboxLinks composite components, CSS custom properties for light/dark theme support, and corresponding Storybook stories. Additionally, a Label component and new icon mappings are added. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
libs/react/ui/src/components/label/label.tsx (1)
6-8: Consider simplifying if no variants are planned.The
cvacall defines only base styles with no variant options. If variants aren't planned, you could simplify to a string constant. However, this structure does make future variant additions easier.Example simplification:
-export const labelVariants = cva( - 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', -); +const labelStyles = 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70';Then update the component to use
cn(labelStyles, className).libs/react/ui/src/components/checkbox/checkbox-links.tsx (1)
55-84: Consider using index or requiring unique IDs for link keys.Using
link.labelas the key (line 56) could cause React reconciliation issues if labels are not unique or if link order changes during re-renders.Consider using the index as key (acceptable for static lists):
- {links.map((link, index) => ( - <div key={link.label} className="flex gap-6 items-center"> + {links.map((link, index) => ( + <div key={index} className="flex gap-6 items-center">Or add a unique
idfield to theCheckboxLinktype for more robust identification:export type CheckboxLink = { + id: string; label: string; href?: string; onClick?: () => void; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (11)
libs/react/ui/index.css(3 hunks)libs/react/ui/src/components/checkbox/checkbox-label.tsx(1 hunks)libs/react/ui/src/components/checkbox/checkbox-links.tsx(1 hunks)libs/react/ui/src/components/checkbox/checkbox.stories.tsx(1 hunks)libs/react/ui/src/components/checkbox/checkbox.tsx(1 hunks)libs/react/ui/src/components/checkbox/index.ts(1 hunks)libs/react/ui/src/components/icon/icon.tsx(2 hunks)libs/react/ui/src/components/index.ts(1 hunks)libs/react/ui/src/components/label/index.ts(1 hunks)libs/react/ui/src/components/label/label.stories.tsx(1 hunks)libs/react/ui/src/components/label/label.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*
⚙️ CodeRabbit configuration file
We handle errors at the edge of our applications in most cases. Do not recommend to add error handling around every single function. We prefer them to bubble up and be handled at upper layers.
Files:
libs/react/ui/src/components/label/index.tslibs/react/ui/src/components/label/label.tsxlibs/react/ui/src/components/checkbox/index.tslibs/react/ui/src/components/index.tslibs/react/ui/src/components/checkbox/checkbox-label.tsxlibs/react/ui/src/components/checkbox/checkbox-links.tsxlibs/react/ui/src/components/label/label.stories.tsxlibs/react/ui/src/components/checkbox/checkbox.tsxlibs/react/ui/src/components/icon/icon.tsxlibs/react/ui/src/components/checkbox/checkbox.stories.tsxlibs/react/ui/index.css
🧬 Code graph analysis (5)
libs/react/ui/src/components/checkbox/checkbox-label.tsx (3)
libs/react/ui/src/components/checkbox/checkbox.tsx (2)
CheckboxProps(24-25)Checkbox(27-85)libs/react/ui/src/components/label/label.tsx (1)
Label(13-15)libs/react/ui/src/components/icon/icon.tsx (1)
Icon(55-58)
libs/react/ui/src/components/checkbox/checkbox-links.tsx (2)
libs/react/ui/src/components/checkbox/checkbox.tsx (2)
CheckboxProps(24-25)Checkbox(27-85)libs/react/ui/src/components/label/label.tsx (1)
Label(13-15)
libs/react/ui/src/components/label/label.stories.tsx (4)
libs/react/ui/src/components/label/label.tsx (1)
Label(13-15)libs/react/ui/src/components/input.tsx (1)
Input(24-43)libs/react/ui/src/components/checkbox/checkbox.tsx (1)
Checkbox(27-85)libs/react/ui/src/components/textarea/textarea.tsx (1)
Textarea(25-42)
libs/react/ui/src/components/checkbox/checkbox.tsx (1)
libs/react/ui/src/components/icon/icon.tsx (1)
Icon(55-58)
libs/react/ui/src/components/checkbox/checkbox.stories.tsx (3)
libs/react/ui/src/components/checkbox/checkbox.tsx (1)
Checkbox(27-85)libs/react/ui/src/components/checkbox/checkbox-label.tsx (1)
CheckboxLabel(18-155)libs/react/ui/src/components/checkbox/checkbox-links.tsx (1)
CheckboxLinks(22-89)
⏰ 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: Agent
🔇 Additional comments (13)
libs/react/ui/src/components/label/index.ts (1)
1-1: LGTM!Clean barrel export following standard patterns.
libs/react/ui/src/components/label/label.tsx (1)
10-14: LGTM!Clean component implementation with proper type composition and prop forwarding.
libs/react/ui/src/components/checkbox/checkbox-label.tsx (2)
1-16: LGTM!Well-structured type definition with appropriate prop composition.
35-62: Verify browser support for CSS:has()selector.The border variant uses Tailwind's
has-*variants (e.g.,has-data-[state=checked]) which rely on the CSS:has()pseudo-class. This is well-supported in modern browsers but may not work in older ones.If you need broader browser support, consider using JavaScript state management or check your project's browser support requirements.
libs/react/ui/src/components/label/label.stories.tsx (1)
1-67: LGTM!Comprehensive Storybook stories demonstrating various Label usage patterns. Good coverage of different states and component combinations.
libs/react/ui/index.css (1)
325-354: LGTM!Comprehensive checkbox design tokens with proper light/dark theme support. Well-organized coverage of all checkbox states (unchecked, checked, indeterminate) with appropriate properties for each state.
Also applies to: 513-545, 870-885
libs/react/ui/src/components/index.ts (1)
4-4: LGTM!Clean integration of checkbox and label exports into the public API.
Also applies to: 7-7
libs/react/ui/src/components/checkbox/index.ts (1)
1-3: LGTM!Clean barrel export consolidating the checkbox component family into a single entry point.
libs/react/ui/src/components/icon/icon.tsx (1)
3-3: LGTM!Clean additions of checkbox-related icons (check, subtractLine, info) to the icon system. The new
iconNamesexport enables programmatic icon discovery.Also applies to: 7-7, 9-9, 44-46, 50-50
libs/react/ui/src/components/checkbox/checkbox.stories.tsx (1)
1-371: LGTM! Comprehensive Storybook coverage.The stories provide excellent visual documentation for the Checkbox component family, covering all states (unchecked, checked, indeterminate, disabled, focus, hover) across different sizes and variants.
libs/react/ui/src/components/checkbox/checkbox-links.tsx (1)
6-20: LGTM! Clean type definitions.The type structure properly extends CheckboxProps while allowing custom id handling and additional link-related props.
libs/react/ui/src/components/checkbox/checkbox.tsx (2)
8-25: LGTM! Clean variant definition and type composition.The CVA variant configuration is well-structured with appropriate size options and defaults.
27-85: LGTM! Solid indeterminate state handling and comprehensive styling.The component correctly manages indeterminate state with proper synchronization between controlled props and internal state. The styling comprehensively covers all checkbox states with appropriate hover and focus variants.
There was a problem hiding this comment.
Pull Request Overview
This PR adds new Label and Checkbox components to the React UI library, along with enhanced checkbox variants (CheckboxLabel and CheckboxLinks) and supporting CSS theme tokens. The components are built using Radix UI primitives and integrate with the existing design system.
- Introduces Label component as a wrapper around Radix UI's Label primitive
- Adds Checkbox component with support for checked, unchecked, and indeterminate states
- Includes CheckboxLabel and CheckboxLinks components for common checkbox patterns
- Extends the icon set with check, subtractLine, and info icons
- Defines comprehensive CSS theme tokens for checkbox styling across light and dark themes
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| libs/react/ui/src/components/label/label.tsx | Implements the Label component with Radix UI integration |
| libs/react/ui/src/components/label/label.stories.tsx | Provides Storybook stories demonstrating Label component usage |
| libs/react/ui/src/components/label/index.ts | Exports Label component |
| libs/react/ui/src/components/index.ts | Adds exports for checkbox and label components |
| libs/react/ui/src/components/icon/icon.tsx | Extends icon map with check, subtractLine, and info icons |
| libs/react/ui/src/components/checkbox/index.ts | Exports all checkbox-related components |
| libs/react/ui/src/components/checkbox/checkbox.tsx | Implements core Checkbox component with indeterminate state support |
| libs/react/ui/src/components/checkbox/checkbox.stories.tsx | Provides comprehensive Storybook stories for all checkbox variants |
| libs/react/ui/src/components/checkbox/checkbox-label.tsx | Implements CheckboxLabel component with border and non-border variants |
| libs/react/ui/src/components/checkbox/checkbox-links.tsx | Implements CheckboxLinks component for checkbox with associated links |
| libs/react/ui/index.css | Adds checkbox CSS theme tokens for all states (unchecked, checked, indeterminate) in light and dark modes |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ration and content rendering
3 participants
Summary by CodeRabbit
New Features