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/Tooltip.react.js

@@ -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/components/css/sliders.css

@@ -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/fragments/RangeSlider.tsx

@@ -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;