Fleet UI: Selected dropdown color

[RachelElysia]

Fleet version:
dogfood so 4.62
Web browser and operating system:

---

💥  Actual behavior

We have 3 different previously selected colors going on: 1. hover purple for previously selected, dark purple for previously selected, light blue for previously selected. For each of these screenshots, one is a hover color, the other is an option that is currently selected.

🧑‍💻  Steps to reproduce

1. Select a filter on dashboard platform or host label or any table filter
2. See that the previously selected is different in a few places

🕯️ More info (optional)

Need design to specify what color a previously selected dropdown option should be

🛠️ To fix

• Figma file
• Prototype 1
• Prototype 2

QA Plan

• Selected options are bold
• Focused options only are highlighted (so selected option starts highlighted since it's focused, and then isn't highlighted when another option is in focus)
• Add rounded border to dropdown options
• These changes are in effect for all dropdowns appwide including
  • Old Dropdown react-select 1.3.0 dropdowns
  • New DropdownWrapper react-select 5.4.0 dropdowns
  • Team dropdown (uses react-select 5.4.0)
  • Label filter select dropdown on manage host page (uses react-select 5.4.0)
  • User menu dropdown (uses react-select 5.4.0)
  • Action dropdowns (uses react-select 5.4.0)
• There is no weird inconsistency app-wide between dropdown options and it's hover/active/focus/selected states

[eugkuo]

@RachelElysia What do you think about using the hover color for previously selected, but as you roll over things, only what you're rolling over has the color (i.e. the previously selected item becomes unselected), and if you roll off then the previously selected is shown so we don't have a situation where we're showing two selected things at once?

I feel like we don't need a persistent selected state as it's already shown, and this also means we don't have to have multiple or competing colors in the dropdown.

Does that make sense? I'm trying to find an example to illustrate in case the words are failing.

[jmwatts]

Reproduced on 4.62.0 - Will this unify all drop downs in fleet or only the ones mentioned in the ticket?
@RachelElysia @eugkuo

[eugkuo]

@jmwatts Ideally I'd love it if it would unify all dropdowns in fleet. I think @RachelElysia suggested something similar when she mentioned it would take her a little time to dig out all the instances?

[RachelElysia]

Yeah, per our convo today:

• this issue should encompass unifying all dropdowns including: "old" (react select 1.4.0), "new" (react select 5.4.0) and "adhoc" (react select 5.4.0 but not using a widely reusable component)
• @eugkuo will confirm with other designers the solution before adding to spec and assigning this ticket out

[eugkuo]

@rachaelshaw & @marko-lisica :

Perkins has pointed out that we have inconsistent behaviors in our dropdowns wrt selected states and rollovers, and Janis mentioned that using solely a color indicator isn't great for accessibility.

So I have a proposal that includes the following:

1. We use one color for the selected and rollover state, but when rolling over other items in a list the selected state becomes deselected so that only one item is in a highlighted state at any given time.
2. We add a bold state to the highlighted text.

Examples:

1. Prototype 1. 'Workstations' and 'Platform' dropdowns
2. Prototype 2. 'All hosts' dropdown. (Note that in this case I also darkened the secondary text as the current color fails on accesibility contrast ratios).

Thoughts?

cc @RachelElysia @jmwatts @noahtalerman

[marko-lisica]

@eugkuo Thanks for the prototypes! This looks way better to me. I like bold for the active state, it rally makes it easy to know which one is active that way. I personally wouldn't use bold on hover, as the text jumps and feels a bit buggy.

I found this Figma from Mike T. here. He distinguished hover and active states with different colors (gray and purple). Also items on hover and when active have rounded corners which I think is a nice detail. It's consistent with the rounded corners of the dropdown.

[eugkuo]

Hello again.

Based on @marko-lisica's feedback I've done alternate versions of the prototypes removing the bold on rollover and re-introducing a down state:

• Prototype 1. 'Workstations' and 'Platform' dropdowns
  • Prototype 1a
• Prototype 2. 'All hosts' dropdown. (Note that in this case I also darkened the secondary text as the current color fails on accesibility contrast ratios).
  • Prototype 2a

A few notes:

1. Removing the bold on rollover doesn't address @jmwatts's issue of not having an accessible state for those who are colorblind or cannot see the color contrast.
2. Having the downstate and the rollover seems like a lot of visual noise.

@rachaelshaw @noahtalerman @RachelElysia Thoughts?

[jmwatts]

@eugkuo @RachelElysia @marko-lisica because there are many types and degrees of colorblindness, it's nice to focus on non-color-dependent contrast. This is the image from Marko's comment above but with color removed so you can see what I mean.

[marko-lisica]

@eugkuo @RachelElysia @marko-lisica because there are many types and degrees of colorblindness, it's nice to focus on non-color-dependent contrast. This is the image from Marko's comment above but with color removed so you can see what I mean.

@jmwatts I think having selected items bolded could help. Bolded text would be an additional indicator besides color change.

[eugkuo]

@jmwatts I think having selected items bolded could help. Bolded text would be an additional indicator besides color change.

@marko-lisica I did do that in the last prototype I sent. However, it doesn't solve the rollover problem. I'm still advocating for my the first iteration of the design where the rollover and down state are the same, and the downstate clears on rollover. The rollover and down states use both color and bold to indicate the selection/rollover.

[RachelElysia]

+1 bold on active state, it would match the bold on our active tabs
+1 on rounded

[eugkuo]

Thanks for everyone's input. Let's go with the original proposal. The selected and hover state are the same, and the selected state is released when hovering on other items in the list so that we don't have competing states in the dropdown.

The selected/hover state retains the purple background but also bolds the text for accessibility. The corners are also now rounded.

I've updated to add this to the To fix area and also added an example of the 'Filter by platform or label' dropdown. I do believe a future improvement will be to separate this into two filters.

@RachelElysia

[mostlikelee]

Please add your planning poker estimate with Zenhub @RachelElysia

[eugkuo]

@RachelElysia Updated links per our discussion:

• Figma file
• Prototype 1
• Prototype 2