Visual design tweaks #3642

tvst · 2021-08-02T17:45:00Z

Except for some updates to how tables/dataframes look, everything else could even go unnoticed by distracted viewers.

If you're on Notion, you can find a wheel file here

Changes

New fonts!
- We also no longer ship fonts with Streamlit, but use fallbacks instead.
New font sizes and weights for headers
New table and dataframe design
Numbers in Arrow tables are right-aligned, and everything else if left-aligned
Tooltip now has same color as background
No more Streamlit pink. Now we use Streamlit red. Pink was marked as deprecated in our Brand page for a while, and this is just the last nail!
Arrow Table now also aligns number-typed columns to the right (like Arrow DataFrame)
Unified all small fonts to the same size (we used to have two sizes of small font, for some reason, and they were just ~1px off from each other)
Make anchor/fullscreen/copy-to-clipboard floating icons use the same colors and animation. Also, improve the animation a bit!
Make st.text and st.json use normal-size font (instead of small)
Make vega-lite charts use small font (instead of an extremely tiny font it was using before)
Make code syntax highlighting match our brand colors (tested on light and dark theme. Some small issues with legibility, but no worse than today)
Checkbox in Settings page uses Streamlit colors
Tooltip uses small text
Tooltip padding for status area matches tooltip padding elsewhere
Make it so when a widget doesn't have a label we don't add the empty label to the DOM.
- This fixes a problem with the settings page, where the selectbox had a bunch of padding above it because it had no label.
- Tim touched on this a few months ago, and I verified that my change continues to address the original bug correctly (by trying the bug's toy example)

- Use "Source * Pro" fonts - No longer ship fonts with Streamlit, but use fallback instead. - Update header sizes and weights - Update text color - Update table and dataframe designs - Make tooltip follow bg color

…ing scrolling

…means no DOM element drawn.

tvst · 2021-08-03T14:57:18Z

frontend/src/components/shared/Radio/Radio.tsx

-            )}
-          </StyledWidgetLabel>
-        ) : null}
+        <WidgetLabel visible={!!label}>


I removed help from here. No other widget did this, really, and it can only impact our own usage of Radio anyway since label is never falsy when coming from the Python side.

Plus we don't actually use Radio ourselves, and if we ever do we shouldn't have the combination of no label + help, as that would be visually strange.

kmcgrady

Found two bugs that exist today in my pass, and have a few questions/thoughts.

I see an issue with the dataframe ellipsis.

kmcgrady · 2021-08-02T23:07:15Z

frontend/public/index.html

+      href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+


This essentially prevents people from working with streamlit locally without an internet connection right? Should we be merging this into the codebase as font files?

kmcgrady · 2021-08-02T23:09:53Z

frontend/src/assets/css/variables.scss

-// 1rem == 16px
-// (Can't set actual pixels here because it breaks reboot)
-$font-size-base: 1rem;
+$font-size-base: 17px;


Concerned about the comment removed that says can't set actual pixels here because it breaks reboot?

I say this because we often want the number to be highly divisible. It makes the REM to px computation more predictable.

kmcgrady · 2021-08-02T23:21:22Z

frontend/src/components/elements/ArrowDataFrame/styled-components.ts

  "& .table-top-right": {
-    overflowX: "hidden",
-    backgroundColor: theme.colors.secondaryBg,
+    overflow: "hidden !important",


Hmmmm. I don't think we are using !important properly here. What's accidentally overriding it?

kmcgrady · 2021-08-02T23:24:43Z

frontend/src/components/elements/ArrowDataFrame/styled-components.ts

+  borderBottom: `1px solid ${theme.colors.fadedText10}`,
+  borderRight: `1px solid ${theme.colors.fadedText10}`,
+  fontSize: theme.fontSizes.md,
+  fontFamily: theme.fonts.sansSerif,


Should this be theme.genericFonts.bodyFont to be themeable?

kmcgrady · 2021-08-02T23:25:23Z

frontend/src/components/elements/ArrowTable/styled-components.ts

-  textAlign: "right",
-  padding: theme.spacing.sm,
+  fontSize: theme.fontSizes.md,
+  fontFamily: theme.fonts.sansSerif,


Same here. theme.genericFonts.bodyFont ?

kmcgrady · 2021-08-03T16:35:19Z

frontend/src/components/core/StreamlitDialog/styled-components.ts

  paddingBottom: 0,
  paddingTop: 0,
  marginBottom: 0,
-  marginTop: 0,
-  lineHeight: 1.25,
+  marginTop: "0 !important",


Curious where you see the !important needed here? Is this not being respected here?

kmcgrady · 2021-08-03T16:37:27Z

frontend/src/components/core/StreamlitDialog/styled-components.ts

@@ -105,6 +109,36 @@ export const StyledHr = styled.hr(({ theme }) => ({

 export const StyledCheckbox = styled.input(({ theme }) => ({
  marginRight: theme.spacing.xs,
+  appearance: "none",


Not a big deal, but are we essentially looking to align these to the checkbox widget? It's close but we might be able to make that better.

kmcgrady · 2021-08-03T16:57:12Z

frontend/src/components/elements/ArrowTable/ArrowTable.tsx

@@ -44,7 +44,11 @@ export function ArrowTable(props: TableProps): ReactElement {
    <StyledTableContainer data-testid="stTable">
      {cssStyles && <style>{cssStyles}</style>}
      <StyledTable id={cssId}>
-        {caption && <caption>{caption}</caption>}
+        {caption && (
+          <caption>


Any reason we don't just use a styled component for StyledCaption. I think this would be a misuse of the small tag for accessibility reasons.

In HTML5 it is acceptable to use the tag to denote things like disclaimers, caveats, legal restrictions, or copyrights

kmcgrady · 2021-08-03T17:04:26Z

frontend/src/components/widgets/Multiselect/Multiselect.tsx

@@ -197,7 +197,7 @@ class Multiselect extends React.PureComponent<Props, State> {

    return (
      <div className="row-widget stMultiSelect" style={style}>
-        <StyledWidgetLabel>
+        <WidgetLabel visible={!!element.label}>


I remember we had issues with vertical alignment for elements that had a label and those that don't. This should be addressed.

Current release:

kmcgrady · 2021-08-03T17:06:29Z

frontend/src/theme/primitives/typography.ts

  md: "1rem",
  lg: "1.25rem",
  xl: "1.5rem",
  twoXL: "1.75rem",
  threeXL: "2.25rem",
  fourXL: "3.125rem",
+
+  smNoUnits: 14, // 0.823rem with $font-size-base=17px


Really it's 13.991, right? I'm a little nervous at all this complex number of pixels. They present off rounding values that could make weird appearances.

vdonato · 2021-08-04T01:16:58Z

frontend/src/components/core/StreamlitDialog/styled-components.ts

+  width: theme.fontSizes.md,
+  height: theme.fontSizes.md,


Should this be theme.spacing.md?

vdonato · 2021-08-04T01:58:44Z

frontend/src/components/widgets/TimeInput/TimeInput.tsx

    return (
      <div className="stTimeInput" style={style}>
-        <StyledWidgetLabel>
+        <WidgetLabel visible={!!element.label}>


Hm, I think it's a rare use case, but it is possible for a widget coming from Python to have a falsy label since the empty string is falsy in JS.

It also seems like there's at least a bit of contention around what the right behavior here is. Some users don't want the extra padding (#3603), but it was originally intentionally added to ensure that widget alignment is consistent even for widgets with no label (#3071).

kinghuang · 2021-08-04T15:18:22Z

I see that this MR switches the fonts from IBM Plex * to Source * Pro. I've been using IBM Plex Sans Condensed heavily in my custom components to display high density text (#3588).

Is there any chance Streamlit can choose a font family that has a condensed font? The Source * Pro family doesn't have a condensed variant.

tvst · 2021-08-09T02:49:55Z

Closing this and breaking into multiple PRs, as requested offline.

tvst added 30 commits July 13, 2021 00:49

Numerous style changes:

918efa0

- Use "Source * Pro" fonts - No longer ship fonts with Streamlit, but use fallback instead. - Update header sizes and weights - Update text color - Update table and dataframe designs - Make tooltip follow bg color

Merge remote-tracking branch 'remote/develop' into visualdesign

2697040

Improve how tables/DFs look, including the Arrow versions, and includ…

94f8f0d

…ing scrolling

For arrow dataframes, left-align everything, but right-align numbers

aff072b

Merge remote-tracking branch 'remote/develop' into visualdesign

9a64de7

Merge remote-tracking branch 'remote/develop' into visualdesign

5771cd0

Merge remote-tracking branch 'origin/visualdesign' into visualdesign

8b3b63a

Improve how headers look in the settings dialog

f50c285

Lint

b61cbad

Merge remote-tracking branch 'origin/visualdesign' into visualdesign

91f2e3f

Fix arrow datatype in ArrowDataFrame (broken in 5f4e710)

6b644ca

Remove weird padding outside tables

efbe0dd

Make arrow table align numbers to the right

913bc80

Pin font size.

d388c8f

Make anchor and fullscreen buttons nicer looking

595db80

If shared components have no label, don't add label elements to DOM.

c08c457

Make *all* widgets have the same no-label behavior, where label=null …

2c5f2ca

…means no DOM element drawn.

Unify sm font sizes and set html font to 16px

c9ef947

Make st.json font bigger

6bb3a2e

Bump base font size to 17px, since new font family is a little smaller.

3172bbe

Fix mnist example.

32dc0f1

Fix Vega-Lite font sizes

ef6146b

Improve codeblock copy animation. Also fullscreen and anchor.

741de86

Improve syntax highlighting colors in code blocks

d5b6bfa

Improve tooltip styles

2503dde

Fix small interaction issues: focus, select, etc

5a881ce

Get rid of StreamlitPink

ddb7e7c

Make settings dialog checkbox follow theme.

9b5e725

Add slight border radius to expander

aa4c791

Merge remote-tracking branch 'remote/develop' into visualdesign

2592d91

tvst added 7 commits August 2, 2021 22:13

Set line height on status widget for better centering

bda1e42

Make table captions better match other captions

5a6e590

Improve how empty arrow dataframes look

edb80d5

Update screenshots

5365ae7

Update more tests

762469e

Make shared widgets also use <WidgetLabel>

85ba083

Update more snapshots

caa4763

kinghuang mentioned this pull request Aug 3, 2021

Interactive widgets should not output labels if label argument is an empty string #3603

Closed

tvst commented Aug 3, 2021

View reviewed changes

Merge remote-tracking branch 'origin/develop' into visualdesign

db8fe46

kmcgrady requested changes Aug 3, 2021

View reviewed changes

vdonato reviewed Aug 4, 2021

View reviewed changes

tvst added 3 commits August 6, 2021 15:05

Tests

11fe15d

Merge remote-tracking branch 'remote/develop' into visualdesign

039514f

Merge remote-tracking branch 'tvst/visualdesign' into visualdesign

aee13cc

tvst closed this Aug 9, 2021

This was referenced Sep 3, 2021

UI tweaks #8: Status widget improvements #3758

Merged

UI tweaks #9: Teeny tiny tooltip improvements #3759

Merged

UI tweaks #10: Tweak <code> syntax highlighting #3760

Merged

UI tweaks #11: teeny tiny scrollbar and button improvements #3761

Merged

Visual design tweaks #3642

Visual design tweaks #3642

Uh oh!

Conversation

tvst commented Aug 2, 2021

Changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kmcgrady left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kinghuang commented Aug 4, 2021

Uh oh!

tvst commented Aug 9, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants