Page MenuHomePhabricator

When hovering over a menu item icon and text should change colour
Closed, DuplicatePublic


Currently upon a hover of a menu item a blue line appears to the left of the menu item.
In addition to this the icon and text should also change blue.

During implementation this proved trickier than one might think with things to consider:
A few notes.

  1. Currently ResourceLoaderImage module generates icons based on a class name.

What we want here is a hover effect. For example we may have mw-ui-icon-arrow and mw-ui-icon-arrow-invert. To get the hover effect we would need to either patch ResourceLoaderImage module or not use it at all (and then have to generate the pngs ourselves) - this feels wrong.
We can alternatively use JS to change the class on hover. This also feels wrong. Regardless there's going to be more bloat caused to accomodate such a solution
Someone should feel free to attempt a patch for this as maybe someone sees a better way and it's hard to compare a concrete patch with something that doesn't yet exist.

  1. Shipping additional icons sets a precedent. I was hoping by using this mechanism we could apply it in other places where it makes sense, for example the last modified bar and save additional bytes there. I'm a little worried on the long term we'll be having hover effects for all our icons, is shipping 2 icons the right solution?
  2. mw-ui-icon-arrow is the name of an icon. mw-ui-icon-arrow-invert is the same icon but a different colour. Wouldn't it be great if we could change the colour just by adding a class e.g. mw-ui-progressive ?

Event Timeline

Change 324370 had a related patch set uploaded (by Jdlrobson):
Hovering over links in menu should change link/icon to blue

Given my patch is -1ed based on the approach I'm releasing this to someone else in case they have another idea.

Jdlrobson changed the task status from Open to Stalled.Dec 12 2016, 5:24 PM

The team decided that this will be stalled until there is a generic solution for hover effects on icon from the UI standardisation team.
Over to you @Volker_E (is there a task specific to that which can block this?)

@Jdlrobson I know that the patch set is the only technically close-to-complete solution so far, but I've told my concerns on the patch set and in person. From a maintenance perspective I think the proposed solution is over-engineered.
Given that we're talking about very little (as in file size) PNGs I would rather want to see this moving forward and include the icons similar to how they are included now. The color change is IMHO more important than the (small) performance impact we try to avoid. That doesn't mean, that we shouldn't find a better solution, I just don't feel the one real good solution is on the horizon and we shouldn't stop UI evolution for very little difference in impact.

I had thought that ResourceLoaderImage module doesn't support icons that change colour on hover, but on closer inspection you can do:

		"skins.minerva.icons.images": {
			"class": "ResourceLoaderImageModule",
			"selector": ".mw-ui-icon-{name}:before",
			"images": {
				"notifications": "resources/skins.minerva.icons.images/bell.svg",
				"notifications:hover": "resources/skins.minerva.icons.images/hamburger.svg",

Is that the recommended way to do this?
I'll leave it to @bmansurov as tech lead if we want to pursue that type of solution.

Yes, that would work. @Nirzar, would you provide us with the icons in hover state? The icons we need the hover effect are at

@bmansurov we have all the icons. We just need to change the fill state - so basically we'd have to clone every icon and change the fill colour.
This is what I mean by ResourceLoaderImage support is not great for this.
Alternatively I wonder if it's possible to setup a variant :hover ?

Here are all icons

  • all of them are cleaned SVGs without illustrator cruft in it
  • all have 2 versions
  • I removed anonymous.svg icon, you can use profile.svg for logged in and anon users. we can save on an icon by only showing one icon

@bmansurov doing what @Jdlrobson is also good option, you can use fill="#36C". the zip file also tries to match oojs ui icons with this. it's not a big deal if you replace files but if you don't want to, that's fine too.

@Nirzar, I thought you'd just give me the fill'ed versions. How are your icons different that that?

@bmansurov they are two states but while i was working on it i took care of a long lasting task about updating drawer icons to look like OOJS ui icons

if we are touching them, might as well. but up to you if you are comfortable with that. the change is basically to 2-3 icons in it's path prop. nothing else has changed.

Please update the description to explicitly say which icons are changing.
Also a note that we shouldn't introduce new icon assets - instead we should be changing the fill on one single canonical asset.


instead we should be changing the fill on one single canonical asset.

the zip file is one set with another set with fill property.

Change 324370 abandoned by Jdlrobson:
Hovering over links in menu should change link/icon to blue

Not working on this anymore

Any update on an approach to doing this.. the css filter method still seems like a good one to me. What you got Volker or is the plan to decline support for colored icon variants ? :)

Jdlrobson lowered the priority of this task from Medium to Low.May 17 2017, 9:14 AM

No activity in last month so lowering priority cc @Nirzar

This needs a recommendation from the frontend standards group. Otherwise I suggest we use the CSS filter mechanism.

@Volker_E can you summarise where we are with this task?