Feedback on Dash 4 DCC components

[AnnMarieW]

The new DCC components in Dash 4 are fantastic! After taking the pre-release for a spin, I have a few suggestions:

Dropdown

• Add a prop so it's possible change labels such as Search, Selected, Select All, Deselect All
• Enable focus when clicking on a label with htmlFor linked to the dropdown
• Make sure long labels in the options are visible on small screens

Input

• Add style for focus state and disabled state.

Slider

• The input fields is a nice feature, but it would be helpful to make it easy to style. For example by default it only displays 7 digits, which could be misleading when dealing with large numbers. Perhaps add props input_style and input_className
• When using the className prop, it only applies the style to the slider portion, rather than the whole component. For example, if you add a top margin, then the input boxes are not aligned with the slider.

Consistency

Consistency in design helps components look cohesive, especially in forms and control panels. I appreciate that the inputs now have consistent colors and heights. Are there any plans to make the Inputs and Dropdowns more aligned as well?

• It might be more user-friendly if Inputs matched the Dropdown by taking up the full container width, rather than a fixed width of 170px. It would make it easier to add labels too. Currently the labels are in-line with the Inputs and for the Dropdown, they are stacked.
• The Dropdown has a margin, so if you place an Input and a Dropdown side-by-side they are not aligned.
• The Dropdown has a nice disabled state style. The Input doesn't change visibly except the cursor
• Inputs inherit their background via var(--Dash-Fill-Inverse-Strong), but Dropdowns simply inherit from the container without explicitly setting the same variable. This leads to differences in appearance depending on the container background.

CSS

• Would it be possible to use CSS variables for the box-shadow color? This would make it easier to adjust for dark themes.

[ghaarsma]

I gave 4.0.0rc1 a spin on a fairly complex Dash application (~200 callback functions). Upgrade went smooth including the type checking (mypy).

One piece of feedback with respect to the new dcc.Dropdown. In general the new layout is stylish, but I'm wandering if we can make the reordering of options (based on what is chosen) optional. We have a large number of Dropdowns with limited (< 4~5 options) in a very specific order.

I think we would like to keep the implicit order as we gave it during Dropdown construction. Perhaps we can make this an option with a sensible default.

Second thing is the separate search box. I think this is visually much clearer, but it does add a significant screen space if the DropDown is small. Not sure if this is worthy of another option.

Top image is new 4.0.0rc1, Bottom is current 3.2.0 release

[AnnMarieW]

@ghaarsma

Thanks for checking out the dash 4 prelease!

Note that if you set dcc.Dropdown(searchable=False) then the search field does not show:

[antonymilne]

Just adding some cross links to the plotly forums to make it easier for me (and hopefully others) to find everything:

• Dash 4.0.0rc with refreshed Dash Core Components now available
• Dash 4.0.0 rc1 with refreshed dcc.Dropdown now available

FYI @petar-qb

[KoolADE85]

Thanks @AnnMarieW for the detailed list! The specific component issues should now be addressed in the PR you linked.

Your points around consistency between the different components are valid as well. I'm also going to take a "big picture" pass on this to make sure everything feels consistent among the various components.

@ghaarsma thanks for your feedback here - it's super helpful to hear how it working out in the wild.

We are playing with different behaviours in single vs multi select for the next rc2 of this. The idea we're toying with is:

• multi select: keep all selected options hoisted to the top of the list to allow users to see and remove their selections at a glance
• single select: do not re-order anything but DO scroll the list down to your selected choice upon opening the dropdown

I'm hopeful that this will help the "implicit ordering" problem.