feat(MultiSelect): Allow ReactNode to be used as checkbox label#1398
Open
ethanashaw wants to merge 2 commits into
Open
feat(MultiSelect): Allow ReactNode to be used as checkbox label#1398ethanashaw wants to merge 2 commits into
ethanashaw wants to merge 2 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
This PR extends MultiSelect item rendering so a consumer can provide a richer checkbox label (via a ReactNode) while still keeping the plain-string label for sorting and displaying selected items.
Changes:
- Added an optional
node?: ReactNodetoMultiSelectItem. - Updated dropdown checkbox rendering to prefer
item.nodeoveritem.label. - Adjusted Storybook example and dropdown item styling to accommodate wider/custom label content.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/components/MultiSelect/MultiSelect.tsx | Adds node to MultiSelectItem and uses it as the checkbox label when present. |
| src/components/MultiSelect/MultiSelect.stories.tsx | Demonstrates the new node capability in the condensed story. |
| src/components/MultiSelect/MultiSelect.scss | Ensures dropdown items/checkboxes can expand to full width for richer label layouts. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ...Array.from({ length: 26 }, (_, i) => ({ | ||
| label: `${String.fromCharCode(i + 65)}`, | ||
| value: `${String.fromCharCode(i + 65)}`, | ||
| node: <span style={{ display: "inline flex", justifyContent: "space-between", textIndent: 0, width: "100%" }}><span>{String.fromCharCode(i + 65)}</span><span className="u-text--muted">20 instances</span></span> |
Comment on lines
192
to
196
| <CheckboxInput | ||
| disabled={disabledItemValues.has(item.value)} | ||
| label={item.label} | ||
| label={item.node ?? item.label} | ||
| checked={selectedItemValues.has(item.value)} | ||
| value={item.value} |
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
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.
Done
nodeprop toMultiSelectItemwhich overrides thelabelprop for the checkbox label. Thelabelwill still be used for alphabetical sorting and showing the list of selected items. This prop is intended to show additional information about the item beyond just its name.QA
Pinging @canonical/react-library-maintainers for a review.
Storybook
To see rendered examples of all react-components, run:
QA in your project
from
react-componentsrun:Install the resulting tarball in your project with:
Percy steps