Skip to content

New styling for selectbox and multiselect (select all 3)#13796

Open
sfc-gh-dmatthews wants to merge 44 commits into02-02-select-all-featurefrom
02-02-selectbox-and-multiselect-styling
Open

New styling for selectbox and multiselect (select all 3)#13796
sfc-gh-dmatthews wants to merge 44 commits into02-02-select-all-featurefrom
02-02-selectbox-and-multiselect-styling

Conversation

@sfc-gh-dmatthews
Copy link
Collaborator

@sfc-gh-dmatthews sfc-gh-dmatthews commented Feb 3, 2026 •
edited
Loading

Describe your changes

This PR introduces new styling for selectbox and multiselect dropdown components. The changes include:

  • New md2 border radius (0.375rem) for dropdown item highlights to create visual consistency between selected tags and dropdown options
  • Scrollbar gutter handling in VirtualDropdown to properly account for classic scrollbar width on different OS/browser configurations
  • Popover gap and styling for light/dark modes: only shadowbox in light, only border in dark
  • Input/placeholder overlay pattern using absolute & relative positioning to align placeholder text, search text, selected text, and the dropdown options below
  • Alignment of search text and tags in multiselect (for all the not-first items)
  • Collapse input to zero width in multiselect when not in focus (prevent empty line wrap when the last row is full of tags)
  • Separator lines for "Select all" and "Add:" (creatable) dropdown options
  • Refined multiselect tag gaps (more compact)

Screenshot or video (only for visual changes)

GitHub Issue Link (if applicable)

Testing Plan

  • Explanation of why no additional tests are needed
  • Unit Tests (JS and/or Python)
  • E2E Tests
  • Any manual testing needed?

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

@snyk-io
Copy link
Contributor

snyk-io bot commented Feb 3, 2026 •
edited
Loading

✅ Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
✅ Open Source Security 0 0 0 0 0 issues
✅ Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 3, 2026 •
edited
Loading

✅ PR preview is ready!

Name Link
📦 Wheel file https://core-previews.s3-us-west-2.amazonaws.com/pr-13796/streamlit-1.53.1-py3-none-any.whl
📦 @streamlit/component-v2-lib Download from artifacts
🕹️ Preview app pr-13796.streamlit.app (☁️ Deploy here if not accessible)

@sfc-gh-dmatthews Graphite App
Copy link
Collaborator Author

sfc-gh-dmatthews commented Feb 3, 2026 •
edited
Loading

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

This was referenced Feb 3, 2026
Open
Open
Open
Open
@sfc-gh-dmatthews sfc-gh-dmatthews changed the title Add new temporary radius New styling for selectbox and multiselect Feb 3, 2026
@sfc-gh-dmatthews sfc-gh-dmatthews changed the title New styling for selectbox and multiselect New styling for selectbox and multiselect (select all 3) Feb 3, 2026
@sfc-gh-dmatthews sfc-gh-dmatthews added security-assessment-completed Security assessment has been completed for PR change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users ai-review If applied to PR or issue will run AI review workflow labels Feb 3, 2026
@github-actions github-actions bot removed the ai-review If applied to PR or issue will run AI review workflow label Feb 3, 2026
@sfc-gh-dmatthews sfc-gh-dmatthews changed the base branch from 02-02-select-all-feature to graphite-base/13796 February 3, 2026 16:23
@sfc-gh-bnisco sfc-gh-bnisco force-pushed the 02-02-selectbox-and-multiselect-styling branch from 433ccd0 to 199346a Compare February 3, 2026 17:11
@sfc-gh-bnisco sfc-gh-bnisco changed the base branch from graphite-base/13796 to 02-02-select-all-feature February 3, 2026 17:11
@sfc-gh-dmatthews sfc-gh-dmatthews changed the base branch from 02-02-select-all-feature to graphite-base/13796 February 3, 2026 17:39
@sfc-gh-dmatthews sfc-gh-dmatthews force-pushed the 02-02-selectbox-and-multiselect-styling branch from 199346a to a9d67a6 Compare February 3, 2026 17:40
@sfc-gh-dmatthews sfc-gh-dmatthews changed the base branch from graphite-base/13796 to 02-02-select-all-feature February 3, 2026 17:40
@sfc-gh-dmatthews sfc-gh-dmatthews force-pushed the 02-02-selectbox-and-multiselect-styling branch from a9d67a6 to eb44255 Compare February 3, 2026 18:38
@sfc-gh-dmatthews sfc-gh-dmatthews force-pushed the 02-02-select-all-feature branch from f876deb to 2df8686 Compare February 3, 2026 18:38
@sfc-gh-dmatthews sfc-gh-dmatthews force-pushed the 02-02-selectbox-and-multiselect-styling branch 4 times, most recently from c33a309 to 89f2ede Compare February 3, 2026 20:48
@sfc-gh-dmatthews sfc-gh-dmatthews force-pushed the 02-02-select-all-feature branch from 90a9eeb to b744651 Compare February 3, 2026 21:39
@sfc-gh-dmatthews sfc-gh-dmatthews force-pushed the 02-02-selectbox-and-multiselect-styling branch from 89f2ede to 04e327c Compare February 3, 2026 21:39
@github-actions
Copy link
Contributor

github-actions bot commented Feb 3, 2026 •
edited
Loading

📈 Frontend coverage change detected

The frontend unit test (vitest) coverage has increased by 0.0400%

  • Current PR: 86.4900% (13902 lines, 1877 missed)
  • Latest develop: 86.4500% (13862 lines, 1877 missed)

✅ Coverage change is within normal range.

📊 View detailed coverage comparison

@sfc-gh-dmatthews
Input alignment to match row gap on multiselect
bc72ae8
@sfc-gh-dmatthews
Prevent infinite recalculation loop
73a5655
@sfc-gh-dmatthews
Update snapshots
e7f3b75
@sfc-gh-dmatthews
Click on the widget container instead of hidden input
0142379
@sfc-gh-dmatthews
Update snapshots
c1c24fb
@sfc-gh-dmatthews
Fix placeholder and input vertical alignment
878a2a7
@sfc-gh-dmatthews
Simplify multiselect padding
075cd27
@sfc-gh-dmatthews
Revert snapshots to prior stack branch
4652439
@sfc-gh-dmatthews
Fix zero width input
469fdbc
@sfc-gh-dmatthews
Update snapshots
1bbd7ba
@sfc-gh-dmatthews
Use them spacing none
fee5743
@sfc-gh-dmatthews
Get test element by test-id
66e2c74
@sfc-gh-dmatthews
Update test selection method for input
1305a8c
@sfc-gh-dmatthews
Use role selection
7a372e0
@sfc-gh-dmatthews
Prevent closing dropdown in multiselect tests
3803e22
@sfc-gh-dmatthews
Use input for selectbox
daeff02
@sfc-gh-dmatthews
Test enter on selectbox to check tests
4517bd4
@sfc-gh-dmatthews
Add wait to test webkit selectbox
7ce066c
@sfc-gh-dmatthews
Try waiting for selecbox dropdown
46f82bf
@sfc-gh-dmatthews
Add another expect visible in selectbox tests
fdf543b
@sfc-gh-dmatthews
Wait for stSelectbox to be visible
3e87406
@sfc-gh-dmatthews
Make selectbox input full width
24e887a
@sfc-gh-dmatthews
Change selectbox input per focus
cfe5d88
@sfc-gh-dmatthews
Really fix infinite loop from autosizer
8b56e2e
@sfc-gh-dmatthews
Make sure clicks pass through placeholder
5b5a2f5
@sfc-gh-dmatthews
Update snapshots
3db80ee
@sfc-gh-dmatthews sfc-gh-dmatthews force-pushed the 02-02-select-all-feature branch from cb76683 to 7af271d Compare February 5, 2026 03:23
@sfc-gh-dmatthews sfc-gh-dmatthews force-pushed the 02-02-selectbox-and-multiselect-styling branch from 990088e to 3db80ee Compare February 5, 2026 03:23
@sfc-gh-dmatthews sfc-gh-dmatthews marked this pull request as ready for review February 5, 2026 05:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sfc-gh-bnisco sfc-gh-bnisco Awaiting requested review from sfc-gh-bnisco

Assignees

No one assigned

Labels

change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@sfc-gh-dmatthews