Merge branch 'v4' into feature/dcc-refactor-textarea-tooltip

Author: KoolADE85

CHANGELOG.md

@@ -8,7 +8,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 - Dropdown API changes
     * default value of optionHeight is now 'auto' which supports text wrapping of lengthy text on small screens; you can still specify a numeric pixel height if desired
-    * new `localizations` prop to customize strings used within the component
+    * new `labels` prop to customize strings used within the component
     * default value for closeOnSelect is now `True` for single-select dropdowns and `False` for multi-select
 
 - Slider API changes

components/dash-core-components/src/components/css/sliders.css

@@ -7,12 +7,16 @@
     touch-action: none;
     width: 100%;
     height: 14px;
-    padding: 8px 0 28px 0;
+    padding: 18px 0 18px 0;
     box-sizing: border-box;
     /* Override Radix's default margin/padding behavior */
     --radix-slider-thumb-width: 16px;
 }
 
+.dash-slider-root.has-marks {
+    padding: 8px 0 28px 0;
+}
+
 .dash-slider-root[data-orientation='vertical'].has-marks {
     padding-bottom: 0px;
 }
@@ -167,7 +171,7 @@
 .dash-slider-container {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
     width: 100%;
 }
 
@@ -184,7 +188,7 @@
 }
 
 .dash-range-slider-min-input {
-    min-width: 64px;
+    text-align: center;
 }
 
 .dash-range-slider-max-input {
@@ -193,7 +197,7 @@
 
 .dash-range-slider-input {
     width: 64px;
-    margin-top: 8px;
+    text-align: center;
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: textfield;

components/dash-core-components/src/fragments/RangeSlider.tsx

@@ -166,6 +166,35 @@ export default function RangeSlider(props: RangeSliderProps) {
         });
     }, [min, max, processedMarks, step, sliderWidth]);
 
+    // Calculate dynamic input width based on digits needed and container size
+    const inputWidth = useMemo(() => {
+        if (!sliderWidth) {
+            return '64px'; // fallback to current width
+        }
+
+        // Count digits needed for min and max values
+        const maxDigits = Math.max(
+            String(Math.floor(Math.abs(minMaxValues.max_mark))).length,
+            String(Math.floor(Math.abs(minMaxValues.min_mark))).length
+        );
+
+        // Add 1 for minus sign if min is negative
+        const totalChars = maxDigits + (minMaxValues.min_mark < 0 ? 1 : 0);
+
+        // Calculate width as percentage of container (5% min, 15% max)
+        /* eslint-disable no-magic-numbers */
+        const minWidth = sliderWidth * 0.05;
+        const maxWidth = sliderWidth * 0.15;
+        const charBasedWidth = totalChars * 12; // approx 12px per character
+        /* eslint-enable no-magic-numbers */
+
+        const calculatedWidth = Math.max(
+            minWidth,
+            Math.min(maxWidth, charBasedWidth)
+        );
+        return `${calculatedWidth}px`;
+    }, [sliderWidth, minMaxValues.min_mark, minMaxValues.max_mark]);
+
     const handleValueChange = (newValue: number[]) => {
         let adjustedValue = newValue;
 
@@ -203,6 +232,7 @@ export default function RangeSlider(props: RangeSliderProps) {
                         <input
                             type="number"
                             className="dash-input-container dash-range-slider-input dash-range-slider-min-input"
+                            style={{width: inputWidth}}
                             value={value[0] ?? ''}
                             onChange={e => {
                                 const inputValue = e.target.value;
@@ -263,7 +293,8 @@ export default function RangeSlider(props: RangeSliderProps) {
                     {showInputs && !vertical && (
                         <input
                             type="number"
-                            className="dash-input-container dash-range-slider-input dash-range-slider-max-input"
+                            className="dash-input-container dash-range-slider-input  dash-range-slider-max-input"
+                            style={{width: inputWidth}}
                             value={value[value.length - 1] ?? ''}
                             onChange={e => {
                                 const inputValue = e.target.value;

components/dash-core-components/src/types.ts

@@ -416,7 +416,7 @@ export interface DropdownProps extends BaseComponentProps<DropdownProps> {
     style?: React.CSSProperties;
 
     /**
-     * Translations for customizing text contained within this component.
+     * Text for customizing the labels rendered by this component.
      */
     labels?: {
         select_all?: string;

components/dash-core-components/tests/integration/dropdown/test_localization.py

@@ -34,15 +34,16 @@ def test_ddlo001_translations(dash_duo):
         ".dash-dropdown-action-button:last-child", "Désélectionner tout"
     )
 
-    search_input = dash_duo.find_element(".dash-dropdown-search")
-    assert search_input.accessible_name == "Rechercher"
+    assert (
+        dash_duo.find_element(".dash-dropdown-search").accessible_name == "Rechercher"
+    )
 
-    search_input.send_keys(1)
+    dash_duo.find_element(".dash-dropdown-search").send_keys(1)
     assert dash_duo.find_element(".dash-dropdown-clear").accessible_name == "Annuler"
 
     dash_duo.find_element(".dash-dropdown-action-button:first-child").click()
 
-    search_input.send_keys(9)
+    dash_duo.find_element(".dash-dropdown-search").send_keys(9)
     assert dash_duo.find_element(".dash-dropdown-option").text == "Aucun d'options"
 
     assert (
@@ -80,17 +81,16 @@ def test_ddlo002_partial_translations(dash_duo):
         ".dash-dropdown-action-button:last-child", "Deselect All"
     )
 
-    search_input = dash_duo.find_element(".dash-dropdown-search")
-    assert search_input.accessible_name == "Lookup"
+    assert dash_duo.find_element(".dash-dropdown-search").accessible_name == "Lookup"
 
-    search_input.send_keys(1)
+    dash_duo.find_element(".dash-dropdown-search").send_keys(1)
     assert (
         dash_duo.find_element(".dash-dropdown-clear").accessible_name == "Clear search"
     )
 
     dash_duo.find_element(".dash-dropdown-action-button:first-child").click()
 
-    search_input.send_keys(9)
+    dash_duo.find_element(".dash-dropdown-search").send_keys(9)
     assert dash_duo.find_element(".dash-dropdown-option").text == "No options found"
 
     assert (

components/dash-core-components/tests/integration/misc/test_persistence.py

@@ -168,7 +168,7 @@ def make_output(*args):
         ["4️⃣", "6️⃣"],
         "yes maybe",
         "r",
-        [5, 9],
+        [5, 8],
         22,
         "C",
         "knock knock\nwho's there?",

components/dash-core-components/tests/integration/sliders/test_sliders.py

@@ -30,7 +30,7 @@ def update_output(value):
     dash_dcc.click_at_coord_fractions(slider, 0.5, 0.25)
     dash_dcc.wait_for_text_to_equal("#out", "You have selected 11")
     dash_dcc.click_at_coord_fractions(slider, 0.75, 0.25)
-    dash_dcc.wait_for_text_to_equal("#out", "You have selected 17")
+    dash_dcc.wait_for_text_to_equal("#out", "You have selected 16")
 
     assert dash_dcc.get_logs() == []
 
@@ -265,7 +265,7 @@ def update_output2(value):
 
     dash_dcc.click_and_hold_at_coord_fractions(slider, 0.25, 0.25)
     dash_dcc.move_to_coord_fractions(slider, 0.75, 0.25)
-    dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 17")
+    dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 16")
     dash_dcc.move_to_coord_fractions(slider, 0.5, 0.25)
     dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 11")
     dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")