Badge component#191
Conversation
|
@afrussel is attempting to deploy a commit to the Mdafsar's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughA new ChangesBadge Component
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. 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)
src/components/nurui/badge.tsx (1)
32-34: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider
<span>instead of<div>for semantic correctness.
Badgerenders as a<div>. Since badges are typically inline elements used within text or alongside other inline content, a<span>would be more semantically appropriate and avoid potential invalid HTML nesting issues (e.g., placing a<div>inside a<p>). Theinline-flexdisplay already makes it inline-level.♻️ Proposed change
-function Badge({ className, variant, ...props }: BadgeProps) { +function Badge({ className, variant, ...props }: BadgeProps) { return ( - <div className={cn(badgeVariants({ variant }), className)} {...props} /> + <span className={cn(badgeVariants({ variant }), className)} {...props} /> ); }🤖 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/components/nurui/badge.tsx` around lines 32 - 34, Update the Badge component to use a semantic inline element instead of a block-level one: in Badge, replace the current div returned by Badge({ className, variant, ...props }) with a span while keeping the existing cn(badgeVariants({ variant }), className) styling and prop passthrough. This preserves the inline-flex behavior, improves semantic correctness, and avoids invalid nesting when Badge is used inside text containers like p.src/components/nurui/badge-demo.tsx (1)
6-6: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winPrefer
cn()over template string for className composition.The project provides a
cn()utility that mergesclsxandtailwind-merge. Using it avoids potential class conflicts and is consistent with other components.♻️ Proposed fix
- <div className={`flex flex-wrap items-center justify-center gap-3 p-8 ${className || ""}`}> + <div className={cn("flex flex-wrap items-center justify-center gap-3 p-8", className)}>🤖 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/components/nurui/badge-demo.tsx` at line 6, The className composition in the badge demo container should use the shared cn() utility instead of a template string. Update the wrapper div in badge-demo and import/use cn() so class merging is consistent with the rest of the components and avoids Tailwind conflicts.
🤖 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.
Inline comments:
In `@src/components/nurui/badge-demo.tsx`:
- Around line 7-14: The BadgeDemo preview is missing one of the supported badge
styles, so update the BadgeDemo component to render the full set of variants
defined by badgeVariants, including the outline Badge. Add the outline example
alongside the existing Badge variant renders so the demo matches all available
styles and use the Badge component in the same list of variant examples.
In `@src/components/nurui/badge.tsx`:
- Line 7: The Badge component’s focus ring styles are referencing a non-existent
`ring` token and won’t apply on a plain non-focusable `<div>`. Update the
`Badge` styling in `badge.tsx` to either remove the unused `focus:ring-*`
classes or replace `focus:ring-ring` with a valid Tailwind token from
`tailwind.config.ts`, and only keep focus styles if the rendered element is
actually made focusable.
In `@src/content/docs/badge.mdx`:
- Around line 49-54: The badge props documentation has an outdated and
incomplete `variant` list. Update the props table in `badge.mdx` so the
`variant` description matches the actual `badgeVariants` options used by the
Badge component, replacing `destructive` with `danger` and adding `success`,
`warning`, `info`, `light`, and `dark` alongside `default`, `secondary`, and
`outline`. Use the `variant` row and the `badgeVariants`/Badge API as the source
of truth.
---
Nitpick comments:
In `@src/components/nurui/badge-demo.tsx`:
- Line 6: The className composition in the badge demo container should use the
shared cn() utility instead of a template string. Update the wrapper div in
badge-demo and import/use cn() so class merging is consistent with the rest of
the components and avoids Tailwind conflicts.
In `@src/components/nurui/badge.tsx`:
- Around line 32-34: Update the Badge component to use a semantic inline element
instead of a block-level one: in Badge, replace the current div returned by
Badge({ className, variant, ...props }) with a span while keeping the existing
cn(badgeVariants({ variant }), className) styling and prop passthrough. This
preserves the inline-flex behavior, improves semantic correctness, and avoids
invalid nesting when Badge is used inside text containers like p.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 9dca10b9-38af-4b19-b1d9-7c83166ebd54
📒 Files selected for processing (5)
src/components/nurui/badge-demo.tsxsrc/components/nurui/badge.tsxsrc/components/pages/components/ComponentsPage.tsxsrc/content/docs/badge.mdxsrc/registry/components-registry.tsx
1 participant
Summary by CodeRabbit
className.variantoptions.