Improvements to hover/active/focus states in header items

What does this MR do?

Adds some improvements to buttons, dropdowns, inputs, etc. in the header area.

Are there points in the code the reviewer needs to double check?

I'm not sure.

Why was this MR needed?

Requested in an issue.

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

• Changelog entry added
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

Closes #24202 (closed)

This is not complete yet. I'm new to this, so please let me know what all steps do I need to do (tests, changelog, etc.).

Added 1 commit:

• 3b5182ed - Darken more icons on hover and highlight search form also.

Compare with previous version

@rymai @andreaskaemmerle A few questions:

• The screenshots are gifs, does gifs work on GitLab.com?
• I've just darkened the icon color on hover for now, anything else needs to be done on hover?
• Can we add an option to remove the This project badge on clicking on it or having a small fading close icon? Right now one has to click on the search bar and press backspace to remove the badge.
• The pipeline are stuck, is there anything I need to do? Got it.

Added ~164274 frontend labels

Thanks for your contributions @devkhan

As for your questions, embedding gifs works in GitLab

/cc @dimitrieh @awhildy can you give UX guidance on this?

@devkhan nice

there seems to be something wrong with your gifs.. as they are not working.. I can recommend gifox: gifox.io Awesome gif app... otherwise look at https://github.com/wulkano/kap or our handbook https://about.gitlab.com/handbook/product/making-gifs

@cperessini can probably do justice to the question of

Can we add an option to remove the This project badge on clicking on it or having a small fading close icon? Right now one has to click on the search bar and press backspace to remove the badge.

I think it should be done similarly to https://gitlab.com/gitlab-org/gitlab-ce/issues/21747

For your other questions it would be great if you can upload new/working gifs!

Added ~19492 label

@dimitrieh The gifs are working now. Although, I noticed a strange thing: gifs don't work if I paste them directly from the clipboard, but works fine via Attach a file.

Hi @devkhan,

thank you very much for this merge request! I have only one remark, I listed the hover state for the search input in the original issue. However, I just double-checked on the project, there are no hover states for standard inputs and text areas at the moment. I will create a separate issue for suggesting this. While the search in the top navigation is a unique component, I think the introduction of a hover state here would be a topic for input by the UX team. I like your proposal.

/cc @awhildy, @cperessini

@devkhan you should be able to embed the gif by dragging it into the comment box (same as image)

Icons

I've just darkened the icon color on hover for now, anything else needs to be done on hover?

Darkened icons look great. I don't think anything else needs to be done. Thanks!

Project badge

For the project badge, I'm not sure what changing it to blue on hover adds. Hover states like these indicate that something happens when you click on an element. However, clicking on 'This project' doesn't do anything different than clicking on the Search input field. The hover state should really just be on the text input box.

However, adding an 'x' as suggested could be useful as it gives people a way to clear the scope with just the mouse. But, clicking on the entire project badge shouldn't delete it, just on the close 'x'. Therefore, the hover treatment should just be on the 'x'. Also, since deleting the project badge is really a secondary action, I think the hover state should be a darker grey instead of a bright blue. @cperessini: Feel free to jump in if you disagree -- you have thought more about these sort of details with the filter work.

Text input hover state

From initial glance, I do like @devkhan's proposed hover state for the search box. @cperessini: What do you think? Is this something we should roll out to text input fields?

@awhildy I agree, the bright blue was also looking odd to me. I'll revert it.

Also, I'll try to add a close icon to the badge.

Added 1 commit:

• 8fd93054 - Remove hover state on location badge.

Compare with previous version

@devkhan build failed. Can you take a look please?

@fatihacet Passing now.

That looks great. Thanks @devkhan

Status changed to merged

Mentioned in commit bf625392

@devkhan @awhildy These changes look great! I'm strongly in favor of adding the x to the project badge in the search field. I would just make the icon a bit smaller, like so:

I really like the blue hover effect on the search text field. At first I was worried about introducing a brand new hover state, but I think it's consistent with the ones we already have, as they are usually a halfway step towards the active state, and the active states for text fields is a more intense blue glow. I think this could be a good addition to all our text fields but I would like to see that MR live before it gets merged to check it doesn't become too heavy.

There shouldn't be an empty line here

Or here!