feat(MultiSelect): Allow ReactNode to be used as checkbox label - #1398
feat(MultiSelect): Allow ReactNode to be used as checkbox label#1398ethanashaw 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> |
| <CheckboxInput | ||
| disabled={disabledItemValues.has(item.value)} | ||
| label={item.label} | ||
| label={item.node ?? item.label} | ||
| checked={selectedItemValues.has(item.value)} | ||
| value={item.value} |
edlerd
left a comment
edlerd
left a comment
There was a problem hiding this comment.
I see why we'd need the flexibility, but there are some concerns on aligning the changes with existing components. See details below.
| export type MultiSelectItem = { | ||
| label: string; | ||
| value: string | number; | ||
| node?: ReactNode; | ||
| group?: string; | ||
| }; |
There was a problem hiding this comment.
The new naming is slightly inconsistent with the CustomSelect. There we have a label: ReactNode and a text?: string with a programmatic guard in getOptionText to ensure a string value is provided. Can we use the same approach here?
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