-
Notifications
You must be signed in to change notification settings - Fork 4k
Update placeholder style and in-edit input margin for Selectbox and Multiselect #10865
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🎉 Snyk checks have passed. No issues have been found so far.✅ security/snyk check is complete. No issues have been found. (View Details) ✅ license/snyk check is complete. No issues have been found. (View Details) |
✅ PR preview is ready!
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This pull request updates the styling of the Selectbox and Multiselect components to ensure consistency in placeholder appearance and to prevent the in-edit input in Selectbox from shifting position during editing.
- Update the placeholder styling in both components to use theme.colors.fadedText60.
- Add a left margin to the in-edit input in Selectbox to maintain alignment.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| frontend/lib/src/components/shared/Dropdown/Selectbox.tsx | Added a placeholder style override and applied a left margin to the InputContainer to prevent input jumping. |
| frontend/lib/src/components/widgets/Multiselect/Multiselect.tsx | Updated the placeholder styling by replacing the opacity setting with a color assignment for consistency. |
Comments suppressed due to low confidence (1)
frontend/lib/src/components/shared/Dropdown/Selectbox.tsx:251
- [nitpick] Consider verifying that 'threeXS' is the intended spacing token and is clearly defined in the theme. If a more standard spacing token exists, using it could improve clarity and maintain consistency.
marginLeft: theme.spacing.threeXS,
7f53c43 to
dd3b0f2
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
suggestion: It seems like the disabled text color has changed. Let's ensure this maintains the previous disabled text color, since I don't believe this is a desired change.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes! great point, the disabled mode should not be impacted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@sfc-gh-bnisco I have updated the code. The multiselect disabled state is still updated, but is now aligned with the color of other disabled widget colors.
6e0cbaa to
4d8f622
Compare
|
did you also compare the placeholder color with the one from other widgets we have (e.g. |
I checked with Jessi that this is the correct color for placeholders |
|
Ok, but that means that we have to adapt a couple of other widget placeholders as well (see playground here). I believe we are applying an additional opacity for widgets like text_area & text_input: "::placeholder": {
opacity: "0.7",
},If it's intended to be just |
|
@lukasmasuch I believe disabled widgets are supposed to have the value |
4d8f622 to
5fde69d
Compare
lukasmasuch
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍 Is it tracked somewhere to also fix the placholder colors of other widgets e.g. text_input / text_area?
Yeah I have created a TechDebt item in our database |
5fde69d to
b4706aa
Compare
b4706aa to
1ea7392
Compare
1ea7392 to
9575387
Compare
## Describe your changes This PR adds a new functionality to the `st.selectbox` and `st.multiselect` commands, which will allow to add new options dynamically when the `accept_new_options` argument is passed as `True`. These PRs were merged in context of this work: #10865, #10891 Underlying, we change an index-based option selection with a value-based option selection. Previously, the frontend and backend used the indices of the selected options, since the frontend and backend had the same set of options available. Now, the frontend can have a new option being added dynamically. This option is not available on the backend, so we cannot use an index. We made the decision to switch the communication to always use strings to keep it simple. For that, following changes are made: - the selected values are sent via `setStringValue` and `setStringArrayValue` from the Frontend now - the protos for Selectbox and Multiselect are updated: - a new `accept_new_options` field to tell the frontend whether adding an option dynamically should be enabled - a new `raw_value` field that replaces the old `value` field. The `value` field was of type `int32` / `int32[]`, respectively, and is now of type `string` / `string[]`. - the `value` field is marked as deprecated, but otherwise left in place so that the code is backwards-compatible. - the `st.selectbox` and `st.multiselect` have new overloaded versions with return types `T | str` and `list[T | str]`, respectively. This accounts for the fact that not only the generic type `T` based on the passed options can be returned but also strings corresponding to dynamically created options that are of type string. The string-based message is ~6times bigger, but note that the measurement is in bytes. So compared to the overall communication pattern of Streamlit with reruns and messages based on every interaction, this number should be neglectible. The commands `st.selectbox` and `st.multiselect` continue to return the generic type `T` for known options. However, if `accept_new_options` is `True`, the returned value can also contain string(s) for dynamically added options. Additionally, the coercion of enums corresponding to the passed `options` should not be relied on when options are added dynamically. So far, the `maybe_coerce_enum` function returns early when not all items in the passed list are of type enum. A dynamically added option is of type `str`. So, the function will always return early when a dynamically added option of type `str` is part of the list. We will see whether the coercion of such mixed types will be requested & voted for in the future. ## GitHub Issue Link (if applicable) - Closes #5348 - Closes #5744 ## Testing Plan - Explanation of why no additional tests are needed - Unit Tests (JS and/or Python) - Add unit tests for Serde classes - Add unit tests to ensure that the `accept_new_options` proto field is present - Update existing JS tests - Add unit test to ensure correct value returned from `getCurrStateFromProto` - E2E Tests - Add new e2e tests to test adding a new option dynamically - Add new e2e test for ensuring preset session state value is used - 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.
Describe your changes
GitHub Issue Link (if applicable)
Update placeholder color to be the same for Selectbox and Multiselect:
Add
margin-leftto in-edit selectbox to prevent it from jumping to the left when editing an existing option as shown in the following video:Before:
Screenshot.2025-03-19.at.14.35.17.mp4
After:
no-edit-jump-selectbox.mov
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.