📚 Context

Many months ago, I was working on visual updates for Streamlit and found that Block.tsx needed a little cleaning up. I proposed this on Slack and was OKed to pursue it. At the time, I sent out an early PR to show the work I was talking about #3583 , but never finished it. So this is me finally doing the last bit of work on that.

• What kind of change does this PR introduce?

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

🧠 Description of Changes

• This is mostly a refactor of Block.tsx into several React components, rather than 1 component plus several bespoke functions. This way we end up with a more canonical React-style code, with better use of React's DOM diffing, no need to pass keys around, and (I think!) much easier to read.

• This also makes it so we only ever need an <AutoSizer> component when we have a <VerticalBlock>, because that's the only kind of component that holds Streamlit elements directly (and elements are the only things that need to know their widths, so they need the autosizer).

• This also cleans up the way we used to insert vertical padding between consecutive elements in an app. This vertical space used to live all over the place (forms, expandable, containers, blocks) but now it's been unified to only live at StyledVerticalBlock.

• Finally, this removes a stray parenthesis in ThemedApp.tsx

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

Revised:

Insert screenshot of your updated UI/code here

Current:

Insert screenshot of existing UI/code here

🧪 Testing Done

• [N/A] Screenshots included
• Added/Updated unit tests
• [N/A] Added/Updated e2e tests

🌐 References

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

Contribution License Agreement

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