Bugfix: DCC redesign feedback from rc4

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

@@ -253,7 +253,7 @@ function Input({
     }) as Pick<InputHTMLAttributes<HTMLInputElement>, HTMLInputProps>;
 
     const isNumberInput = type === HTMLInputTypes.number;
-    const currentNumericValue = convert(input.current.value || '0');
+    const currentNumericValue = parseFloat(String(value ?? 0)) || 0;
     const minValue = convert(props.min);
     const maxValue = convert(props.max);
     const isDecrementDisabled =

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

@@ -11,6 +11,8 @@
     border: 1px solid var(--Dash-Fill-Interactive-Strong);
     box-sizing: border-box;
     vertical-align: middle;
+    font-family: inherit;
+    font-size: inherit;
 }
 
 /* Hover state - stronger background */
@@ -28,15 +30,12 @@
 
 /* Keyboard focus - inverted colors */
 .dash-button:focus-visible {
-    outline: none;
-    background: var(--Dash-Fill-Interactive-Strong);
-    color: var(--Dash-Fill-Inverse-Strong);
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
 }
 
 /* Hover after keyboard focus - keep inverted but acknowledge hover */
 .dash-button:focus-visible:hover {
-    background: var(--Dash-Fill-Interactive-Strong);
-    color: var(--Dash-Fill-Inverse-Strong);
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
 }
 
 /* Active state after keyboard focus - inverted colors */

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

@@ -56,6 +56,8 @@
     padding: 0;
     background-color: inherit;
     color: inherit;
+    font-family: inherit;
+    font-size: inherit;
 }
 
 .dash-datepicker-input::selection,
@@ -68,6 +70,10 @@
     border: 1px solid var(--Dash-Fill-Interactive-Strong);
 }
 
+.dash-datepicker-input-wrapper:has(:focus-visible) {
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
+}
+
 .dash-datepicker-input-wrapper-disabled {
     opacity: 0.6;
     cursor: not-allowed;
@@ -85,33 +91,6 @@
     color: var(--Dash-Text-Disabled);
 }
 
-.dash-datepicker-trigger-button {
-    padding: var(--Dash-Spacing);
-    background: transparent;
-    border: none;
-    border-radius: 4px;
-    color: var(--Dash-Text-Strong);
-    cursor: pointer;
-}
-
-.dash-datepicker-trigger-button:hover {
-    background: var(--Dash-Fill-Weak);
-}
-
-.dash-datepicker-trigger-button:focus-visible {
-    outline: 2px solid var(--Dash-Fill-Interactive-Strong);
-    outline-offset: 2px;
-}
-
-.dash-datepicker-trigger-button[aria-expanded='true'] {
-    background: var(--Dash-Fill-Weak);
-}
-
-.dash-datepicker-trigger-icon {
-    width: 16px;
-    height: 16px;
-}
-
 .dash-datepicker-caret-icon {
     color: var(--Dash-Text-Strong);
     fill: var(--Dash-Text-Strong);
@@ -176,9 +155,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--Dash-Spacing);
+    gap: calc(var(--Dash-Spacing) * 2);
     margin-bottom: calc(var(--Dash-Spacing) * 2);
-    font-size: 14px;
+    font-size: inherit;
 }
 
 .dash-datepicker-controls .dash-dropdown {
@@ -220,7 +199,6 @@
 
 .dash-datepicker-month-nav:focus-visible {
     outline: 2px solid var(--Dash-Fill-Interactive-Strong);
-    outline-offset: 2px;
 }
 
 .dash-datepicker-month-nav:disabled {

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

@@ -8,7 +8,7 @@
     --Dash-Text-Primary: rgba(0, 18, 77, 0.87);
     --Dash-Text-Strong: rgba(0, 9, 38, 0.9);
     --Dash-Text-Weak: rgba(0, 12, 51, 0.65);
-    --Dash-Text-Disabled: rgba(0, 21, 89, 0.3);
+    --Dash-Text-Disabled: rgba(0, 21, 89, 0.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);

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

@@ -8,6 +8,7 @@
     outline: none;
     width: 100%;
     cursor: pointer;
+    font-family: inherit;
     font-size: inherit;
     overflow: hidden;
     accent-color: var(--Dash-Fill-Interactive-Strong);
@@ -46,6 +47,7 @@
 
 .dash-dropdown:focus {
     border: 1px solid var(--Dash-Fill-Interactive-Strong);
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
 }
 
 .dash-dropdown:disabled {
@@ -102,8 +104,11 @@
 
 .dash-dropdown-value-count {
     line-height: 18px;
-    padding: 0 2px;
+    padding: 4px;
+    border-radius: 4px;
+    color: var(--Dash-Text-Weak);
     background: var(--Dash-Fill-Weak);
+    font-size: 0.875em;
 }
 
 .dash-dropdown-search-container {
@@ -118,12 +123,13 @@
 
 .dash-dropdown-search-container:focus-within {
     border-color: var(--Dash-Fill-Interactive-Strong);
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
 }
 
 .dash-dropdown-search-icon,
 .dash-dropdown-clear {
-    width: calc(var(--Dash-Spacing) * 3);
-    height: calc(var(--Dash-Spacing) * 3);
+    width: 1em;
+    height: 1em;
 }
 
 .dash-dropdown-search-container:focus-within .dash-dropdown-search-icon {
@@ -160,6 +166,8 @@
     color: var(--Dash-Text-Strong);
     outline: none;
     padding: 0;
+    font-family: inherit;
+    font-size: inherit;
 
     /* Hide the "x" clear button in search inputs */
     &::-webkit-search-cancel-button {
@@ -186,11 +194,12 @@
     background: none;
     border: none;
     cursor: pointer;
-    font-size: 14px;
+    font-family: inherit;
+    font-size: 0.875em;
     font-weight: 600;
     padding: 0;
     text-decoration: none;
-    color: var(--Dash-Text-Disabled);
+    color: var(--Dash-Text-Weak);
     white-space: nowrap;
     accent-color: var(--Dash-Fill-Interactive-Strong);
     outline-color: var(--Dash-Fill-Interactive-Strong);
@@ -213,6 +222,15 @@
     box-shadow: 0 -1px 0 0 var(--Dash-Fill-Disabled) inset;
 }
 
+.dash-dropdown-option
+    .dash-options-list-option-wrapper:has(input[type='radio']) {
+    /* radio buttons are used in single-select dropdowns to aid keyboard
+     * selection and screen readers, but visually, they are hidden
+     */
+    width: 0;
+    overflow: hidden;
+}
+
 /* Positioning container for the dropdown */
 .dash-dropdown-wrapper {
     position: relative;

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

@@ -19,6 +19,10 @@
     border: 1px solid var(--Dash-Fill-Interactive-Strong);
 }
 
+.dash-input-container:has(:focus-visible) {
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
+}
+
 .dash-input-container:has(.dash-input-element:disabled) {
     opacity: 0.6;
     cursor: not-allowed;
@@ -46,6 +50,8 @@
     z-index: 1;
     order: 2;
     accent-color: var(--Dash-Fill-Interactive-Strong);
+    font-family: inherit;
+    font-size: inherit;
 }
 
 .dash-input-element::selection,
@@ -139,5 +145,5 @@
 }
 
 input.dash-input-element:invalid {
-    outline: solid red;
+    color: red;
 }

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

@@ -4,7 +4,7 @@
     color: var(--Dash-Text-Strong);
     cursor: pointer;
     display: flex;
-    align-items: center;
+    align-items: baseline;
     user-select: none;
 }
 
@@ -19,6 +19,7 @@
     cursor: not-allowed;
 }
 
+.dash-options-list-option-wrapper,
 .dash-options-list-option-text {
     display: flex;
     align-items: center;

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

@@ -7,14 +7,14 @@
     touch-action: none;
     width: 100%;
     height: 14px;
-    padding: 18px 0 18px 0;
+    padding: 17px 0 17px 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;
+    padding: 6px 0 28px 0;
 }
 
 .dash-slider-root[data-orientation='vertical'].has-marks {
@@ -75,7 +75,7 @@
 }
 
 .dash-slider-thumb:focus {
-    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
+    outline: 2px solid var(--Dash-Fill-Interactive-Strong);
 }
 
 .dash-slider-thumb:focus .dash-slider-tooltip,
@@ -210,11 +210,19 @@
 
 .dash-range-slider-input {
     min-width: 5cqw; /* 5% of container width */
-    max-width: 15cqw; /* 15% of container width */
+    max-width: 25cqw; /* 25% of container width */
     text-align: center;
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: textfield;
+    font-family: inherit;
+    font-size: inherit;
+    box-sizing: content-box;
+    height: 30px;
+}
+
+.dash-range-slider-input:only-of-type {
+    max-width: 33cqw;
 }
 
 .dash-range-slider-input::selection,
@@ -224,7 +232,7 @@
 }
 
 .dash-range-slider-input:focus {
-    outline: none;
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
 }
 
 /* Hide the number input spinners */

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

@@ -9,6 +9,16 @@
     width: 100%;
     accent-color: var(--Dash-Fill-Interactive-Strong);
     outline-color: var(--Dash-Fill-Interactive-Strong);
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.dash-textarea:focus-within {
+    border: 1px solid var(--Dash-Fill-Interactive-Strong);
+}
+
+.dash-textarea:focus-visible {
+    outline: 1px solid var(--Dash-Fill-Interactive-Strong);
 }
 
 .dash-textarea:disabled {

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

@@ -283,7 +283,7 @@ const Dropdown = (props: DropdownProps) => {
         // Don't interfere with the event if the user is using Home/End keys on the search input
         if (
             ['Home', 'End'].includes(e.key) &&
-            document.activeElement instanceof HTMLInputElement
+            document.activeElement === searchInputRef.current
         ) {
             return;
         }
@@ -367,6 +367,7 @@ const Dropdown = (props: DropdownProps) => {
 
     const accessibleId = id ?? uuid();
     const positioningContainerRef = useRef<HTMLDivElement>(null);
+    const canClearValues = clearable && !disabled && !!sanitizedValues.length;
 
     const popover = (
         <Popover.Root open={isOpen} onOpenChange={handleOpenChange}>
@@ -377,10 +378,20 @@ const Dropdown = (props: DropdownProps) => {
                     disabled={disabled}
                     type="button"
                     onKeyDown={e => {
-                        if (e.key === 'ArrowDown') {
+                        if (['ArrowDown', 'Enter'].includes(e.key)) {
                             e.preventDefault();
+                        }
+                    }}
+                    onKeyUp={e => {
+                        if (['ArrowDown', 'Enter'].includes(e.key)) {
                             setIsOpen(true);
                         }
+                        if (
+                            ['Delete', 'Backspace'].includes(e.key) &&
+                            canClearValues
+                        ) {
+                            handleClear();
+                        }
                     }}
                     className={`dash-dropdown ${className ?? ''}`}
                     style={style}
@@ -417,7 +428,7 @@ const Dropdown = (props: DropdownProps) => {
                                 )}
                             </span>
                         )}
-                        {clearable && !disabled && !!sanitizedValues.length && (
+                        {canClearValues && (
                             <a
                                 className="dash-dropdown-clear"
                                 onClick={e => {

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

@@ -157,9 +157,8 @@ export default function RangeSlider(props: RangeSliderProps) {
         );
 
         const totalChars = maxIntegerChars + maxDecimalChars;
-        const charWidth = 12;
 
-        return `${totalChars * charWidth}px`;
+        return `calc(${totalChars}ch + calc(var(--Dash-Spacing) * 2))`;
     }, [minMaxValues.min_mark, minMaxValues.max_mark, stepValue]);
 
     const valueIsValid = (val: number): boolean => {