Page MenuHomePhabricator

Have consistent spacing between icon and text label in all menus
Closed, ResolvedPublic

Description

Right now items in the user dropdown menu and items added to the main menu using mw.util.addPortletLink have an extra   between the icon and the text in addition to the margin, this should be removed. The space was removed from the main menu in PHP as a part of T292452 with this change, but the change was never applied to mw.util.addPortletLink or the user menu.

image.png (174×222 px, 7 KB)

In the main menu, you can see that the icons added by the skin in PHP don't have the extra space, but the "Foo" menu item that was added using mw.util.addPortletLink does.

image.png (300×239 px, 9 KB)

In the user menu, all the menu item have the extra space.

Event Timeline

Change 759972 had a related patch set uploaded (by BrandonXLF; author: BrandonXLF):

[mediawiki/skins/MinervaNeue@master] Fix spacing between icon + text in toggle menu and JS

https://gerrit.wikimedia.org/r/759972

@ovasileva there is a patch from a volunteer for this one. Should we move into the sprint board?

ovasileva added a subscriber: alexhollender_WMF.

Sure, we can review. @alexhollender_WMF - just double checking this change fits our expectations

@Jdlrobson @BrandonXLF is it possible to see a before & after comparison of this change?

@Jdlrobson @BrandonXLF is it possible to see a before & after comparison of this change?

Here are before and after screenshots. The first row is for the p-navigation portlet menu and the second row is for the p-personal popup menu.

BeforeAfter
p nav before.PNG (364×329 px, 6 KB)
p nav after.PNG (359×330 px, 6 KB)
p personal before.PNG (430×227 px, 7 KB)
p personal after.PNG (411×218 px, 7 KB)

@BrandonXLF thanks for the screenshots, looks fine to me.

Change 759972 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Fix spacing between icon + text in toggle menu and JS

https://gerrit.wikimedia.org/r/759972

This can now be design reviewed on the beta cluster. Feel free to move to sign off if all looks good. Be sure to check menus in AMC as well as outside AMC.

I sent an email to Alex to remind him to review this at a later date.