feat(badge): allow Badge label to accept ReactNode#2040
Conversation
|
Thank you @, for creating the PR and contributing to our UltimateHealth project 💗. |
❌ PR Validation FailedThis PR was marked as To resolve this, please ensure your PR description links an issue (e.g., |
|
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! |
Description
Enhanced the
Badgecomponent to allow thelabelprop to acceptReactNodeinstead of just a plainstring. 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 changelabel: string;tolabel: React.ReactNode;.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: RefactoredCategoryBadgeand updated thecategorytype toReactNodewith 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