Merge pull request #3459 from plotly/bugfix/dcc-redesign-bugfixes

dcc redesign: accumulated bugfixes

Author: KoolADE85

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 `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
+    * 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 defaultLabels: DropdownProps['labels'] = {
+    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,
+    labels = defaultLabels,
+    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) {
+    labels = {
+        ...defaultLabels,
+        ...labels,
+    };
+
     return (
         <Suspense fallback={null}>
             <RealDropdown
                 clearable={clearable}
                 disabled={disabled}
+                labels={labels}
                 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

@@ -11,4 +11,6 @@
     --Dash-Fill-Primary-Hover: rgba(0, 18, 77, 0.04);
     --Dash-Fill-Primary-Active: rgba(0, 18, 77, 0.08);
     --Dash-Fill-Disabled: rgba(0, 24, 102, 0.1);
+    --Dash-Shading-Strong: rgba(22, 23, 24, 0.35);
+    --Dash-Shading-Weak: rgba(22, 23, 24, 0.2);
 }

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

@@ -1,6 +1,16 @@
 .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;
+    accent-color: var(--Dash-Fill-Interactive-Strong);
+    outline-color: var(--Dash-Fill-Interactive-Strong);
 }
 
 .dash-dropdown-grid-container {
@@ -19,7 +29,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 +38,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,12 +66,13 @@
 
 .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: 98vw;
     overflow-y: auto;
-    z-index: 50;
-    box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
-        0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+    z-index: 500;
+    box-shadow: 0px 10px 38px -10px var(--Dash-Shading-Strong),
+        0px 10px 20px -15px var(--Dash-Shading-Weak);
 }
 
 .dash-dropdown-value-count,
@@ -175,6 +181,8 @@
     text-decoration: none;
     color: var(--Dash-Text-Disabled);
     white-space: nowrap;
+    accent-color: var(--Dash-Fill-Interactive-Strong);
+    outline-color: var(--Dash-Fill-Interactive-Strong);
 }
 
 .dash-dropdown-action-button:hover {
@@ -190,6 +198,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/dropdown.css

@@ -15,6 +15,19 @@
     overflow: hidden;
 }
 
+.dash-input-container:focus-within {
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
+}
+
+.dash-input-container:has(.dash-input-element:disabled) {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.dash-input-container input:focus {
+    outline: none;
+}
+
 .dash-input-container:has(input[type='range']) {
     background: inherit;
 }
@@ -32,11 +45,17 @@
     box-sizing: border-box;
     z-index: 1;
     order: 2;
+    accent-color: var(--Dash-Fill-Interactive-Strong);
+}
+
+.dash-input-element:disabled {
+    cursor: not-allowed;
 }
 
 /* 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 +89,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 +135,3 @@
 input.dash-input-element:invalid {
     outline: solid red;
 }
-
-input.dash-input-element:valid {
-    outline: none black;
-}

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

@@ -20,7 +20,6 @@
 }
 
 .dash-options-list-option-text {
-    white-space: pre;
     display: flex;
     align-items: center;
 }
@@ -30,10 +29,6 @@
     margin: 0 calc(var(--Dash-Spacing) * 2) 0 0;
     box-sizing: border-box;
     border: 1px solid var(--Dash-Stroke-Strong);
-}
-
-.dash-options-list-option-checkbox:hover,
-.dash-options-list-option-checkbox:focus,
-.dash-options-list-option-checkbox:checked {
     accent-color: var(--Dash-Fill-Interactive-Strong);
+    outline-color: var(--Dash-Fill-Interactive-Strong);
 }

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

@@ -62,7 +62,7 @@
     background-color: var(--Dash-Fill-Interactive-Strong);
     border: 2px solid var(--Dash-Fill-Inverse-Strong);
     border-radius: 50%;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 3px 0 var(--Dash-Shading-Weak);
     cursor: pointer;
     outline: none;
     transition: all 0.15s ease-in-out;
@@ -71,7 +71,7 @@
 .dash-slider-thumb:focus,
 .dash-slider-thumb:hover {
     transform: scale(1.125); /* Scale to make 16px thumb appear as 18px */
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 6px -1px var(--Dash-Shading-Weak);
 }
 
 .dash-slider-thumb:focus .dash-slider-tooltip,
@@ -129,7 +129,7 @@
     padding: calc(var(--Dash-Spacing) * 3);
     font-size: 12px;
     line-height: 1;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 0 8px var(--Dash-Shading-Strong);
     background-color: var(--Dash-Fill-Inverse-Strong);
     user-select: none;
     z-index: 1000;