Skip to content

feat(badge): allow Badge label to accept ReactNode#2040

Open
diyagarg09 wants to merge 1 commit into
SB2318:mainfrom
diyagarg09:feat/badge-reactnode-label
Open

feat(badge): allow Badge label to accept ReactNode#2040
diyagarg09 wants to merge 1 commit into
SB2318:mainfrom
diyagarg09:feat/badge-reactnode-label

Conversation

@diyagarg09

@diyagarg09 diyagarg09 commented Jul 1, 2026

Copy link
Copy Markdown

Description

Enhanced the Badge component to allow the label prop to accept ReactNode instead of just a plain string. This enables rendering richer content (like icons or custom sub-components) inside badges across the application.

Changes Made

  • Badge.tsx: Updated the props interface to change label: string; to label: React.ReactNode;.
  • Type-Guard Implementation: Added a safe type check (typeof label === 'string') to ensure that .toUpperCase() is only executed when the label is a plain string, safely bypassing it for rich React nodes to prevent runtime errors.
  • ArticleShareCard.tsx: Refactored CategoryBadge and updated the category type to ReactNode with proper type-guarding.
  • Badge.test.tsx: Added a comprehensive unit test suite covering all variants, sizes, and both string and ReactNode label types to ensure stability.
    [Enhancement] Allow Badge label to accept ReactNode #995 (comment)
    Fixes [Enhancement] Allow Badge label to accept ReactNode #995

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Thank you @, for creating the PR and contributing to our UltimateHealth project 💗.
Our team will review the PR and will reach out to you soon! 😇
Make sure that you have marked all the tasks that you are done with ✅.
Thank you for your patience! 😀

@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

❌ PR Validation Failed

This PR was marked as gssoc:invalid because: You are not the author or an assignee of the linked issue(s).

To resolve this, please ensure your PR description links an issue (e.g., Fixes #123) and that you are either the creator or an assignee of that issue.

@diyagarg09

Copy link
Copy Markdown
Author

Hi Project Maintainers / Mentors,

I have successfully resolved this issue by refactoring the Badge component to accept ReactNode, adding proper type-guards, and writing a comprehensive unit test suite in Badge.test.tsx.

I have already pushed the changes and opened a PR, but it got marked as invalid by the GSSoC bot because this issue is not assigned to me yet.

Could you please assign this issue #995 to me so that the PR can pass validation?

Thank you!

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement] Allow Badge label to accept ReactNode

1 participant