Gradianto icon indicating copy to clipboard operation
Gradianto copied to clipboard

When selecting items in a dropdown list, the highlighting is ambiguous / confusing.

Open trevor-coleman opened this issue 5 years ago • 4 comments

When selecting items in a dropdown list, the highlighting is ambiguous / confusing.

This is a dropdown list that's presented when selecting the "Add Import" option.

Using:

  • Webstorm 2020.3 on Mac
  • Gradianto Nature Green theme v4.4

Description:

In this image, the Top item is selected. But the yellow background of the lower item is brighter and seems like it should be selected.

Yellow is typically a "highlight" colour, so it seems like it should be the selected item. And the green colour is the "default" colour of the UI, so it seems like it should be the "not selected" item.

The selected item has brighter text, which is good, but the brighter text it is conflicting with information from the background colour, and the two sort of cancel each other out. The change to the text is also more subtle than the change in background colour, so it is overpowered.

Every time I use this dialog, I have to consciously remember that the highlighted option is not selected.

Proposed Solutions

  1. Have the "selected" item use the yellow background colour, and the "not selected" item use the green colour.

  2. Have the "not selected" item use the "standard" green, and apply some other style to the background of the selected item.

  3. Have the "not selected" item use the same green as the title of the window for its background. Leave "selected" item as it is.

trevor-coleman avatar Jan 26 '21 16:01 trevor-coleman

Hi, can you share how you got the popup for that? I am trying to get the same popup but failing. The popup that I am getting is "import ... from ..." and it has proper colors.

thvardhan avatar Jan 28 '21 06:01 thvardhan

I use the quick action (ALT+Enter) to and choose the "add import statement" option. This is in typescript. if that matters.

trevor-coleman avatar Jul 20 '21 20:07 trevor-coleman

I think the colours are the "correct" colours, so this isn't a programmatic issue, but rather a design issue.

trevor-coleman avatar Jul 20 '21 20:07 trevor-coleman

Hi, it's been a while, I remember not being able to replicate this issue (there seem to be multiple types of import menu one is this error one while other is a normal one which I always get somehow). I wonder if this still happens in the new UI as there were many color changes during the transition.

thvardhan avatar Sep 15 '23 17:09 thvardhan