dcc redesign: accumulated bugfixes

CHANGELOG.md

@@ -2,6 +2,18 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## UNRELEASED
+
+## Changed
+
+- 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
+    * default value for closeOnSelect is now `True` for single-select dropdowns and `False` for multi-select
+
+- Slider API changes
+    * default value of `step` is now only set to `1` if the `min` and `max` props are both integers. Otherwise, it will be dynamically computed according to the available space for the slider
+
 ## [4.0.0rc1] - 2025-09-22
 
 ## Added

components/dash-core-components/src/components/Dropdown.tsx

@@ -1,9 +1,19 @@
-import React, {Component, lazy, Suspense} from 'react';
+import React, {lazy, Suspense} from 'react';
 import {DropdownProps, PersistedProps, PersistenceTypes} from '../types';
 import dropdown from '../utils/LazyLoader/dropdown';
 
 const RealDropdown = lazy(dropdown);
 
+const defaultLocalizations: DropdownProps['localizations'] = {
+    select_all: 'Select All',
+    deselect_all: 'Deselect All',
+    selected_count: '{num_selected} selected',
+    search: 'Search',
+    clear_search: 'Clear search',
+    clear_selection: 'Clear selection',
+    no_options_found: 'No options found',
+};
+
 /**
  * Dropdown is an interactive dropdown element for selecting one or more
  * items.
@@ -19,8 +29,8 @@ export default function Dropdown({
     disabled = false,
     multi = false,
     searchable = true,
-    // eslint-disable-next-line no-magic-numbers
-    optionHeight = 36,
+    localizations = defaultLocalizations,
+    optionHeight = 'auto',
     // eslint-disable-next-line no-magic-numbers
     maxHeight = 200,
     closeOnSelect = !multi,
@@ -30,11 +40,17 @@ export default function Dropdown({
     persistence_type = PersistenceTypes.local,
     ...props
 }: DropdownProps) {
+    localizations = {
+        ...defaultLocalizations,
+        ...localizations,
+    };
+
     return (
         <Suspense fallback={null}>
             <RealDropdown
                 clearable={clearable}
                 disabled={disabled}
+                localizations={localizations}
                 multi={multi}
                 searchable={searchable}
                 optionHeight={optionHeight}

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

@@ -24,7 +24,11 @@ export default function RangeSlider({
     // Some considerations for the default value of `step`:
     // If the range consists of integers, default to a value of `1`
     // Otherwise, leave it undefined
-    if (Number.isInteger(props.min) && Number.isInteger(props.max)) {
+    if (
+        typeof step === 'undefined' &&
+        Number.isInteger(props.min) &&
+        Number.isInteger(props.max)
+    ) {
         step = 1;
     }
 

components/dash-core-components/src/components/Slider.tsx

@@ -22,7 +22,7 @@ export default function Slider({
     persistence_type = PersistenceTypes.local,
     // eslint-disable-next-line no-magic-numbers
     verticalHeight = 400,
-    step = 1,
+    step = undefined,
     setProps,
     value,
     drag_value,
@@ -31,6 +31,17 @@ export default function Slider({
     // This is actually a wrapper around a RangeSlider.
     // We'll modify key `Slider` props to be compatible with a Range Slider.
 
+    // Some considerations for the default value of `step`:
+    // If the range consists of integers, default to a value of `1`
+    // Otherwise, leave it undefined
+    if (
+        typeof step === 'undefined' &&
+        Number.isInteger(props.min) &&
+        Number.isInteger(props.max)
+    ) {
+        step = 1;
+    }
+
     const mappedValue: RangeSliderProps['value'] = useMemo(() => {
         return typeof value === 'number' ? [value] : value;
     }, [value]);

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

@@ -1,6 +1,14 @@
 .dash-dropdown {
+    display: block;
     box-sizing: border-box;
     margin: calc(var(--Dash-Spacing) * 2) 0;
+    padding: 0;
+    background: inherit;
+    border: none;
+    width: 100%;
+    cursor: pointer;
+    font-size: inherit;
+    overflow: hidden;
 }
 
 .dash-dropdown-grid-container {
@@ -19,7 +27,7 @@
     grid-template-columns: auto 1fr auto auto;
 }
 
-.dash-dropdown-trigger,
+.dash-dropdown,
 .dash-dropdown-content {
     border-radius: var(--Dash-Spacing);
     border: 1px solid var(--Dash-Stroke-Strong);
@@ -28,17 +36,12 @@
 }
 
 .dash-dropdown-trigger {
-    background: inherit;
-    padding: 6px 12px;
-    width: 100%;
+    padding: 0 12px;
     min-height: 32px;
     height: 100%;
-    cursor: pointer;
-    font-size: inherit;
-    overflow: hidden;
 }
 
-.dash-dropdown-trigger:disabled {
+.dash-dropdown:disabled {
     opacity: 0.6;
     cursor: not-allowed;
 }
@@ -61,8 +64,9 @@
 
 .dash-dropdown-content {
     background: var(--Dash-Fill-Inverse-Strong);
-    min-width: fit-content;
-    width: var(--radix-popover-trigger-width);
+    width: fit-content;
+    min-width: var(--radix-popover-trigger-width);
+    max-width: 100vw;
     overflow-y: auto;
     z-index: 50;
     box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
@@ -190,6 +194,6 @@
 }
 
 .dash-dropdown-option {
-    padding: var(--Dash-Spacing) calc(var(--Dash-Spacing) * 3);
+    padding: calc(var(--Dash-Spacing) * 2) calc(var(--Dash-Spacing) * 3);
     box-shadow: 0 -1px 0 0 var(--Dash-Fill-Disabled) inset;
 }

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

@@ -15,6 +15,14 @@
     overflow: hidden;
 }
 
+.dash-input-container:focus-within {
+    outline: 2px solid var(--Dash-Fill-Interactive-Strong);
+}
+
+.dash-input-container input:focus {
+    outline: none;
+}
+
 .dash-input-container:has(input[type='range']) {
     background: inherit;
 }
@@ -37,6 +45,7 @@
 /* Hide native steppers for number inputs */
 .dash-input-element[type='number'] {
     -moz-appearance: textfield;
+    border-radius: 0;
 }
 
 .dash-input-element[type='number']::-webkit-outer-spin-button,
@@ -70,10 +79,11 @@
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
-    color: var(--Dash-Text-Primary);
+    color: var(--Dash -Text-Primary);
 }
 
-.dash-input-stepper:hover {
+.dash-input-stepper:hover,
+.dash-input-stepper:focus {
     background: var(--Dash-Fill-Primary-Hover);
 }
 
@@ -115,7 +125,3 @@
 input.dash-input-element:invalid {
     outline: solid red;
 }
-
-input.dash-input-element:valid {
-    outline: none black;
-}

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

@@ -20,7 +20,6 @@
 }
 
 .dash-options-list-option-text {
-    white-space: pre;
     display: flex;
     align-items: center;
 }