feat(Select): Support multi select#2603
Open
Lisa18289 wants to merge 7 commits into
Open
Conversation
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Contributor
Coverage Report for ./packages/components/
File CoverageNo changed files found. |
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
1 similar comment
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
There was a problem hiding this comment.
Pull request overview
This PR extends the Select form control to support multi-selection, updates option rendering/styling to show selection state, and adjusts docs + visual regression coverage to reflect the new behavior.
Changes:
- Add
selectionModesupport (single/multiple) toSelectand update its value rendering behavior. - Render a selection check icon in
Optionand update menu-item styling to show it only for selected/current items. - Update Storybook, docs, and visual tests to cover multi-select and FieldDescription/placeholder-related styling.
Reviewed changes
Copilot reviewed 21 out of 102 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-lock.yaml | Bumps @codemirror/language patch version in lockfile. |
| packages/remote-react-components/src/tests/visual/TimeField.browser.test.tsx | Adds FieldDescription to disabled TimeField visual coverage. |
| packages/remote-react-components/src/tests/visual/TextField.browser.test.tsx | Adds FieldDescription to disabled TextField visual coverage. |
| packages/remote-react-components/src/tests/visual/TextArea.browser.test.tsx | Adds FieldDescription to disabled TextArea visual coverage. |
| packages/remote-react-components/src/tests/visual/Select.browser.test.tsx | Updates Select interaction coverage and adds a new multi-select visual test. |
| packages/remote-react-components/src/tests/visual/FileField.browser.test.tsx | Adds FieldDescription to disabled FileField visual coverage. |
| packages/remote-react-components/src/tests/visual/DateRangePicker.browser.test.tsx | Adds FieldDescription to disabled DateRangePicker visual coverage. |
| packages/remote-react-components/src/tests/visual/DatePicker.browser.test.tsx | Adds FieldDescription to disabled DatePicker coverage; tweaks interaction sequence. |
| packages/components/src/styles/mixins/menuItem.scss | Adds .checkMark visibility behavior for selected/current items; fixes icon transition property. |
| packages/components/src/styles/mixins/formControl.scss | Attempts to style placeholder via [data-placeholder="true"] in interaction states. |
| packages/components/src/components/Select/stories/Default.stories.tsx | Adds selectionMode control; updates examples to include rich option content and new default API usage. |
| packages/components/src/components/Select/Select.tsx | Updates Select props typing for selection modes; customizes SelectValue rendering; updates change handlers. |
| packages/components/src/components/Select/Select.module.scss | Hides option checkmark inside the Select toggle; removes local placeholder styling. |
| packages/components/src/components/Option/Option.tsx | Adds check icon + wraps option content for richer layouts and selection affordance. |
| packages/components/src/components/Option/Option.module.scss | Lays out option content vs check icon (space-between) and aligns rich content. |
| packages/components/src/components/FormField/FormField.module.scss | Ensures disabled styles also apply to .fieldDescription. |
| packages/components/src/components/FileField/components/FileInput.tsx | Adds styling hook for FieldDescription in FileInput composition. |
| packages/components/src/components/FileField/components/FileInput.module.scss | Adds disabled color styling for a sibling .fieldDescription. |
| packages/components/src/components/DateRangePicker/components/DateRangeInput/DateRangeInput.module.scss | Adds placeholder/disabled sibling styling for date range input segments. |
| packages/components/src/components/DatePicker/components/DateInput/DateInput.module.scss | Adds placeholder/disabled sibling styling for date input segments. |
| apps/docs/src/content/04-components/form-controls/select/overview.mdx | Documents selectionMode="multiple" and embeds a live example. |
| apps/docs/src/content/04-components/form-controls/select/examples/multiple.tsx | Adds docs example snippet demonstrating multiple selection. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Lisa18289
requested review from
Jan-Eimertenbrink,
ins0,
maaaathis and
mfal
as code owners
July 15, 2026 12:06
Lisa18289
marked this pull request as draft
July 17, 2026 06:21
auto-merge was automatically disabled
July 17, 2026 06:21
Pull request was converted to draft
Add single/multiple selectionMode support to the Select component, including option check marks and multi-value handling, along with the documentation, stories and visual regression tests.
Lisa18289
force-pushed
the
2601-improve-and-document-multi-select-in-select-component
branch
from
July 17, 2026 06:44
cda8eef to
3c4b63f
Compare
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>
…ment-multi-select-in-select-component # Conflicts: # packages/remote-react-components/src/tests/visual/__screenshots__/Select.browser.test.tsx/Select-states-firefox-linux.png # packages/remote-react-components/src/tests/visual/__screenshots__/Select.browser.test.tsx/Select-states-webkit-linux.png
…select-in-select-component' into 2601-improve-and-document-multi-select-in-select-component
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>
Lisa18289
marked this pull request as ready for review
July 20, 2026 05:09
…select-in-select-component' into 2601-improve-and-document-multi-select-in-select-component
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.
No description provided.