Assorted visual tweaks (streamlit#7050)

* Update link color

* Update sidebar bottom padding

* Hide number input controls when size is too small

* Remove tests

* Add new JS test for small number inputs

* Update e2e tests

* Add missing number input tests

* Update number input test

* Override link color for a tag as well in globalStyles

* Add modal snapshots

* Move breakpoint value to primitives file

* Update number input test

* Revert global change for links

e2e/scripts/st_number_input.py

@@ -47,3 +47,9 @@ def on_change():
     st.number_input("number input 9", key="number_input9", on_change=on_change)
     st.write('value 9: "', st.session_state.number_input9, '"')
     st.write("number input changed:", "number_input_changed" in st.session_state)
+
+[col1, col2, col3, col4, col5, col6] = st.columns(6)
+
+with col1:
+    i10 = st.number_input("number input 10", max_value=10)
+    st.write('value 10: "', i10, '"')

e2e/specs/st_number_input.spec.js

@@ -22,7 +22,7 @@ describe("st.number_input", () => {
   });
 
   it("shows widget correctly", () => {
-    cy.get(".stNumberInput").should("have.length", 9);
+    cy.get(".stNumberInput").should("have.length", 10);
 
     cy.get(".stNumberInput").each((el, idx) => {
       // @ts-expect-error
@@ -42,7 +42,8 @@ describe("st.number_input", () => {
         'value 7: " 0.0 "' +
         'value 8: " 0.0 "' +
         'value 9: " 0.0 "' +
-        "number input changed: False"
+        "number input changed: False" +
+        'value 10: " 0 "'
     );
   });
 
@@ -76,7 +77,8 @@ describe("st.number_input", () => {
         'value 7: " 0.0 "' +
         'value 8: " 0.0 "' +
         'value 9: " 0.0 "' +
-        "number input changed: False"
+        "number input changed: False" +
+        'value 10: " 0 "'
     );
   });
 
@@ -98,7 +100,8 @@ describe("st.number_input", () => {
         'value 7: " 0.0 "' +
         'value 8: " 0.0 "' +
         'value 9: " 0.0 "' +
-        "number input changed: False"
+        "number input changed: False" +
+        'value 10: " 0 "'
     );
   });
 
@@ -126,7 +129,8 @@ describe("st.number_input", () => {
         'value 7: " 0.01 "' +
         'value 8: " 0.01 "' +
         'value 9: " 0.01 "' +
-        "number input changed: True"
+        "number input changed: True" +
+        'value 10: " 0 "'
     );
   });
 
@@ -146,7 +150,8 @@ describe("st.number_input", () => {
         'value 7: " 0.0 "' +
         'value 8: " 0.0 "' +
         'value 9: " 0.0 "' +
-        "number input changed: False"
+        "number input changed: False" +
+        'value 10: " 0 "'
     );
   });
 });

frontend/app/src/components/Sidebar/styled-components.ts

@@ -243,7 +243,7 @@ export const StyledSidebarUserContent =
     paddingTop: hasPageNavAbove
       ? theme.spacing.lg
       : theme.sizes.sidebarTopSpace,
-    paddingBottom: theme.spacing.twoXL,
+    paddingBottom: theme.sizes.sidebarTopSpace,
     paddingLeft: theme.spacing.lg,
     paddingRight: theme.spacing.lg,
 

frontend/app/src/components/StreamlitDialog/StreamlitDialog.tsx

@@ -44,6 +44,7 @@ import {
   StyledCommandLine,
   StyledDeployErrorContent,
   StyledAboutInfo,
+  StyledAboutLink,
 } from "./styled-components"
 
 export type PlainEventHandler = () => void
@@ -172,7 +173,9 @@ function aboutDialog(props: AboutProps): ReactElement {
               <br />
             </>
           )}
-          <a href={STREAMLIT_HOME_URL}>{STREAMLIT_HOME_URL}</a>
+          <StyledAboutLink href={STREAMLIT_HOME_URL}>
+            {STREAMLIT_HOME_URL}
+          </StyledAboutLink>
           <br />
           Copyright {new Date().getFullYear()} Snowflake Inc. All rights
           reserved.

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

@@ -16,6 +16,7 @@
 
 import styled from "@emotion/styled"
 import { ChevronLeft } from "react-feather"
+import { darken } from "color2k"
 import { Small } from "@streamlit/lib"
 
 export const StyledRerunHeader = styled.div(({ theme }) => ({
@@ -149,3 +150,11 @@ export const StyledAboutInfo = styled.div(() => ({
   padding: "0 0 1rem 0",
   overflowY: "scroll",
 }))
+
+export const StyledAboutLink = styled.a(({ theme }) => ({
+  color: `${theme.colors.linkText} !important`,
+
+  "&:hover": {
+    color: `${darken(theme.colors.linkText, 0.15)} !important`,
+  },
+}))

frontend/lib/src/components/widgets/NumberInput/NumberInput.test.tsx

@@ -21,6 +21,7 @@ import {
 } from "@streamlit/lib/src/proto"
 import React from "react"
 import { mount, shallow } from "@streamlit/lib/src/test_util"
+import { StyledInputControls } from "@streamlit/lib/src/components/widgets/NumberInput/styled-components"
 import { Input as UIInput } from "baseui/input"
 import { WidgetStateManager } from "@streamlit/lib/src/WidgetStateManager"
 
@@ -33,7 +34,7 @@ const getProps = (elementProps: Partial<NumberInputProto> = {}): Props => ({
     hasMax: false,
     ...elementProps,
   }),
-  width: 0,
+  width: 300,
   disabled: false,
   widgetMgr: new WidgetStateManager({
     sendRerunBackMsg: jest.fn(),
@@ -452,5 +453,19 @@ describe("NumberInput widget", () => {
       expect(wrapper.state("value")).toBe(2)
       expect(stepUpButton(wrapper).prop("disabled")).toBe(true)
     })
+
+    it("hides stepUp and stepDown buttons when width is smaller than 120px", () => {
+      const props = getIntProps({ default: 1, step: 1, max: 2, hasMax: true })
+      const wrapper = shallow(<NumberInput {...props} width={100} />)
+
+      expect(wrapper.find(StyledInputControls).exists()).toBe(false)
+    })
+
+    it("shows stepUp and stepDown buttons when width is bigger than 120px", () => {
+      const props = getIntProps({ default: 1, step: 1, max: 2, hasMax: true })
+      const wrapper = shallow(<NumberInput {...props} width={125} />)
+
+      expect(wrapper.find(StyledInputControls).exists()).toBe(true)
+    })
   })
 })

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

@@ -20,6 +20,7 @@ import { sprintf } from "sprintf-js"
 import { FormClearHelper } from "@streamlit/lib/src/components/widgets/Form"
 import { logWarning } from "@streamlit/lib/src/util/log"
 import { NumberInput as NumberInputProto } from "@streamlit/lib/src/proto"
+import { breakpoints } from "@streamlit/lib/src/theme/primitives/breakpoints"
 import {
   WidgetStateManager,
   Source,
@@ -410,30 +411,34 @@ class NumberInput extends React.PureComponent<Props, State> {
               },
             }}
           />
-          <StyledInputControls>
-            <StyledInputControl
-              className="step-down"
-              onClick={this.modifyValueUsingStep("decrement")}
-              disabled={disableDecrement}
-            >
-              <Icon
-                content={Minus}
-                size="xs"
-                color={this.canDecrement ? "inherit" : "disabled"}
-              />
-            </StyledInputControl>
-            <StyledInputControl
-              className="step-up"
-              onClick={this.modifyValueUsingStep("increment")}
-              disabled={disableIncrement}
-            >
-              <Icon
-                content={Plus}
-                size="xs"
-                color={this.canIncrement ? "inherit" : "disabled"}
-              />
-            </StyledInputControl>
-          </StyledInputControls>
+
+          {/* We only want to show the increment/decrement controls when there is sufficient room to display the value and these controls. */}
+          {width > breakpoints.numberInputControls && (
+            <StyledInputControls>
+              <StyledInputControl
+                className="step-down"
+                onClick={this.modifyValueUsingStep("decrement")}
+                disabled={disableDecrement}
+              >
+                <Icon
+                  content={Minus}
+                  size="xs"
+                  color={this.canDecrement ? "inherit" : "disabled"}
+                />
+              </StyledInputControl>
+              <StyledInputControl
+                className="step-up"
+                onClick={this.modifyValueUsingStep("increment")}
+                disabled={disableIncrement}
+              >
+                <Icon
+                  content={Plus}
+                  size="xs"
+                  color={this.canIncrement ? "inherit" : "disabled"}
+                />
+              </StyledInputControl>
+            </StyledInputControls>
+          )}
         </StyledInputContainer>
         <StyledInstructionsContainer>
           <InputInstructions

frontend/lib/src/theme/primitives/breakpoints.ts

@@ -16,6 +16,9 @@
 
 export const breakpoints = {
   toast: "68px",
+  // This value is used to determine whether we should show/hide the - and + buttons in st.number_input.
+  // We use 120px because at ~100px three-digit numbers (like 0.00) start to be hidden by these controls.
+  numberInputControls: 120,
   sm: "576px",
   columns: "640px",
   md: "768px",