Component padding and spacing updates

[imjuangarcia]

📚 Context

This PR starts to adjust some of our components (namely st.selectbox, st.multiselect, st.text_input, st.number_input, st.text_area, st.time_input, and st.date_input), to their ideal counterparts in this Figma file.

The adjustments are mostly related to paddings and margins, so they adapt to Tailwind's default spacing scale, but it also introduces adjustments on some other component states, such as the disabled variant for st_multiselect.

Only added screenshots for this disabled state change because the rest of the changes are smaller and harder to compare, but let me know if you want me to add those as well!

• What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Refactoring
  • Other, please describe: Visual adjustments

🧠 Description of Changes

st.selectbox:

• Updated paddingBottom and paddingTop on VirtualDropdown
• Updated ControlContainer, IconsContainer, ValueContainer, and Popover overrides

st.multiselect:

• Added a StyleUISelect styled component, to adjust the background color for tags in disabled states for st_multiselect items
• Changes on UISelect overrides
• Added disabled tag styles on theme/utils.ts

st.text_input:

• Updated marginBottom on StyledWidgetLabel
• Updated borderWidth, padding and lineHeight on TextInput
• Updated fontSize on StyledWidgetInstructions
• Updated disabled text in theme/utils.ts

st.number_input:

• [Already updated on st.text_input]: Updated marginBottom on StyledWidgetLabel.
• Updated padding, borderWidth and lineHeight on NumberInput
• Updated CONTROLS_WIDTH and height for controls in /NumberInput/styled-components.ts

st.text_area:

• [Already updated on st.text_input]: Updated marginBottom on StyledWidgetLabel.
• Updated padding and lineHeight on TextArea
  • Created a <StyledTextAreaContainer> component, and added a rule to the newly created styled-components.ts file to override the borderWidth property

st.time_input:

• Updated selectOverrides on TimeInput mostly to adjust padding, margin and borderWidth

st.date_input:

• Updated overrides on Input nested component, mostly to adjust padding, and borderWidth

  • This is a breaking API change
  • This is a visible (user-facing) change

Revised:

Current:

🧪 Testing Done

• Screenshots included
• Added/Updated unit tests
• Added/Updated e2e tests

🌐 References

Does this depend on other work, documents, or tickets?

• https://www.notion.so/streamlit/Core-Components-padding-updates-c4f5b8800f0042c1878efbb06056157b

---

Contribution License Agreement

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

[imjuangarcia]

@willhuang1997 Thanks for approving! I don't have the privileges to merge this PR, do you need anything else from me before merging it? Thanks!

[LukasMasuch]

I did a quick check as well. Do you know why the expander is reverted back to the old version in the snapshots (referring to this update: #4801)?

https://github.com/imjuangarcia/streamlit/blob/component-updates-06012022/frontend/cypress/snapshots/linux/2x/st_expander.spec.js/expanders-in-main-dark.snap.png

[imjuangarcia]

@LukasMasuch Thanks for taking a closer look, and sorry about the st.expander snapshots. This PR changed the visuals of so many widgets, and I had to regenerate so many of them that I probably accidentally overrode them. They should be up to date now!

[LukasMasuch]

@imjuangarcia thanks for updating this! Btw. if you remove outdated snapshots and let the CI pipeline run, you can also download the updated snapshots directly from CircleCI. I also have a small script which I use to bulk download multiple screenshots at once. This is sometimes more convenient compared to other methods for updating the e2e snapshots :) :

from urllib.request import Request, urlopen
import json
from tqdm import tqdm
import os

BASE_PATH = "circle-ci-artifacts"
CIRCLE_CI_TOKEN = "<CIRCLE_CI_TOKEN>"
FILTER = "st_legacy_empty_dataframes"
CIRCLE_CI_URL = (
    "https://circleci.com/api/v1.1/project/github/streamlit/streamlit/44028/artifacts"
)

req = Request(CIRCLE_CI_URL)
req.add_header("Circle-Token", CIRCLE_CI_TOKEN)
req.add_header("Accept", "application/json")
artifacts = json.loads(urlopen(req).read().decode("utf-8"))

for artifact in tqdm(artifacts):
    path = os.path.join(BASE_PATH, artifact["path"])
    if FILTER not in path:
        continue
    req = Request(artifact["url"])
    req.add_header("Circle-Token", CIRCLE_CI_TOKEN)
    file = urlopen(req)
    os.makedirs(os.path.dirname(path), exist_ok=True)
    with open(path, "wb") as output:
        output.write(file.read())

[LukasMasuch]

I think this file was added by mistake and needs to be removed: https://github.com/streamlit/streamlit/blob/668b8514eff8c08db937e74cd4aba60bd7c31bbf/examples/run_on_save.pybak

[imjuangarcia]

@LukasMasuch Thanks for the script! It's definitively helpful. Just deleted the .pybak file as well, not sure why that's getting created when I run the example scripts...