Refactor icons to use fill="variant" prop instead of a separate icon - #4134
Merged
Conversation
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
steven-tey
marked this pull request as ready for review
July 6, 2026 20:03
Collaborator
Author
|
@coderabbitai full review, any breaking changes? |
Contributor
|
✅ Action performedFull review finished. |
Contributor
|
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 (2)
💤 Files with no reviewable changes (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughThis PR migrates icon usage from dedicated filled components to variant-based icons across ChangesIcon fill-variant migration
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/ui/src/content.ts (1)
154-159: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRedundant
withFillVariantwrap on the "About" entry.
icon: withFillVariant(Users)forcesvariant="fill"unconditionally, but this entry is only ever rendered viaresources-content.tsx's Company section, which already passesvariant="fill"explicitly to every icon in that loop (seeresources-content.tsxlines 99-102). Sibling entries in the sameRESOURCESarray — Careers (Briefcase), Blog (Feather), Changelog (BulletList), Contact (Envelope) — correctly use the plain, unwrapped icon and rely on the caller'svariant="fill". The "About" entry is the outlier; wrapping it here is redundant and inconsistent with its siblings, even though it doesn't currently cause a visible bug.♻️ Align "About" with its siblings
{ - icon: withFillVariant(Users), + icon: Users, title: "About", description: "Company, values, and team", href: "/about", },🤖 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 `@packages/ui/src/content.ts` around lines 154 - 159, The “About” resource entry is redundantly wrapped with withFillVariant even though resources-content.tsx already passes variant="fill" for the Company section. Update the About item in content.ts to use the plain Users icon like the other RESOURCES entries (e.g. Briefcase, Feather, BulletList, Envelope) and let the caller control the fill variant consistently.packages/ui/src/icons/nucleo/badge-check2.tsx (1)
3-6: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider extracting the repeated
variantprop type.The
{ variant?: "outline" | "fill" }intersection type is duplicated verbatim across ~24 icon components in this migration (Bolt, Book2, Briefcase, BulletList, Gift, Heart, etc.). Extracting a sharedIconVariantPropstype (e.g. in a common icons types module) would reduce duplication and make future variant additions a single-point change.♻️ Example shared type
// packages/ui/src/icons/types.ts import { SVGProps } from "react"; export type IconVariant = "outline" | "fill"; export type VariantIconProps = SVGProps<SVGSVGElement> & { variant?: IconVariant; };-export function BadgeCheck2({ - variant = "outline", - ...props -}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) { +export function BadgeCheck2({ + variant = "outline", + ...props +}: VariantIconProps) {🤖 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 `@packages/ui/src/icons/nucleo/badge-check2.tsx` around lines 3 - 6, The `BadgeCheck2` component repeats the same `variant?: "outline" | "fill"` prop shape used by many icon components, so extract this into a shared icon props/type definition and update `BadgeCheck2` to use it. Add a common `IconVariant`/`VariantIconProps` type in the shared icons types module, then replace the inline intersection type in `BadgeCheck2` (and matching icons like Bolt, Book2, Briefcase, BulletList, Gift, Heart) with that shared type to keep variant handling centralized.
🤖 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 `@packages/ui/src/icons/with-fill-variant.tsx`:
- Around line 8-10: The FillIcon helper in with-fill-variant.tsx is letting
callers override the forced fill variant because props are spread after
variant="fill". Update FillIcon so the forced variant cannot be replaced by
incoming props, keeping the explicit fill value applied in the Icon wrapper and
ensuring variant is not taken from ComponentProps<VariantIcon>.
---
Nitpick comments:
In `@packages/ui/src/content.ts`:
- Around line 154-159: The “About” resource entry is redundantly wrapped with
withFillVariant even though resources-content.tsx already passes variant="fill"
for the Company section. Update the About item in content.ts to use the plain
Users icon like the other RESOURCES entries (e.g. Briefcase, Feather,
BulletList, Envelope) and let the caller control the fill variant consistently.
In `@packages/ui/src/icons/nucleo/badge-check2.tsx`:
- Around line 3-6: The `BadgeCheck2` component repeats the same `variant?:
"outline" | "fill"` prop shape used by many icon components, so extract this
into a shared icon props/type definition and update `BadgeCheck2` to use it. Add
a common `IconVariant`/`VariantIconProps` type in the shared icons types module,
then replace the inline intersection type in `BadgeCheck2` (and matching icons
like Bolt, Book2, Briefcase, BulletList, Gift, Heart) with that shared type to
keep variant handling centralized.
🪄 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: 200e388b-7571-4c96-8763-a03c9f4d5ff9
📒 Files selected for processing (91)
apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/fraud/review-fraud-alert-sheet.tsxapps/web/app/(ee)/admin.dub.co/(dashboard)/partners/trusted/page.tsxapps/web/app/(ee)/app.dub.co/(new-program)/[slug]/program/new/rewards/form.tsxapps/web/app/(ee)/app.dub.co/embed/referrals/bounties/submission-fields.tsxapps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/(default)/apply/success/page.tsxapps/web/app/(ee)/partners.dub.co/(dashboard)/profile/network-approval-guide.tsxapps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/invite/page.tsxapps/web/app/[domain]/[key]/inspect/card.tsxapps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/add-edit-group-additional-link-modal.tsxapps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/group-link-settings.tsxapps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-empty-state.tsxapps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-partner-card.tsxapps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/page-client.tsxapps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/success/page-client.tsxapps/web/app/app.dub.co/(invites)/[slug]/invite/page.tsxapps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/default-domain-selector.tsxapps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/register/page.tsxapps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/subdomain/page.tsxapps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsxapps/web/ui/integrations/integration-status-badge.tsxapps/web/ui/modals/link-conversion-tracking-modal.tsxapps/web/ui/partners/bounties/bounty-social-content.tsxapps/web/ui/partners/discounts/add-edit-discount-sheet.tsxapps/web/ui/partners/fraud-risks/partner-risk-banner.tsxapps/web/ui/partners/fraud-risks/partner-risk-indicator.tsxapps/web/ui/partners/partner-network/partner-network-status-badge.tsxapps/web/ui/partners/partner-platform-card.tsxapps/web/ui/partners/partner-platforms-form.tsxapps/web/ui/partners/partner-social-column.tsxapps/web/ui/partners/partner-star-button.tsxapps/web/ui/partners/program-application-sheet.tsxapps/web/ui/shared/password-requirements.tsxapps/web/ui/support/chat-bubble.tsxpackages/ui/package.jsonpackages/ui/src/card-selector.tsxpackages/ui/src/combobox/index.tsxpackages/ui/src/content.tspackages/ui/src/icons/index.tsxpackages/ui/src/icons/nucleo/badge-check2-fill.tsxpackages/ui/src/icons/nucleo/badge-check2.tsxpackages/ui/src/icons/nucleo/bolt-fill.tsxpackages/ui/src/icons/nucleo/bolt.tsxpackages/ui/src/icons/nucleo/book2-fill.tsxpackages/ui/src/icons/nucleo/book2.tsxpackages/ui/src/icons/nucleo/briefcase-fill.tsxpackages/ui/src/icons/nucleo/briefcase.tsxpackages/ui/src/icons/nucleo/bullet-list-fill.tsxpackages/ui/src/icons/nucleo/bullet-list.tsxpackages/ui/src/icons/nucleo/caret-up-fill.tsxpackages/ui/src/icons/nucleo/caret-up.tsxpackages/ui/src/icons/nucleo/checkbox-checked-fill.tsxpackages/ui/src/icons/nucleo/checkbox-unchecked.tsxpackages/ui/src/icons/nucleo/checkbox.tsxpackages/ui/src/icons/nucleo/circle-check-fill.tsxpackages/ui/src/icons/nucleo/circle-check.tsxpackages/ui/src/icons/nucleo/circle-play-fill.tsxpackages/ui/src/icons/nucleo/circle-play.tsxpackages/ui/src/icons/nucleo/connected-dots-fill.tsxpackages/ui/src/icons/nucleo/connected-dots.tsxpackages/ui/src/icons/nucleo/cube-settings-fill.tsxpackages/ui/src/icons/nucleo/cube-settings.tsxpackages/ui/src/icons/nucleo/diamond-turn-right-fill.tsxpackages/ui/src/icons/nucleo/diamond-turn-right.tsxpackages/ui/src/icons/nucleo/envelope-fill.tsxpackages/ui/src/icons/nucleo/envelope.tsxpackages/ui/src/icons/nucleo/feather-fill.tsxpackages/ui/src/icons/nucleo/feather.tsxpackages/ui/src/icons/nucleo/flag-fill.tsxpackages/ui/src/icons/nucleo/flag.tsxpackages/ui/src/icons/nucleo/gift-fill.tsxpackages/ui/src/icons/nucleo/gift.tsxpackages/ui/src/icons/nucleo/heart-fill.tsxpackages/ui/src/icons/nucleo/heart.tsxpackages/ui/src/icons/nucleo/index.tspackages/ui/src/icons/nucleo/life-ring-fill.tsxpackages/ui/src/icons/nucleo/life-ring.tsxpackages/ui/src/icons/nucleo/lock-fill.tsxpackages/ui/src/icons/nucleo/lock.tsxpackages/ui/src/icons/nucleo/microphone-fill.tsxpackages/ui/src/icons/nucleo/microphone.tsxpackages/ui/src/icons/nucleo/msgs-fill.tsxpackages/ui/src/icons/nucleo/msgs.tsxpackages/ui/src/icons/nucleo/star-fill.tsxpackages/ui/src/icons/nucleo/star.tsxpackages/ui/src/icons/nucleo/toggle2-fill.tsxpackages/ui/src/icons/nucleo/toggle2.tsxpackages/ui/src/icons/nucleo/users-fill.tsxpackages/ui/src/icons/nucleo/users.tsxpackages/ui/src/icons/with-fill-variant.tsxpackages/ui/src/nav/content/resources-content.tsxpackages/ui/src/nav/content/solutions-content.tsx
💤 Files with no reviewable changes (25)
- packages/ui/src/icons/nucleo/lock-fill.tsx
- packages/ui/src/icons/nucleo/toggle2-fill.tsx
- packages/ui/src/icons/nucleo/microphone-fill.tsx
- packages/ui/src/icons/nucleo/connected-dots-fill.tsx
- packages/ui/src/icons/nucleo/bolt-fill.tsx
- packages/ui/src/icons/nucleo/circle-check-fill.tsx
- packages/ui/src/icons/nucleo/gift-fill.tsx
- packages/ui/src/icons/nucleo/badge-check2-fill.tsx
- packages/ui/src/icons/nucleo/checkbox-checked-fill.tsx
- packages/ui/src/icons/nucleo/bullet-list-fill.tsx
- packages/ui/src/icons/nucleo/msgs-fill.tsx
- packages/ui/src/icons/nucleo/users-fill.tsx
- packages/ui/src/icons/nucleo/envelope-fill.tsx
- packages/ui/src/icons/nucleo/star-fill.tsx
- packages/ui/src/icons/nucleo/briefcase-fill.tsx
- packages/ui/src/icons/nucleo/life-ring-fill.tsx
- packages/ui/src/icons/nucleo/book2-fill.tsx
- packages/ui/src/icons/nucleo/heart-fill.tsx
- packages/ui/src/icons/nucleo/feather-fill.tsx
- packages/ui/src/icons/nucleo/checkbox-unchecked.tsx
- packages/ui/src/icons/nucleo/caret-up-fill.tsx
- packages/ui/src/icons/nucleo/flag-fill.tsx
- packages/ui/src/icons/nucleo/circle-play-fill.tsx
- packages/ui/src/icons/nucleo/cube-settings-fill.tsx
- packages/ui/src/icons/nucleo/diamond-turn-right-fill.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
variant="fill"), improving consistency across dashboards, onboarding, navigation, embeds, and modals.