[LG-5850] feat(combobox): Add Badge to ComboboxOption#3434
Merged
adamrasheed merged 20 commits intomainfrom Jan 16, 2026
Merged
[LG-5850] feat(combobox): Add Badge to ComboboxOption#3434adamrasheed merged 20 commits intomainfrom
adamrasheed merged 20 commits intomainfrom
Conversation
🦋 Changeset detectedLatest commit: 076510d The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Size Change: +179 B (+0.01%) Total Size: 1.83 MB
ℹ️ View Unchanged
|
adamrasheed
requested review from
Copilot,
stephl3 and
tsck
and removed request for
a team
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds support for rendering a Badge component within ComboboxOption to display contextual labels (e.g., "New", "Beta") alongside option text in the Combobox dropdown.
Key Changes:
- Added
badgeprop toInternalComboboxOptionPropsfor displaying badges inline with option text - Enhanced styling to properly layout badges with flexbox and adjusted description spacing
- Added
descriptionClassNameprop toInputOptionContentfor custom description styling
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Added @leafygreen-ui/badge workspace dependency to combobox package |
| packages/combobox/package.json | Added @leafygreen-ui/badge dependency to package.json |
| packages/combobox/tsconfig.json | Added badge package to TypeScript project references |
| packages/combobox/src/utils/wrapJSX.tsx | Added isBadgeComponent utility function to check if a component is a Badge |
| packages/combobox/src/ComboboxOption/ComboboxOption.types.ts | Added badge prop to InternalComboboxOptionProps |
| packages/combobox/src/ComboboxOption/ComboboxOption.tsx | Implemented badge rendering logic with conditional display using isBadgeComponent check |
| packages/combobox/src/ComboboxOption/ComboboxOption.styles.ts | Refactored displayNameStyle to getDisplayNameStyle function with flexbox layout for badges; added getDescriptionClassName for badge spacing |
| packages/combobox/src/ComboboxOption/ComboboxOption.stories.tsx | Added WithIconsAndBadge story to demonstrate badge functionality |
| packages/input-option/src/InputOptionContent/InputOptionContent.types.ts | Added descriptionClassName prop for custom description styling |
| packages/input-option/src/InputOptionContent/InputOptionContent.tsx | Applied descriptionClassName prop to Description component |
| packages/input-option/src/InputOption/InputOption.stories.tsx | Added documentation comment for showWedge prop |
| .changeset/eighty-worlds-worry.md | Added changeset documenting minor version changes for both packages |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
tsck
requested changes
Jan 6, 2026
stephl3
reviewed
Jan 6, 2026
packages/input-option/src/InputOptionContent/InputOptionContent.types.ts
Outdated
Show resolved
Hide resolved
stephl3
reviewed
Jan 7, 2026
TheSonOfThomp
requested changes
Jan 13, 2026
Collaborator
TheSonOfThomp
left a comment
TheSonOfThomp
left a comment
There was a problem hiding this comment.
Filtering will be broken as-is, since the ReactNode isn't being correctly converted to a string
packages/combobox/src/ComboboxOption/ComboboxOption.stories.tsx
Outdated
Show resolved
Hide resolved
TheSonOfThomp
approved these changes
Jan 15, 2026
Contributor
|
Coverage after merging ar/LG-5850-combobox-badge into main will be
Coverage Report for Changed Files
|
|||||||||||||||||||||||||||||||||||||||||||||||||
tsck
approved these changes
Jan 16, 2026
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
5 participants
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.
✍️ Proposed changes
Adds support for rendering a
Badgecomponent withinComboboxOptionnext to the title by allowing thedisplayNameprop to be aReact.Nodeinstead of the previousstringtype. This enhancement allows users to display contextual labels (e.g., "New", "Beta") alongside option text in the Combobox dropdown.Key changes include:
displayNameprop type fromstringtoReactNodegetInputOptionStylesfunction🎟️ Jira ticket: LG-5850
✅ Checklist
pnpm changesetand documented my changes🧪 How to test changes
WithIconsAndBadgestory to see the Badge rendering alongside the option text