Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@raethlein
Copy link
Collaborator

Describe your changes

GitHub Issue Link (if applicable)

  • Update placeholder color to be the same for Selectbox and Multiselect:

    • Before:
      image
    • After:
      Screenshot 2025-03-20 at 12 46 47
  • Add margin-left to 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

  • The placeholder color change is captured by snapshot tests for which the snapshots ae updated accordingly
  • I guess we could test the style of a selected option vs. one which is currently edited (the left-jump issue mentioned above tackled by margin-left) by taking a snapshot of both states and compare them. However, this is so small of a detail that just for this to have a snapshot does not sound to be worth it.

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 Mar 20, 2025

🎉 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)

@github-actions
Copy link
Contributor

github-actions bot commented Mar 20, 2025

✅ PR preview is ready!

Name Link
📦 Wheel file https://core-previews.s3-us-west-2.amazonaws.com/pr-10865/streamlit-1.43.2-py3-none-any.whl
🕹️ Preview app pr-10865.streamlit.app (☁️ Deploy here if not accessible)

Copy link
Contributor

Copilot AI left a 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,

@raethlein raethlein added change:chore PR contains maintenance or housekeeping change impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR labels Mar 20, 2025
@raethlein raethlein force-pushed the chore/update-selectbox-style branch from 7f53c43 to dd3b0f2 Compare March 20, 2025 13:55
Copy link
Collaborator

@sfc-gh-bnisco sfc-gh-bnisco Mar 20, 2025

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.

Copy link
Collaborator Author

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.

Copy link
Collaborator Author

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.

@raethlein raethlein force-pushed the chore/update-selectbox-style branch 2 times, most recently from 6e0cbaa to 4d8f622 Compare March 21, 2025 09:14
@lukasmasuch
Copy link
Collaborator

did you also compare the placeholder color with the one from other widgets we have (e.g. chat_input, text_input, text_area, date_input & time_input if value=None)?

@raethlein
Copy link
Collaborator Author

did you also compare the placeholder color with the one from other widgets we have (e.g. chat_input, text_input, text_area, date_input & time_input if value=None)?

I checked with Jessi that this is the correct color for placeholders

@lukasmasuch
Copy link
Collaborator

lukasmasuch commented Mar 21, 2025

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 fadedText60 without the opacity, then we should remove all these opacity settings. Maybe the opacity was added so that it is also visually different in case its disabled?

@raethlein
Copy link
Collaborator Author

raethlein commented Mar 21, 2025

@lukasmasuch I believe disabled widgets are supposed to have the value fadedText40. Yeah, it seems to be somewhat inconsistent between our widgets. Let's discuss this offline with Jessi. This PR here at least aligns the Selectbox and Multiselect widget visually, which are also inconsistent at the moment (spotted in context of #10788).

@raethlein raethlein force-pushed the chore/update-selectbox-style branch from 4d8f622 to 5fde69d Compare March 24, 2025 09:39
Copy link
Collaborator

@lukasmasuch lukasmasuch left a 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?

@raethlein
Copy link
Collaborator Author

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

@raethlein raethlein force-pushed the chore/update-selectbox-style branch from 5fde69d to b4706aa Compare March 24, 2025 14:07
@raethlein raethlein force-pushed the chore/update-selectbox-style branch from b4706aa to 1ea7392 Compare March 24, 2025 14:26
@raethlein raethlein force-pushed the chore/update-selectbox-style branch from 1ea7392 to 9575387 Compare March 24, 2025 14:49
@raethlein raethlein merged commit 91f1b41 into develop Mar 24, 2025
33 checks passed
@raethlein raethlein deleted the chore/update-selectbox-style branch March 24, 2025 15:07
raethlein added a commit that referenced this pull request Mar 27, 2025
## 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:chore PR contains maintenance or housekeeping change impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants