Research: Inactive Dropdown Options Mistaken For Disabled

[drewdaemon]

Background

We recently used dropdown Calcite components in the Hub application and got feedback from users that the lighter, inactive text color that shows on the calcite-dropdown-item sometimes led to dropdown options being mistaken for being disabled when they were really just not active.

Desired Outcome

See if it might be worth denoting inactive options in a way that isn't easily confused with a disabled state.

[samanthahunter]

An example of our first implementation and some customer feedback (loudoun.gov):

From working with customers trying to download data, our front counter has provided this feedback: When you click the Download Options button, it appears that 'Download available file' is grayed out and not selectable.; When the mouse is over Download available file, the text turns black and you are able to click it, but the second option to 'Request a new file' is not obvious that downloading is an option and the blue selection remains on the 'download available file'

[julio8a]

@bstifle can you take a look at this one

[bstifle]

This is tricky since there are only two options.

Here are a few solutions:

1. Adding support icons to your dropdown.

2. Remove the dropdown and have two buttons: Request new file, and Download available file

3. Use a native select and dropdown

I recommend option 2 since it is the most clear and requires less clicks

[bstifle]

@andrewctate were you able to take a look at those solutions?

[drewdaemon]

Hi @bstifle. Thanks for your solutions comment. I did see it, but assumed it was directed at the Calcite Components team.

We fixed the problem on our end by overriding the text color. I opened this issue just to share the feedback we received in case your team found it useful in considering any changes to this styling in calcite-components itself.

Thanks for your time in researching this for me, and I apologize that I wasn't more clear.

[bstifle]

@andrewctate can you share a screenshot on your solution?

Thanks!

[drewdaemon]

[geospatialem]

Closing in favor of a similar request on combobox: #6245