Conversation
kylengn
requested review from
EnzalRad,
dvxam and
noe-charmet
as code owners
|
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. WalkthroughThis PR introduces a complete Badge component system for the React UI library, featuring four badge variants (Badge, IconBadge, StatusBadge, UserBadge) with comprehensive styling, interactive capabilities, and Storybook documentation. Additionally, it updates a CSS design token for warning tag text color and adds a new homeSmile icon to the icon registry. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
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: 0
🧹 Nitpick comments (3)
libs/react/ui/src/components/badge/status-badge.tsx (2)
28-28: Remove redundant variable assignment.Line 28 assigns
variantKey = variant ?? 'neutral', butvariantalready defaults to'neutral'in the function parameters (Line 23). This assignment is unnecessary.Apply this diff:
- const variantKey = variant ?? 'neutral'; return ( <span - className={cn(badgeVariants({variant, size: '2xs', radius: 'default'}), 'gap-6', className)} + className={cn(badgeVariants({variant, size: '2xs', radius: 'default'}), 'gap-6', className)} {...props} > <span - className={cn('size-8.5 rounded-2 shrink-0', dotVariantStyles[variantKey], dotClassName)} + className={cn('size-8.5 rounded-2 shrink-0', dotVariantStyles[variant], dotClassName)} /> {children} </span>
10-10: Consider exporting or aligning StatusVariant type.The
StatusVarianttype defined here is essentially a subset ofBadgeVariant(missing 'warning' support based on the variants). Consider either:
- Using
BadgeVariantdirectly (imported from './badge')- Exporting
StatusVariantif it's intentionally constrainedCurrently, consumers cannot reference this type, which may limit type safety when using the component.
libs/react/ui/src/components/badge/badge.tsx (1)
121-121: Consider using theme-aware focus ring color.The focus ring uses
focus-visible:ring-blue-500which is a hardcoded color. Consider using a design token likefocus-visible:ring-border-highlights-interactiveto maintain consistency with the theme system and support dark mode.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
libs/react/ui/index.css(1 hunks)libs/react/ui/src/components/badge/badge.stories.tsx(1 hunks)libs/react/ui/src/components/badge/badge.tsx(1 hunks)libs/react/ui/src/components/badge/icon-badge.tsx(1 hunks)libs/react/ui/src/components/badge/index.ts(1 hunks)libs/react/ui/src/components/badge/status-badge.tsx(1 hunks)libs/react/ui/src/components/badge/user-badge.tsx(1 hunks)libs/react/ui/src/components/icon/icon.tsx(2 hunks)libs/react/ui/src/components/index.ts(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/index.tslibs/react/ui/src/components/badge/badge.tsxlibs/react/ui/index.csslibs/react/ui/src/components/badge/icon-badge.tsxlibs/react/ui/src/components/badge/status-badge.tsxlibs/react/ui/src/components/badge/user-badge.tsxlibs/react/ui/src/components/badge/badge.stories.tsxlibs/react/ui/src/components/badge/index.tslibs/react/ui/src/components/icon/icon.tsx
🧬 Code graph analysis (5)
libs/react/ui/src/components/badge/badge.tsx (1)
libs/react/ui/src/components/icon/icon.tsx (2)
IconName(59-59)Icon(65-68)
libs/react/ui/src/components/badge/icon-badge.tsx (1)
libs/react/ui/src/components/icon/icon.tsx (2)
IconName(59-59)Icon(65-68)
libs/react/ui/src/components/badge/status-badge.tsx (1)
libs/react/ui/src/components/badge/badge.tsx (2)
BadgeVariant(41-41)badgeVariants(7-39)
libs/react/ui/src/components/badge/user-badge.tsx (1)
libs/react/ui/src/components/avatar/avatar.tsx (1)
Avatar(117-217)
libs/react/ui/src/components/badge/badge.stories.tsx (4)
libs/react/ui/src/components/badge/badge.tsx (1)
Badge(84-139)libs/react/ui/src/components/badge/status-badge.tsx (1)
StatusBadge(21-40)libs/react/ui/src/components/badge/user-badge.tsx (1)
UserBadge(11-34)libs/react/ui/src/components/badge/icon-badge.tsx (1)
IconBadge(30-43)
🔇 Additional comments (13)
libs/react/ui/src/components/icon/icon.tsx (1)
7-7: LGTM!The new
homeSmileicon is correctly imported and registered following the existing pattern.Also applies to: 56-56
libs/react/ui/index.css (1)
271-271: LGTM!The warning text color token update from
--color-orange-200to--color-orange-800improves contrast and readability for warning badges in light mode.libs/react/ui/src/components/index.ts (1)
3-3: LGTM!The badge barrel export is correctly positioned and follows the existing pattern.
libs/react/ui/src/components/badge/user-badge.tsx (1)
11-34: LGTM!The
UserBadgecomponent is well-structured with proper button semantics, avatar integration, and text handling. The use oftype="button"prevents unintended form submissions, andwhitespace-nowrapensures consistent layout.libs/react/ui/src/components/badge/badge.tsx (3)
7-39: LGTM!The
badgeVariantsdefinition is comprehensive with well-structured variant options for different badge styles, sizes, and radii. The use of design tokens ensures consistency with the theme system.
50-82: Excellent type safety for accessibility.The union type pattern enforces ARIA labels when click handlers are provided, ensuring interactive icons have proper accessibility attributes. This is a strong design that prevents common accessibility issues at compile time.
109-115: LGTM!The development-time accessibility warning helps developers remember to add ARIA labels for interactive icons, improving the overall accessibility of components using this Badge.
libs/react/ui/src/components/badge/badge.stories.tsx (2)
18-375: LGTM!The
AllVariantsstory provides comprehensive visual documentation of all badge types, sizes, variants, and configurations. The organization by badge type and clear labeling makes it easy to understand the component's capabilities.
377-468: Excellent interactive examples.The
InteractiveBadgesstory effectively demonstrates stateful behavior with removable tags and shows proper usage of ARIA labels for accessibility. The examples serve as good reference implementations for consumers.libs/react/ui/src/components/badge/index.ts (1)
1-4: LGTM!The barrel export cleanly consolidates all badge components and their types into a single entry point, following best practices for library API design.
libs/react/ui/src/components/badge/icon-badge.tsx (3)
1-10: LGTM!The imports and type definitions are clean and appropriate. The component extends
ComponentProps<'span'>, which is suitable for an inline badge element.
12-28: Verify the semantic mismatch between "primary" variant and "warning" design tokens.The
primaryvariant (lines 17, 26) is mapped towarningdesign tokens (bg-tag-warning-bg,border-tag-warning-border,text-tag-warning-icon), while all other variants use semantically matching tokens. This naming inconsistency may confuse developers and lead to incorrect usage.Please verify if this is intentional. If not, consider either:
- Renaming the variant from
primarytowarningto align with the design tokens- Or mapping
primaryto appropriateprimarydesign tokens if they exist
30-43: LGTM!The component implementation is clean and well-structured. The conditional rendering ensures the Icon only appears when
nameis provided, and the className composition properly merges variant styles with any custom classes.
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a comprehensive Badge component system with multiple variants to support different use cases across the UI library.
Key Changes
- Added a flexible Badge component with support for interactive icons, multiple variants (neutral, info, feature, success, warning, error), customizable sizes and border radius
- Created specialized badge variants: IconBadge, StatusBadge, and UserBadge components for specific use cases
- Fixed CSS variable for warning text color to improve contrast (
--color-orange-200→--color-orange-800)
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| libs/react/ui/src/components/badge/badge.tsx | Core Badge component with variant system, interactive icon support, and accessibility features |
| libs/react/ui/src/components/badge/icon-badge.tsx | Icon-only badge variant with squared container |
| libs/react/ui/src/components/badge/status-badge.tsx | Status badge with colored dot indicator |
| libs/react/ui/src/components/badge/user-badge.tsx | User badge combining avatar and name display |
| libs/react/ui/src/components/badge/index.ts | Barrel exports for all badge components and types |
| libs/react/ui/src/components/badge/badge.stories.tsx | Comprehensive Storybook stories showcasing all badge variants and use cases |
| libs/react/ui/src/components/index.ts | Added badge component to main exports |
| libs/react/ui/src/components/icon/icon.tsx | Added RiHomeSmileFill icon for badge examples |
| libs/react/ui/index.css | Fixed warning text color CSS variable for better contrast |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
2 participants
Summary by CodeRabbit
New Features
Style