Skip to content

Commit 6c40591

Browse files
KoolADE85KoolADE85
authored
Merge pull request #3543 from plotly/bugfix/rc4-feedback
Bugfix: DCC redesign feedback from `rc4`
2 parents d25052e + 20378e4 commit 6c40591

File tree

15 files changed

+373
-58
lines changed

15 files changed

+373
-58
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ function Input({
253253
}) as Pick<InputHTMLAttributes<HTMLInputElement>, HTMLInputProps>;
254254

255255
const isNumberInput = type === HTMLInputTypes.number;
256-
const currentNumericValue = convert(input.current.value || '0');
256+
const currentNumericValue = parseFloat(String(value ?? 0)) || 0;
257257
const minValue = convert(props.min);
258258
const maxValue = convert(props.max);
259259
const isDecrementDisabled =

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
border: 1px solid var(--Dash-Fill-Interactive-Strong);
1212
box-sizing: border-box;
1313
vertical-align: middle;
14+
font-family: inherit;
15+
font-size: inherit;
1416
}
1517

1618
/* Hover state - stronger background */
@@ -28,15 +30,12 @@
2830

2931
/* Keyboard focus - inverted colors */
3032
.dash-button:focus-visible {
31-
outline: none;
32-
background: var(--Dash-Fill-Interactive-Strong);
33-
color: var(--Dash-Fill-Inverse-Strong);
33+
outline: 1px solid var(--Dash-Fill-Interactive-Strong);
3434
}
3535

3636
/* Hover after keyboard focus - keep inverted but acknowledge hover */
3737
.dash-button:focus-visible:hover {
38-
background: var(--Dash-Fill-Interactive-Strong);
39-
color: var(--Dash-Fill-Inverse-Strong);
38+
outline: 1px solid var(--Dash-Fill-Interactive-Strong);
4039
}
4140

4241
/* Active state after keyboard focus - inverted colors */

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

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,8 @@
5656
padding: 0;
5757
background-color: inherit;
5858
color: inherit;
59+
font-family: inherit;
60+
font-size: inherit;
5961
}
6062

6163
.dash-datepicker-input::selection,
@@ -68,6 +70,10 @@
6870
border: 1px solid var(--Dash-Fill-Interactive-Strong);
6971
}
7072

73+
.dash-datepicker-input-wrapper:has(:focus-visible) {
74+
outline: 1px solid var(--Dash-Fill-Interactive-Strong);
75+
}
76+
7177
.dash-datepicker-input-wrapper-disabled {
7278
opacity: 0.6;
7379
cursor: not-allowed;
@@ -85,33 +91,6 @@
8591
color: var(--Dash-Text-Disabled);
8692
}
8793

88-
.dash-datepicker-trigger-button {
89-
padding: var(--Dash-Spacing);
90-
background: transparent;
91-
border: none;
92-
border-radius: 4px;
93-
color: var(--Dash-Text-Strong);
94-
cursor: pointer;
95-
}
96-
97-
.dash-datepicker-trigger-button:hover {
98-
background: var(--Dash-Fill-Weak);
99-
}
100-
101-
.dash-datepicker-trigger-button:focus-visible {
102-
outline: 2px solid var(--Dash-Fill-Interactive-Strong);
103-
outline-offset: 2px;
104-
}
105-
106-
.dash-datepicker-trigger-button[aria-expanded='true'] {
107-
background: var(--Dash-Fill-Weak);
108-
}
109-
110-
.dash-datepicker-trigger-icon {
111-
width: 16px;
112-
height: 16px;
113-
}
114-
11594
.dash-datepicker-caret-icon {
11695
color: var(--Dash-Text-Strong);
11796
fill: var(--Dash-Text-Strong);
@@ -176,9 +155,9 @@
176155
display: flex;
177156
align-items: center;
178157
justify-content: center;
179-
gap: var(--Dash-Spacing);
158+
gap: calc(var(--Dash-Spacing) * 2);
180159
margin-bottom: calc(var(--Dash-Spacing) * 2);
181-
font-size: 14px;
160+
font-size: inherit;
182161
}
183162

184163
.dash-datepicker-controls .dash-dropdown {
@@ -220,7 +199,6 @@
220199

221200
.dash-datepicker-month-nav:focus-visible {
222201
outline: 2px solid var(--Dash-Fill-Interactive-Strong);
223-
outline-offset: 2px;
224202
}
225203

226204
.dash-datepicker-month-nav:disabled {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
--Dash-Text-Primary: rgba(0, 18, 77, 0.87);
99
--Dash-Text-Strong: rgba(0, 9, 38, 0.9);
1010
--Dash-Text-Weak: rgba(0, 12, 51, 0.65);
11-
--Dash-Text-Disabled: rgba(0, 21, 89, 0.3);
11+
--Dash-Text-Disabled: rgba(0, 21, 89, 0.6);
1212
--Dash-Fill-Primary-Hover: rgba(0, 18, 77, 0.04);
1313
--Dash-Fill-Primary-Active: rgba(0, 18, 77, 0.08);
1414
--Dash-Fill-Disabled: rgba(0, 24, 102, 0.1);

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

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
outline: none;
99
width: 100%;
1010
cursor: pointer;
11+
font-family: inherit;
1112
font-size: inherit;
1213
overflow: hidden;
1314
accent-color: var(--Dash-Fill-Interactive-Strong);
@@ -46,6 +47,7 @@
4647

4748
.dash-dropdown:focus {
4849
border: 1px solid var(--Dash-Fill-Interactive-Strong);
50+
outline: 1px solid var(--Dash-Fill-Interactive-Strong);
4951
}
5052

5153
.dash-dropdown:disabled {
@@ -102,8 +104,11 @@
102104

103105
.dash-dropdown-value-count {
104106
line-height: 18px;
105-
padding: 0 2px;
107+
padding: 4px;
108+
border-radius: 4px;
109+
color: var(--Dash-Text-Weak);
106110
background: var(--Dash-Fill-Weak);
111+
font-size: 0.875em;
107112
}
108113

109114
.dash-dropdown-search-container {
@@ -118,12 +123,13 @@
118123

119124
.dash-dropdown-search-container:focus-within {
120125
border-color: var(--Dash-Fill-Interactive-Strong);
126+
outline: 1px solid var(--Dash-Fill-Interactive-Strong);
121127
}
122128

123129
.dash-dropdown-search-icon,
124130
.dash-dropdown-clear {
125-
width: calc(var(--Dash-Spacing) * 3);
126-
height: calc(var(--Dash-Spacing) * 3);
131+
width: 1em;
132+
height: 1em;
127133
}
128134

129135
.dash-dropdown-search-container:focus-within .dash-dropdown-search-icon {
@@ -160,6 +166,8 @@
160166
color: var(--Dash-Text-Strong);
161167
outline: none;
162168
padding: 0;
169+
font-family: inherit;
170+
font-size: inherit;
163171

164172
/* Hide the "x" clear button in search inputs */
165173
&::-webkit-search-cancel-button {
@@ -186,11 +194,12 @@
186194
background: none;
187195
border: none;
188196
cursor: pointer;
189-
font-size: 14px;
197+
font-family: inherit;
198+
font-size: 0.875em;
190199
font-weight: 600;
191200
padding: 0;
192201
text-decoration: none;
193-
color: var(--Dash-Text-Disabled);
202+
color: var(--Dash-Text-Weak);
194203
white-space: nowrap;
195204
accent-color: var(--Dash-Fill-Interactive-Strong);
196205
outline-color: var(--Dash-Fill-Interactive-Strong);
@@ -213,6 +222,15 @@
213222
box-shadow: 0 -1px 0 0 var(--Dash-Fill-Disabled) inset;
214223
}
215224

225+
.dash-dropdown-option
226+
.dash-options-list-option-wrapper:has(input[type='radio']) {
227+
/* radio buttons are used in single-select dropdowns to aid keyboard
228+
* selection and screen readers, but visually, they are hidden
229+
*/
230+
width: 0;
231+
overflow: hidden;
232+
}
233+
216234
/* Positioning container for the dropdown */
217235
.dash-dropdown-wrapper {
218236
position: relative;

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
border: 1px solid var(--Dash-Fill-Interactive-Strong);
2020
}
2121

22+
.dash-input-container:has(:focus-visible) {
23+
outline: 1px solid var(--Dash-Fill-Interactive-Strong);
24+
}
25+
2226
.dash-input-container:has(.dash-input-element:disabled) {
2327
opacity: 0.6;
2428
cursor: not-allowed;
@@ -46,6 +50,8 @@
4650
z-index: 1;
4751
order: 2;
4852
accent-color: var(--Dash-Fill-Interactive-Strong);
53+
font-family: inherit;
54+
font-size: inherit;
4955
}
5056

5157
.dash-input-element::selection,
@@ -139,5 +145,5 @@
139145
}
140146

141147
input.dash-input-element:invalid {
142-
outline: solid red;
148+
color: red;
143149
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
color: var(--Dash-Text-Strong);
55
cursor: pointer;
66
display: flex;
7-
align-items: center;
7+
align-items: baseline;
88
user-select: none;
99
}
1010

@@ -19,6 +19,7 @@
1919
cursor: not-allowed;
2020
}
2121

22+
.dash-options-list-option-wrapper,
2223
.dash-options-list-option-text {
2324
display: flex;
2425
align-items: center;

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
touch-action: none;
88
width: 100%;
99
height: 14px;
10-
padding: 18px 0 18px 0;
10+
padding: 17px 0 17px 0;
1111
box-sizing: border-box;
1212
/* Override Radix's default margin/padding behavior */
1313
--radix-slider-thumb-width: 16px;
1414
}
1515

1616
.dash-slider-root.has-marks {
17-
padding: 8px 0 28px 0;
17+
padding: 6px 0 28px 0;
1818
}
1919

2020
.dash-slider-root[data-orientation='vertical'].has-marks {
@@ -75,7 +75,7 @@
7575
}
7676

7777
.dash-slider-thumb:focus {
78-
outline: 1px solid var(--Dash-Fill-Interactive-Strong);
78+
outline: 2px solid var(--Dash-Fill-Interactive-Strong);
7979
}
8080

8181
.dash-slider-thumb:focus .dash-slider-tooltip,
@@ -210,11 +210,19 @@
210210

211211
.dash-range-slider-input {
212212
min-width: 5cqw; /* 5% of container width */
213-
max-width: 15cqw; /* 15% of container width */
213+
max-width: 25cqw; /* 25% of container width */
214214
text-align: center;
215215
-webkit-appearance: textfield;
216216
-moz-appearance: textfield;
217217
appearance: textfield;
218+
font-family: inherit;
219+
font-size: inherit;
220+
box-sizing: content-box;
221+
height: 30px;
222+
}
223+
224+
.dash-range-slider-input:only-of-type {
225+
max-width: 33cqw;
218226
}
219227

220228
.dash-range-slider-input::selection,
@@ -224,7 +232,7 @@
224232
}
225233

226234
.dash-range-slider-input:focus {
227-
outline: none;
235+
outline: 1px solid var(--Dash-Fill-Interactive-Strong);
228236
}
229237

230238
/* Hide the number input spinners */

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,16 @@
99
width: 100%;
1010
accent-color: var(--Dash-Fill-Interactive-Strong);
1111
outline-color: var(--Dash-Fill-Interactive-Strong);
12+
font-family: inherit;
13+
font-size: inherit;
14+
}
15+
16+
.dash-textarea:focus-within {
17+
border: 1px solid var(--Dash-Fill-Interactive-Strong);
18+
}
19+
20+
.dash-textarea:focus-visible {
21+
outline: 1px solid var(--Dash-Fill-Interactive-Strong);
1222
}
1323

1424
.dash-textarea:disabled {

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

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,7 @@ const Dropdown = (props: DropdownProps) => {
283283
// Don't interfere with the event if the user is using Home/End keys on the search input
284284
if (
285285
['Home', 'End'].includes(e.key) &&
286-
document.activeElement instanceof HTMLInputElement
286+
document.activeElement === searchInputRef.current
287287
) {
288288
return;
289289
}
@@ -367,6 +367,7 @@ const Dropdown = (props: DropdownProps) => {
367367

368368
const accessibleId = id ?? uuid();
369369
const positioningContainerRef = useRef<HTMLDivElement>(null);
370+
const canClearValues = clearable && !disabled && !!sanitizedValues.length;
370371

371372
const popover = (
372373
<Popover.Root open={isOpen} onOpenChange={handleOpenChange}>
@@ -377,10 +378,20 @@ const Dropdown = (props: DropdownProps) => {
377378
disabled={disabled}
378379
type="button"
379380
onKeyDown={e => {
380-
if (e.key === 'ArrowDown') {
381+
if (['ArrowDown', 'Enter'].includes(e.key)) {
381382
e.preventDefault();
383+
}
384+
}}
385+
onKeyUp={e => {
386+
if (['ArrowDown', 'Enter'].includes(e.key)) {
382387
setIsOpen(true);
383388
}
389+
if (
390+
['Delete', 'Backspace'].includes(e.key) &&
391+
canClearValues
392+
) {
393+
handleClear();
394+
}
384395
}}
385396
className={`dash-dropdown ${className ?? ''}`}
386397
style={style}
@@ -417,7 +428,7 @@ const Dropdown = (props: DropdownProps) => {
417428
)}
418429
</span>
419430
)}
420-
{clearable && !disabled && !!sanitizedValues.length && (
431+
{canClearValues && (
421432
<a
422433
className="dash-dropdown-clear"
423434
onClick={e => {

0 commit comments

Comments
 (0)