Fix design of disabled states #11989
Merged
Conversation
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
Contributor
🎉 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) |
Contributor
✅ PR preview is ready!
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR fixes the design of disabled states for st.file_uploader and st.audio_input widgets to make them consistent with other Streamlit widgets. The changes include updating cursor behavior and color styling for disabled states.
- Updates file uploader to use "not-allowed" cursor when disabled and "pointer" cursor when enabled
- Standardizes text color styling for disabled states using theme colors (fadedText40/fadedText60)
- Replaces HTML
<small>element with styled span for consistency
Reviewed Changes
Copilot reviewed 5 out of 92 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/lib/src/components/widgets/FileUploader/styled-components.ts | Adds cursor styling and new styled components for text with disabled state support |
| frontend/lib/src/components/widgets/FileUploader/FileDropzoneInstructions.tsx | Updates component to accept disabled prop and use new styled components |
| frontend/lib/src/components/widgets/FileUploader/FileDropzone.tsx | Passes disabled prop to FileDropzoneInstructions component |
| frontend/lib/src/components/widgets/AudioInput/styled-components.ts | Adds disabled prop support and cursor styling for audio input components |
| frontend/lib/src/components/widgets/AudioInput/AudioInput.tsx | Passes disabled prop to styled components |
lukasmasuch
approved these changes
Jul 23, 2025
Collaborator
lukasmasuch
left a comment
There was a problem hiding this comment.
LGTM 👍 since the height of file uploader has slightly changed with this PR, maybe its a good time to try to get the file uploader height aligned with the audio input & (min) text area size. I think something like ~96px (4.25rem input + label)
Collaborator
Author
|
Changed file uploader height and merged. |
sfc-gh-bnisco
added a commit
that referenced
this pull request
Aug 13, 2025
## Describe your changes - Fixes a regression introduced in #11989 by truncating overflowing text per suggestion from Johannes in #12189 ## GitHub Issue Link (if applicable) Fixes #12189 ## Testing Plan - ✅ Adds e2e tests --- **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
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.
Describe your changes
Adapts the design of the disabled state of
st.file_uploaderandst.audio_inputto make it match other widgets. Also makes the cursor"not-allowed"for these two elements when disabled.This also makes the file uploader have a pointer cursor everywhere, since it can be clicked + changes the height of file uploader to match the one of audio input.
File uploader
Before:
After:
Audio input
Before:
After:
GitHub Issue Link (if applicable)
Testing Plan
<span>(with small font size) instead of an actual<small>element for consistency, which slightly changes the sizes/padding (we'll change the design of file uploader very soon anyway, so shouldn't matter).Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.