Skip to content

feat(tags): add right prop to all tags#3511

Closed
factmarc10010 wants to merge 2 commits intomainfrom
FCT-48771-F0-Tag-enable-right-icon
Closed

feat(tags): add right prop to all tags#3511
factmarc10010 wants to merge 2 commits intomainfrom
FCT-48771-F0-Tag-enable-right-icon

Conversation

@factmarc10010
Copy link
Copy Markdown
Contributor

@factmarc10010 factmarc10010 commented Feb 24, 2026

Description

Add optional right prop to all F0 tag components so consumers can render content on the right side of tags (e.g. icons, remove buttons) in the same way BaseTag already supports. The F0Tag router component also supports right by forwarding it via the tag variant props.

Screenshots (if applicable)

image

Implementation details

  • BaseTag already had a right?: ReactNode prop; it was not exposed on the public tag components.
  • F0TagAvatar (internal): Added right?: ReactNode to props and pass it through to BaseTag. This enables right content for F0TagPerson, F0TagCompany, and F0TagTeam.
  • F0TagRaw, F0TagDot, F0TagAlert, F0TagStatus, F0TagBalance: Added right?: ReactNode to their types and pass it to BaseTag.
  • F0TagPerson, F0TagCompany, F0TagTeam: Added right?: ReactNode to their types and forward it to F0TagAvatar.
  • F0Tag router (Tag): No code changes. It already spreads the tag object (e.g. { type: "person", name: "...", right: ... }) to the underlying component, so right is supported for all variants once each component accepts it.

All new props are optional and backward compatible.

Co-authored-by: Cursor <cursoragent@cursor.com>
@github-actions github-actions Bot added feat react Changes affect packages/react labels Feb 24, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 24, 2026

✅ No New Circular Dependencies

No new circular dependencies detected. Current count: 0

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 24, 2026

📦 Alpha Package Version Published

Use pnpm i github:factorialco/f0#npm/alpha-pr-3511 to install the package

Use pnpm i github:factorialco/f0#84218ccfdcf12744f344cb5e18daac64c53b35f7 to install this specific commit

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 24, 2026

🔍 Visual review for your branch is published 🔍

Here are the links to:

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 24, 2026

Coverage Report for packages/react

Status Category Percentage Covered / Total
🔵 Lines 38.9% 7213 / 18541
🔵 Statements 38.27% 7375 / 19269
🔵 Functions 29.43% 1540 / 5231
🔵 Branches 28.51% 4186 / 14679
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
packages/react/src/components/tags/F0TagAlert/F0TagAlert.tsx 42.85% 100% 0% 42.85% 21-58
packages/react/src/components/tags/F0TagAlert/types.ts 0% 100% 100% 0% 3
packages/react/src/components/tags/F0TagBalance/F0TagBalance.tsx 16% 0% 0% 16% 31-121
packages/react/src/components/tags/F0TagBalance/types.ts 0% 100% 100% 0% 5
packages/react/src/components/tags/F0TagCompany/F0TagCompany.tsx 66.66% 100% 0% 66.66% 9-19
packages/react/src/components/tags/F0TagCompany/types.ts 100% 100% 100% 100%
packages/react/src/components/tags/F0TagDot/F0TagDot.tsx 28.57% 0% 0% 33.33% 11-39
packages/react/src/components/tags/F0TagDot/types.ts 100% 100% 100% 100%
packages/react/src/components/tags/F0TagPerson/F0TagPerson.tsx 66.66% 100% 0% 66.66% 9-22
packages/react/src/components/tags/F0TagPerson/types.ts 100% 100% 100% 100%
packages/react/src/components/tags/F0TagRaw/F0TagRaw.tsx 50% 0% 0% 50% 12-36
packages/react/src/components/tags/F0TagRaw/types.ts 100% 100% 100% 100%
packages/react/src/components/tags/F0TagStatus/F0TagStatus.tsx 100% 100% 100% 100%
packages/react/src/components/tags/F0TagStatus/types.ts 0% 100% 100% 0% 3-9
packages/react/src/components/tags/F0TagTeam/F0TagTeam.tsx 66.66% 100% 0% 66.66% 9-19
packages/react/src/components/tags/F0TagTeam/types.ts 100% 100% 100% 100%
packages/react/src/components/tags/internal/BaseTag/index.tsx 100% 65.38% 100% 100%
packages/react/src/components/tags/internal/TagAvatar/index.tsx 50% 0% 0% 50% 19-34
Generated in workflow #11186 for commit 4166d7b by the Vitest Coverage Report Action

@factmarc10010 factmarc10010 marked this pull request as ready for review February 24, 2026 12:14
@factmarc10010 factmarc10010 requested a review from a team as a code owner February 24, 2026 12:15
Comment on lines +35 to +39
/**
* Content to render on the right side of the tag (e.g. icon or action)
*/
right?: ReactNode

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't have such a generic prop to add any content here, we should discuss the use case and adapt the component or create a new one in case we need it to cover that but not making this one too flexible

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat react Changes affect packages/react

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants