[theming] Fine tune element spacing for `baseRadius` config #10915

sfc-gh-pchiu · 2025-03-26T08:00:36Z

Describe your changes

Now with the ability to configure border radius via baseRadius theming config, there are a few places that would have issues with padding when the radius is set to fully rounded.

st.table -- frontend/lib/src/components/elements/ArrowTable/styled-components.ts: Added a bit more paddingLeft to the left-most column.
Before:
st.number_input -- frontend/lib/src/components/widgets/NumberInput/NumberInput.tsx: Added more paddingLeft for the input box.
Before:
st.text_input -- frontend/lib/src/components/widgets/TextInput/TextInput.tsx: Added more paddingLeft for the input box. Refactored to destructure additional props (icon, maxChars) from element.
Before:
st.chat_input -- frontend/lib/src/components/widgets/ChatInput/ChatInput.tsx: Previously the input cursor was masked (this happened when we updated st.chat_input to use fully rounded radius though) So added a little paddingLeft to fix that.
Before:
input instructions -- frontend/lib/src/components/widgets/BaseWidget/styled-components.ts: Added more space to right property in StyledWidgetInstructions to move instructions further left.
Before:

Testing Plan

E2E Tests

Manual Tests

import streamlit as st

st.date_input("Date Input", label_visibility="collapsed")
st.text_input("Text Input", value="Test", label_visibility="collapsed")
st.number_input("Number Input", label_visibility="collapsed")
st.selectbox("Selectbox", options=["Test"], label_visibility="collapsed")
st.time_input("Time Input", label_visibility="collapsed")
st.text_area("Text Area", value="Test", label_visibility="collapsed")
st.container().chat_input("Chat Input")

default	full	none

Note: Value element in st.time_input has a 2px left margin

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 · 2025-03-26T08:00:45Z

🎉 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 · 2025-03-26T08:00:55Z

✅ PR preview is ready!

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

Copilot

Pull Request Overview

This PR fine tunes element spacing for the baseRadius configuration across various widgets and components. The changes update destructuring in TextInput and adjust padding and font size values in TextInput, NumberInput, ArrowTable, BaseWidget, and ChatInput to better reflect the new theming guidelines.

Reviewed Changes

Copilot reviewed 273 out of 273 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
frontend/lib/src/components/widgets/TextInput/TextInput.tsx	Updated destructuring to include icon and maxChars; updated references to use these variables.
frontend/lib/src/components/widgets/NumberInput/NumberInput.tsx	Adjusted left padding from theme.spacing.sm to theme.spacing.md.
frontend/lib/src/components/elements/ArrowTable/styled-components.ts	Added left padding for header cells.
frontend/lib/src/components/widgets/BaseWidget/styled-components.ts	Changed right positioning from a calculation based on theme.fontSizes.sm to theme.fontSizes.mdLg.
frontend/lib/src/components/widgets/ChatInput/ChatInput.tsx	Modified left padding from theme.spacing.none to theme.spacing.twoXS.

Comments suppressed due to low confidence (4)

frontend/lib/src/components/widgets/BaseWidget/styled-components.ts:57

Ensure that 'theme.fontSizes.mdLg' is a valid and intended property in your theme. If this is a new addition, please confirm that it aligns with the design specifications.

right: `calc(${theme.fontSizes.mdLg} * 0.5)`

frontend/lib/src/components/widgets/NumberInput/NumberInput.tsx:423

[nitpick] Confirm that 'theme.spacing.md' provides the appropriate padding for NumberInput as compared to the previous value (theme.spacing.sm). Verify against design guidelines if this change might affect overall layout consistency.

paddingLeft: theme.spacing.md,

frontend/lib/src/components/elements/ArrowTable/styled-components.ts:80

[nitpick] Ensure that adding left padding to header cells does not cause unintended alignment issues in the table layout. It may be worthwhile to review adjacent cell padding for consistent spacing.

paddingLeft: theme.spacing.sm,

frontend/lib/src/components/widgets/ChatInput/ChatInput.tsx:488

[nitpick] Verify that 'theme.spacing.twoXS' offers the intended spacing for ChatInput. Compare this adjustment with similar components to ensure uniformity in spacing across the UI.

paddingLeft: theme.spacing.twoXS,

lukasmasuch · 2025-03-26T22:27:34Z

I think we need to go through all input field widgets and make sure they all have the same left padding and all the text values are starting at the same position:

import streamlit as st

st.date_input("Date Input", label_visibility="collapsed")
st.text_input("Text Input", value="Test", label_visibility="collapsed")
st.number_input("Number Input", label_visibility="collapsed")
st.selectbox("Selectbox", options=["Test"], label_visibility="collapsed")
st.time_input("Time Input", label_visibility="collapsed")
st.text_area("Text Area", value="Test", label_visibility="collapsed")
st.container().chat_input("Chat Input")

Also, I think the spacing.lg of text_input looks a bit too much. I think the spacing.md of number input seems better with our default rounding.

sfc-gh-pchiu · 2025-03-26T23:58:47Z

Added screenshots of all input widgets under Manual Tests

lukasmasuch · 2025-03-27T19:48:47Z

frontend/lib/src/components/widgets/ChatInput/ChatInput.tsx

I think the chat input padding is too much, the full left padding of chat input is at 1.25rem while other widgets only have a padding of 0.75rem. I think it's better to keep this at none and instead overwrite the radius properties in Root with:

borderTopLeftRadius: "0", borderTopRightRadius: "0", borderBottomLeftRadius: "0", borderBottomRightRadius: "0",

since the additional radius isn't required.

okay I see, yeah I think it is better to not add more padding if it's just for the cursor. But this fixed the issue with hidden cursor.

I think changing the border radius to 0 of the inner text area root will also fix the hidden cursor issue

Ah sorry, I just meant to confirm that your fix setting the border radius to 0 made it so that we don't need the additional padding (which was not ideal in the first place) 👍

lukasmasuch · 2025-03-27T19:57:07Z

The padding for text area seems to be a bit to large (1rem vs 0.75rem), I think we can just update this to spacing.md to be more consistent:

paddingRight: theme.spacing.md,
paddingLeft: theme.spacing.md,
paddingBottom: theme.spacing.md,
paddingTop: theme.spacing.md,

And for Input instruction it still feels slightly to close, I think this small tweak on bottom in StyledWidgetInstructions could help:

 bottom: theme.spacing.threeXS,

lukasmasuch

LGTM 👍

sfc-gh-pchiu 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 labels Mar 26, 2025

sfc-gh-pchiu force-pushed the advanced-theming/rounded-input-left-padding branch from a9e0606 to ff2620a Compare March 26, 2025 20:49

sfc-gh-pchiu changed the title ~~Advanced theming/rounded input left padding~~ [theming] Fine tune element spacing for baseRadius config Mar 26, 2025

sfc-gh-pchiu requested a review from Copilot March 26, 2025 21:05

Copilot AI reviewed Mar 26, 2025

View reviewed changes

sfc-gh-pchiu marked this pull request as ready for review March 26, 2025 21:41

sfc-gh-pchiu force-pushed the advanced-theming/rounded-input-left-padding branch from ff2620a to 6cf4284 Compare March 26, 2025 23:33

lukasmasuch reviewed Mar 27, 2025

View reviewed changes

sfc-gh-pchiu added 6 commits March 27, 2025 13:13

increase input padding

1ec41ae

a few more paddings

2285a1c

snaps

07103ed

unify input left padding to md

5e08d07

snaps

59d3787

address comments

ddb5270

sfc-gh-pchiu force-pushed the advanced-theming/rounded-input-left-padding branch from ac73a6f to ddb5270 Compare March 27, 2025 20:13

snaps

ebbbb02

lukasmasuch approved these changes Mar 27, 2025

View reviewed changes

sfc-gh-pchiu merged commit e3eadd7 into develop Mar 27, 2025
33 checks passed

sfc-gh-pchiu deleted the advanced-theming/rounded-input-left-padding branch March 27, 2025 21:58

sfc-gh-bnisco pushed a commit that referenced this pull request Mar 31, 2025

[theming] Fine tune element spacing for baseRadius config (#10915)

fb4031d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[theming] Fine tune element spacing for `baseRadius` config #10915

[theming] Fine tune element spacing for `baseRadius` config #10915

Uh oh!

sfc-gh-pchiu commented Mar 26, 2025 •

edited

Loading

Uh oh!

snyk-io bot commented Mar 26, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 26, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

lukasmasuch commented Mar 26, 2025 •

edited

Loading

Uh oh!

sfc-gh-pchiu commented Mar 26, 2025

Uh oh!

lukasmasuch Mar 27, 2025 •

edited

Loading

Uh oh!

sfc-gh-pchiu Mar 27, 2025

Uh oh!

lukasmasuch Mar 27, 2025

Uh oh!

sfc-gh-pchiu Mar 27, 2025

Uh oh!

lukasmasuch commented Mar 27, 2025

Uh oh!

lukasmasuch left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[theming] Fine tune element spacing for baseRadius config #10915

[theming] Fine tune element spacing for baseRadius config #10915

Uh oh!

Conversation

sfc-gh-pchiu commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

Testing Plan

Manual Tests

Uh oh!

snyk-io bot commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

github-actions bot commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

lukasmasuch commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sfc-gh-pchiu commented Mar 26, 2025

Uh oh!

lukasmasuch Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-pchiu Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

lukasmasuch Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

sfc-gh-pchiu Mar 27, 2025

Choose a reason for hiding this comment

Uh oh!

lukasmasuch commented Mar 27, 2025

Uh oh!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[theming] Fine tune element spacing for `baseRadius` config #10915

[theming] Fine tune element spacing for `baseRadius` config #10915

sfc-gh-pchiu commented Mar 26, 2025 •

edited

Loading

snyk-io bot commented Mar 26, 2025 •

edited

Loading

github-actions bot commented Mar 26, 2025 •

edited

Loading

lukasmasuch commented Mar 26, 2025 •

edited

Loading

lukasmasuch Mar 27, 2025 •

edited

Loading