streamlit · sfc-gh-tteixeira · Oct 25, 2024 · Aug 23, 2024 · Aug 24, 2024 · Aug 28, 2024
diff --git a/..._/linux/st_slider_test/st_slider-labels_overlap_slider[dark_theme-chromium].png b/..._/linux/st_slider_test/st_slider-labels_overlap_slider[dark_theme-chromium].png
diff --git a/...__/linux/st_slider_test/st_slider-labels_overlap_slider[dark_theme-firefox].png b/...__/linux/st_slider_test/st_slider-labels_overlap_slider[dark_theme-firefox].png
diff --git a/...s__/linux/st_slider_test/st_slider-labels_overlap_slider[dark_theme-webkit].png b/...s__/linux/st_slider_test/st_slider-labels_overlap_slider[dark_theme-webkit].png
diff --git a/.../linux/st_slider_test/st_slider-labels_overlap_slider[light_theme-chromium].png b/.../linux/st_slider_test/st_slider-labels_overlap_slider[light_theme-chromium].png
diff --git a/..._/linux/st_slider_test/st_slider-labels_overlap_slider[light_theme-firefox].png b/..._/linux/st_slider_test/st_slider-labels_overlap_slider[light_theme-firefox].png
diff --git a/...__/linux/st_slider_test/st_slider-labels_overlap_slider[light_theme-webkit].png b/...__/linux/st_slider_test/st_slider-labels_overlap_slider[light_theme-webkit].png
diff --git a/...napshots__/linux/st_slider_test/st_slider-overlap_left[dark_theme-chromium].png b/...napshots__/linux/st_slider_test/st_slider-overlap_left[dark_theme-chromium].png
diff --git a/...snapshots__/linux/st_slider_test/st_slider-overlap_left[dark_theme-firefox].png b/...snapshots__/linux/st_slider_test/st_slider-overlap_left[dark_theme-firefox].png
diff --git a/..._snapshots__/linux/st_slider_test/st_slider-overlap_left[dark_theme-webkit].png b/..._snapshots__/linux/st_slider_test/st_slider-overlap_left[dark_theme-webkit].png
diff --git a/...apshots__/linux/st_slider_test/st_slider-overlap_left[light_theme-chromium].png b/...apshots__/linux/st_slider_test/st_slider-overlap_left[light_theme-chromium].png
diff --git a/...napshots__/linux/st_slider_test/st_slider-overlap_left[light_theme-firefox].png b/...napshots__/linux/st_slider_test/st_slider-overlap_left[light_theme-firefox].png
diff --git a/...snapshots__/linux/st_slider_test/st_slider-overlap_left[light_theme-webkit].png b/...snapshots__/linux/st_slider_test/st_slider-overlap_left[light_theme-webkit].png
diff --git a/...s__/linux/st_slider_test/st_slider-overlap_near_center[dark_theme-chromium].png b/...s__/linux/st_slider_test/st_slider-overlap_near_center[dark_theme-chromium].png
diff --git a/...ts__/linux/st_slider_test/st_slider-overlap_near_center[dark_theme-firefox].png b/...ts__/linux/st_slider_test/st_slider-overlap_near_center[dark_theme-firefox].png
diff --git a/...ots__/linux/st_slider_test/st_slider-overlap_near_center[dark_theme-webkit].png b/...ots__/linux/st_slider_test/st_slider-overlap_near_center[dark_theme-webkit].png
diff --git a/...__/linux/st_slider_test/st_slider-overlap_near_center[light_theme-chromium].png b/...__/linux/st_slider_test/st_slider-overlap_near_center[light_theme-chromium].png
diff --git a/...s__/linux/st_slider_test/st_slider-overlap_near_center[light_theme-firefox].png b/...s__/linux/st_slider_test/st_slider-overlap_near_center[light_theme-firefox].png
diff --git a/...ts__/linux/st_slider_test/st_slider-overlap_near_center[light_theme-webkit].png b/...ts__/linux/st_slider_test/st_slider-overlap_near_center[light_theme-webkit].png
diff --git a/...ots__/linux/st_slider_test/st_slider-overlap_near_left[dark_theme-chromium].png b/...ots__/linux/st_slider_test/st_slider-overlap_near_left[dark_theme-chromium].png
diff --git a/...hots__/linux/st_slider_test/st_slider-overlap_near_left[dark_theme-firefox].png b/...hots__/linux/st_slider_test/st_slider-overlap_near_left[dark_theme-firefox].png
diff --git a/...shots__/linux/st_slider_test/st_slider-overlap_near_left[dark_theme-webkit].png b/...shots__/linux/st_slider_test/st_slider-overlap_near_left[dark_theme-webkit].png
diff --git a/...ts__/linux/st_slider_test/st_slider-overlap_near_left[light_theme-chromium].png b/...ts__/linux/st_slider_test/st_slider-overlap_near_left[light_theme-chromium].png
diff --git a/...ots__/linux/st_slider_test/st_slider-overlap_near_left[light_theme-firefox].png b/...ots__/linux/st_slider_test/st_slider-overlap_near_left[light_theme-firefox].png
diff --git a/...hots__/linux/st_slider_test/st_slider-overlap_near_left[light_theme-webkit].png b/...hots__/linux/st_slider_test/st_slider-overlap_near_left[light_theme-webkit].png
diff --git a/...ts__/linux/st_slider_test/st_slider-overlap_near_right[dark_theme-chromium].png b/...ts__/linux/st_slider_test/st_slider-overlap_near_right[dark_theme-chromium].png
diff --git a/...ots__/linux/st_slider_test/st_slider-overlap_near_right[dark_theme-firefox].png b/...ots__/linux/st_slider_test/st_slider-overlap_near_right[dark_theme-firefox].png
diff --git a/...hots__/linux/st_slider_test/st_slider-overlap_near_right[dark_theme-webkit].png b/...hots__/linux/st_slider_test/st_slider-overlap_near_right[dark_theme-webkit].png
diff --git a/...s__/linux/st_slider_test/st_slider-overlap_near_right[light_theme-chromium].png b/...s__/linux/st_slider_test/st_slider-overlap_near_right[light_theme-chromium].png
diff --git a/...ts__/linux/st_slider_test/st_slider-overlap_near_right[light_theme-firefox].png b/...ts__/linux/st_slider_test/st_slider-overlap_near_right[light_theme-firefox].png
diff --git a/...ots__/linux/st_slider_test/st_slider-overlap_near_right[light_theme-webkit].png b/...ots__/linux/st_slider_test/st_slider-overlap_near_right[light_theme-webkit].png
diff --git a/...apshots__/linux/st_slider_test/st_slider-overlap_right[dark_theme-chromium].png b/...apshots__/linux/st_slider_test/st_slider-overlap_right[dark_theme-chromium].png
diff --git a/...napshots__/linux/st_slider_test/st_slider-overlap_right[dark_theme-firefox].png b/...napshots__/linux/st_slider_test/st_slider-overlap_right[dark_theme-firefox].png
diff --git a/...snapshots__/linux/st_slider_test/st_slider-overlap_right[dark_theme-webkit].png b/...snapshots__/linux/st_slider_test/st_slider-overlap_right[dark_theme-webkit].png
diff --git a/...pshots__/linux/st_slider_test/st_slider-overlap_right[light_theme-chromium].png b/...pshots__/linux/st_slider_test/st_slider-overlap_right[light_theme-chromium].png
diff --git a/...apshots__/linux/st_slider_test/st_slider-overlap_right[light_theme-firefox].png b/...apshots__/linux/st_slider_test/st_slider-overlap_right[light_theme-firefox].png
diff --git a/...napshots__/linux/st_slider_test/st_slider-overlap_right[light_theme-webkit].png b/...napshots__/linux/st_slider_test/st_slider-overlap_right[light_theme-webkit].png
diff --git a/...s__/linux/st_slider_test/st_slider-regular_with_format[dark_theme-chromium].png b/...s__/linux/st_slider_test/st_slider-regular_with_format[dark_theme-chromium].png
diff --git a/...ts__/linux/st_slider_test/st_slider-regular_with_format[dark_theme-firefox].png b/...ts__/linux/st_slider_test/st_slider-regular_with_format[dark_theme-firefox].png
diff --git a/...ots__/linux/st_slider_test/st_slider-regular_with_format[dark_theme-webkit].png b/...ots__/linux/st_slider_test/st_slider-regular_with_format[dark_theme-webkit].png
diff --git a/...__/linux/st_slider_test/st_slider-regular_with_format[light_theme-chromium].png b/...__/linux/st_slider_test/st_slider-regular_with_format[light_theme-chromium].png
diff --git a/...s__/linux/st_slider_test/st_slider-regular_with_format[light_theme-firefox].png b/...s__/linux/st_slider_test/st_slider-regular_with_format[light_theme-firefox].png
diff --git a/...ts__/linux/st_slider_test/st_slider-regular_with_format[light_theme-webkit].png b/...ts__/linux/st_slider_test/st_slider-regular_with_format[light_theme-webkit].png
diff --git a/e2e_playwright/st_slider.py b/e2e_playwright/st_slider.py
@@ -17,19 +17,24 @@
 import streamlit as st
 from streamlit import runtime
 
+# Slider 0
 s1 = st.sidebar.slider("Label A", 0, 12345678, 12345678)
 st.sidebar.write("Value A:", s1)
 
+# Slider 1
 r1 = st.sidebar.slider("Range A", 10000, 25000, [10000, 25000])
 st.sidebar.write("Range Value A:", r1)
 
 with st.sidebar.expander("Expander", expanded=True):
+    # Slider 2
     s2 = st.slider("Label B", 10000, 25000, 10000)
     st.write("Value B:", s2)
 
+    # Slider 3
     r2 = st.slider("Range B", 10000, 25000, [10000, 25000])
     st.write("Range Value B:", r2)
 
+# Slider 4
 w1 = st.slider(
     "Label 1",
     min_value=date(2019, 8, 1),
@@ -40,9 +45,11 @@
 )
 st.write("Value 1:", w1)
 
+# Slider 5
 w2 = st.slider("Label 2", 0.0, 100.0, (25.0, 75.0), 0.5)
 st.write("Value 2:", w2)
 
+# Slider 6
 w3 = st.slider(
     "Label 3 - This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long label",
     0,
@@ -52,15 +59,19 @@
 )
 st.write("Value 3:", w3)
 
+# Slider 7
 w4 = st.slider("Label 4", 10000, 25000, 10000, disabled=True)
 st.write("Value 4:", w4)
 
+# Slider 8
 w5 = st.slider("Label 5", 0, 100, 25, 1, label_visibility="hidden")
 st.write("Value 5:", w5)
 
+# Slider 9
 w6 = st.slider("Label 6", 0, 100, 36, label_visibility="collapsed")
 st.write("Value 6:", w6)
 
+# Slider 10
 dates = st.slider(
     "Label 7",
     min_value=date(2019, 8, 1),
@@ -74,6 +85,7 @@
     def on_change():
         st.session_state.slider_changed = True
 
+    # Slider 11
     st.slider(
         "Label 8",
         min_value=0,
@@ -87,6 +99,7 @@ def on_change():
     st.write("Slider changed:", "slider_changed" in st.session_state)
 
 with st.form(key="my_form", clear_on_submit=True):
+    # Slider 12
     selection = st.slider(
         "Label 9",
         min_value=0,
@@ -102,6 +115,7 @@ def on_change():
 
 @st.fragment
 def test_fragment():
+    # Slider 13
     selection = st.slider(
         "Label 10",
         min_value=0,
@@ -121,10 +135,52 @@ def test_fragment():
 st.session_state.runs += 1
 st.write("Runs:", st.session_state.runs)
 
+# Slider 14
 slider_11_value = st.slider(
     "Slider 11 (formatted float)", value=0.05, step=0.2, format="%f%%"
 )
 st.write("Slider 11:", slider_11_value)
 
+# Slider 15
 slider_12_value = st.slider("Slider 12 (time-value)", value=time(12, 0))
 st.write("Slider 12:", slider_12_value)
+
+# Slider 16
+st.slider(
+    "Label 13 - Overlapping on the left",
+    min_value=1e6 + 0,
+    max_value=1e6 + 100,
+    value=(1e6 + 0, 1e6 + 4),
+)
+
+# Slider 17
+st.slider(
+    "Label 14 - Overlapping near the left",
+    min_value=1e6 + 0,
+    max_value=1e6 + 100,
+    value=(1e6 + 10, 1e6 + 14),
+)
+
+# Slider 18
+st.slider(
+    "Label 15 - Overlapping on the right",
+    min_value=1e6 + 0,
+    max_value=1e6 + 100,
+    value=(1e6 + 96, 1e6 + 100),
+)
+
+# Slider 19
+st.slider(
+    "Label 16 - Overlapping near the right",
+    min_value=1e6 + 0,
+    max_value=1e6 + 100,
+    value=(1e6 + 86, 1e6 + 90),
+)
+
+# Slider 20
+st.slider(
+    "Label 17 - Overlapping near the center",
+    min_value=1e6 + 0,
+    max_value=1e6 + 100,
+    value=(1e6 + 48, 1e6 + 52),
+)
diff --git a/e2e_playwright/st_slider_test.py b/e2e_playwright/st_slider_test.py
@@ -28,14 +28,19 @@
 
 def test_slider_rendering(themed_app: Page, assert_snapshot: ImageCompareFunction):
     st_sliders = themed_app.get_by_test_id("stSlider")
-    expect(st_sliders).to_have_count(16)
+    expect(st_sliders).to_have_count(21)
 
     assert_snapshot(st_sliders.nth(4), name="st_slider-regular_with_format")
     assert_snapshot(st_sliders.nth(7), name="st_slider-disabled")
     assert_snapshot(st_sliders.nth(8), name="st_slider-hidden_label")
     assert_snapshot(st_sliders.nth(9), name="st_slider-label_collapsed")
     assert_snapshot(st_sliders.nth(10), name="st_slider-labels_overlap_slider")
     assert_snapshot(st_sliders.nth(15), name="st_slider-time_value")
+    assert_snapshot(st_sliders.nth(16), name="st_slider-overlap_left")
+    assert_snapshot(st_sliders.nth(17), name="st_slider-overlap_near_left")
+    assert_snapshot(st_sliders.nth(18), name="st_slider-overlap_right")
+    assert_snapshot(st_sliders.nth(19), name="st_slider-overlap_near_right")
+    assert_snapshot(st_sliders.nth(20), name="st_slider-overlap_near_center")
 
 
 def test_help_tooltip_works(app: Page):

diff --git a/frontend/lib/src/components/elements/DeckGlJsonChart/DeckGlJsonChart.test.tsx b/frontend/lib/src/components/elements/DeckGlJsonChart/DeckGlJsonChart.test.tsx
@@ -380,15 +380,15 @@ describe("#useDeckGl", () => {
       expect(result.current.hasActiveSelection).toBe(false)
     })
 
-    it("should be true when selection is not empty", async () => {
+    it("should be true when selection is not empty", () => {
       const initialProps = getUseDeckGlProps({
         selectionMode: [DeckGlJsonChartProto.SelectionMode.SINGLE_OBJECT],
       })
       const { result, rerender } = renderHook(props => useDeckGl(props), {
         initialProps,
       })
 
-      await act(async () => {
+      act(() => {
         result.current.setSelection({
           fromUi: true,
           value: {

diff --git a/frontend/lib/src/components/elements/DeckGlJsonChart/useDeckGl.tsx b/frontend/lib/src/components/elements/DeckGlJsonChart/useDeckGl.tsx
@@ -27,7 +27,7 @@ import { EmotionTheme } from "@streamlit/lib/src/theme"
 import { DeckGlJsonChart as DeckGlJsonChartProto } from "@streamlit/lib/src/proto"
 import {
   useBasicWidgetClientState,
-  ValueWSource,
+  ValueWithSource,
 } from "@streamlit/lib/src/useBasicWidgetState"
 import { WidgetStateManager } from "@streamlit/lib/src/WidgetStateManager"
 import { useRequiredContext } from "@streamlit/lib/src/hooks/useRequiredContext"
@@ -56,7 +56,7 @@ type UseDeckGlShape = {
   onViewStateChange: (params: ViewStateChangeParameters) => void
   selectionMode: DeckGlJsonChartProto.SelectionMode | undefined
   setSelection: React.Dispatch<
-    React.SetStateAction<ValueWSource<DeckGlElementState> | null>
+    React.SetStateAction<ValueWithSource<DeckGlElementState> | null>
   >
   viewState: Record<string, unknown>
   width: number | string
@@ -139,7 +139,7 @@ function getStateFromWidgetMgr(
 function updateWidgetMgrState(
   element: DeckGlJsonChartProto,
   widgetMgr: WidgetStateManager,
-  vws: ValueWSource<DeckGlElementState>,
+  vws: ValueWithSource<DeckGlElementState>,
   fragmentId?: string
 ): void {
   if (!element.id) {

diff --git a/frontend/lib/src/components/widgets/ButtonGroup/ButtonGroup.tsx b/frontend/lib/src/components/widgets/ButtonGroup/ButtonGroup.tsx
@@ -47,7 +47,7 @@ import { Placement } from "@streamlit/lib/src/components/shared/Tooltip"
 import { labelVisibilityProtoValueToEnum } from "@streamlit/lib/src/util/utils"
 import {
   useBasicWidgetState,
-  ValueWSource,
+  ValueWithSource,
 } from "@streamlit/lib/src/useBasicWidgetState"
 
 export interface Props {
@@ -90,7 +90,7 @@ function getSingleSelection(currentSelection: number[]): number {
 function syncWithWidgetManager(
   element: ButtonGroupProto,
   widgetMgr: WidgetStateManager,
-  valueWithSource: ValueWSource<ButtonGroupValue>,
+  valueWithSource: ValueWithSource<ButtonGroupValue>,
   fragmentId?: string
 ): void {
   widgetMgr.setIntArrayValue(
@@ -291,7 +291,7 @@ function ButtonGroup(props: Readonly<Props>): ReactElement {
   } = element
   const theme: EmotionTheme = useTheme()
 
-  const [value, setValueWSource] = useBasicWidgetState<
+  const [value, setValueWithSource] = useBasicWidgetState<
     ButtonGroupValue,
     ButtonGroupProto
   >({
@@ -309,7 +309,7 @@ function ButtonGroup(props: Readonly<Props>): ReactElement {
     index: number
   ): void => {
     const newSelected = handleSelection(clickMode, index, value)
-    setValueWSource({ value: newSelected, fromUi: true })
+    setValueWithSource({ value: newSelected, fromUi: true })
   }
 
   let mode = undefined

diff --git a/frontend/lib/src/components/widgets/Checkbox/Checkbox.test.tsx b/frontend/lib/src/components/widgets/Checkbox/Checkbox.test.tsx
@@ -157,7 +157,7 @@ describe("Checkbox widget", () => {
     )
   })
 
-  it("resets its value when form is cleared", async () => {
+  it("resets its value when form is cleared", () => {
     // Create a widget in a clearOnSubmit form
     const props = getProps({ formId: "form" })
     props.widgetMgr.setFormSubmitBehaviors("form", true)
@@ -178,7 +178,7 @@ describe("Checkbox widget", () => {
     )
 
     // "Submit" the form
-    await act(() => {
+    act(() => {
       props.widgetMgr.submitForm("form", undefined)
     })
 

diff --git a/frontend/lib/src/components/widgets/Checkbox/Checkbox.tsx b/frontend/lib/src/components/widgets/Checkbox/Checkbox.tsx
@@ -29,7 +29,7 @@ import { Checkbox as CheckboxProto } from "@streamlit/lib/src/proto"
 import { WidgetStateManager } from "@streamlit/lib/src/WidgetStateManager"
 import {
   useBasicWidgetState,
-  ValueWSource,
+  ValueWithSource,
 } from "@streamlit/lib/src/useBasicWidgetState"
 import { hasLightBackgroundColor } from "@streamlit/lib/src/theme"
 import TooltipIcon from "@streamlit/lib/src/components/shared/TooltipIcon"
@@ -54,23 +54,25 @@ function Checkbox({
   widgetMgr,
   fragmentId,
 }: Readonly<Props>): ReactElement {
-  const [value, setValueWSource] = useBasicWidgetState<boolean, CheckboxProto>(
-    {
-      getStateFromWidgetMgr,
-      getDefaultStateFromProto,
-      getCurrStateFromProto,
-      updateWidgetMgrState,
-      element,
-      widgetMgr,
-      fragmentId,
-    }
-  )
+  const [value, setValueWithSource] = useBasicWidgetState<
+    boolean,
+    CheckboxProto
+  >({
+    getStateFromWidgetMgr,
+    getDefaultStateFromProto,
+    getCurrStateFromProto,
+    updateWidgetMgrState,
+    element,
+    widgetMgr,
+    fragmentId,
+  })
 
   const onChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>): void => {
-      setValueWSource({ value: e.target.checked, fromUi: true })
+      setValueWithSource({ value: e.target.checked, fromUi: true })
     },
-    [setValueWSource]
+    // ESLint complains if we remove this unnecessary dep.
+    [setValueWithSource]
   )
 
   const theme = useTheme()
@@ -251,7 +253,7 @@ function getCurrStateFromProto(element: CheckboxProto): boolean {
 function updateWidgetMgrState(
   element: CheckboxProto,
   widgetMgr: WidgetStateManager,
-  vws: ValueWSource<boolean>,
+  vws: ValueWithSource<boolean>,
   fragmentId?: string
 ): void {
   widgetMgr.setBoolValue(

diff --git a/frontend/lib/src/components/widgets/ColorPicker/ColorPicker.test.tsx b/frontend/lib/src/components/widgets/ColorPicker/ColorPicker.test.tsx
@@ -118,7 +118,7 @@ describe("ColorPicker widget", () => {
     )
   })
 
-  it("resets its value when form is cleared", async () => {
+  it("resets its value when form is cleared", () => {
     // Create a widget in a clearOnSubmit form
     const props = getProps({ formId: "form" })
     jest.spyOn(props.widgetMgr, "setStringValue")
@@ -146,7 +146,7 @@ describe("ColorPicker widget", () => {
       undefined
     )
 
-    await act(async () => {
+    act(() => {
       // "Submit" the form
       props.widgetMgr.submitForm("form", undefined)
     })

diff --git a/frontend/lib/src/components/widgets/ColorPicker/ColorPicker.tsx b/frontend/lib/src/components/widgets/ColorPicker/ColorPicker.tsx
@@ -14,15 +14,15 @@
  * limitations under the License.
  */
 
-import React, { FC, useCallback } from "react"
+import React, { FC, memo, useCallback } from "react"
 
 import { ColorPicker as ColorPickerProto } from "@streamlit/lib/src/proto"
 import { WidgetStateManager } from "@streamlit/lib/src/WidgetStateManager"
 import BaseColorPicker from "@streamlit/lib/src/components/shared/BaseColorPicker"
 import { labelVisibilityProtoValueToEnum } from "@streamlit/lib/src/util/utils"
 import {
   useBasicWidgetState,
-  ValueWSource,
+  ValueWithSource,
 } from "@streamlit/lib/src/useBasicWidgetState"
 
 export interface Props {
@@ -61,7 +61,7 @@ const getCurrStateFromProto = (
 const updateWidgetMgrState = (
   element: ColorPickerProto,
   widgetMgr: WidgetStateManager,
-  valueWithSource: ValueWSource<ColorPickerValue>,
+  valueWithSource: ValueWithSource<ColorPickerValue>,
   fragmentId?: string
 ): void => {
   widgetMgr.setStringValue(
@@ -79,7 +79,7 @@ const ColorPicker: FC<Props> = ({
   width,
   fragmentId,
 }) => {
-  const [value, setValueWSource] = useBasicWidgetState<
+  const [value, setValueWithSource] = useBasicWidgetState<
     ColorPickerValue,
     ColorPickerProto
   >({
@@ -94,9 +94,9 @@ const ColorPicker: FC<Props> = ({
 
   const handleColorClose = useCallback(
     (color: string): void => {
-      setValueWSource({ value: color, fromUi: true })
+      setValueWithSource({ value: color, fromUi: true })
     },
-    [setValueWSource]
+    [setValueWithSource]
   )
 
   return (
@@ -114,4 +114,4 @@ const ColorPicker: FC<Props> = ({
   )
 }
 
-export default ColorPicker
+export default memo(ColorPicker)