Page MenuHomePhabricator
Create Task
Maniphest T292452

[Minerva] Increase space between icon and text label in main menu
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To
ovasileva
Authored By
• alexhollender_WMF
Oct 4 2021, 3:57 PM
Tags
Referenced Files
F34847774: Screen Shot 2021-12-06 at 6.31.21 AM.png
Dec 6 2021, 2:36 PM
F34847772: Screen Shot 2021-12-06 at 6.29.27 AM.png
Dec 6 2021, 2:36 PM
F34847775: Screen Shot 2021-12-06 at 6.32.36 AM.png
Dec 6 2021, 2:36 PM
F34672246: Screen Shot 2021-10-04 at 2.06.30 PM.png
Oct 4 2021, 9:12 PM
F34671932: Screen Shot 2021-10-04 at 11.56.24 AM.png
Oct 4 2021, 3:57 PM
Subscribers
Aklapper
• alexhollender_WMF
bwang
cjming
Edtadros
Jdlrobson
Masumrezarock100
View All 9 Subscribers

Description

Description

Somewhere along the way the spacing between the icon and text label in the main menu seems to have decreased. This seems to be the case for both AMC and non-AMC:

Screen Shot 2021-10-04 at 11.56.24 AM.png (904×951 px, 66 KB)

reference to the previous/correct version: https://web.archive.org/web/20191101063058/https://en.m.wikipedia.org/wiki/Main_Page

Per T292452#7400318 for consistency with Vector this should be an 8px margin.

Developer notes

The change should be done in core inside the mw-ui-icon library. Any no longer needed rules inside Vector should be removed.

QA Results - Beta

ACStatusDetails
1✅T292452#7555081

QA Results - Prod

ACStatusDetails
1✅T292452#7555082

Details

SubjectRepoBranchLines +/-
Update margin rule for menu icons.mediawiki/coremaster+5 -0
Partial revert "Fix spacing between icon + text in main menu"mediawiki/skins/MinervaNeuemaster+0 -4
Fix spacing between icon + text in main menumediawiki/skins/MinervaNeuemaster+5 -1
Customize query in gerrit

Related Objects

Event Timeline

• alexhollender_WMF created this task.Oct 4 2021, 3:57 PM
Restricted Application added a project: Internet-Archive. · View Herald TranscriptOct 4 2021, 3:57 PM
Restricted Application added a subscriber: Masumrezarock100. · View Herald Transcript
Jdlrobson added a comment.Oct 4 2021, 9:12 PM

Both Vector and Minerva are converging on the same icon implementation as part of the user menu feature, so this regression looks like it came about then.

Should be straightforward to fix, but the margin to the right of the icon in Vector here is 8px:

Screen Shot 2021-10-04 at 2.06.30 PM.png (94×466 px, 4 KB)

Should this also become 12px ?

Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog board.Oct 4 2021, 9:12 PM
• alexhollender_WMF added a subscriber: Volker_E.Oct 4 2021, 9:55 PM

@Jdlrobson thanks for calling that out. I think the current Vector implementation is correct so lets match that. cc @Volker_E

Jdlrobson updated the task description. (Show Details)Oct 5 2021, 4:59 PM
ovasileva triaged this task as Medium priority.Oct 18 2021, 8:05 PM
ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog.
Jdlrobson removed a project: Internet-Archive.Oct 18 2021, 8:37 PM
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
ovasileva set the point value for this task to 3.Oct 19 2021, 5:34 PM
ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
bwang subscribed.EditedOct 19 2021, 5:53 PM

It looks like the 8px right margin in Vector is due to mw-ui-icon-before, while Minerva only uses mw-ui-icon and an extra whitespace. I'm not sure if it makes sense to make changes to the core mw-ui-icon library, as mw-ui-icon isn't supposed to have padding or margin . Perhaps it makes more sense to just update Minerva to use mw-ui-icon-before like Vector, or to just add some extra CSS to apply the right margin?

Jdlrobson added a comment.Oct 19 2021, 6:01 PM

I think that would be fine @bwang

We could however use the next sibling selector in this case: mw-ui-icon + span { margin-left: 8px; } if that made sense as we'd like to move away from mw-ui-icon-before

cjming claimed this task.Nov 1 2021, 8:52 PM
cjming moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
gerritbot added a comment.Nov 1 2021, 10:34 PM

Change 736073 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

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

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

gerritbot added a project: Patch-For-Review.Nov 1 2021, 10:34 PM
cjming removed cjming as the assignee of this task.Nov 1 2021, 10:54 PM
cjming moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
cjming subscribed.
Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Nov 2 2021, 12:57 AM

Please see requested follow up work to make this part of core.

gerritbot added a comment.Nov 2 2021, 1:19 AM

Change 736073 merged by jenkins-bot:

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

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.9; 2021-11-16).Nov 2 2021, 2:00 AM
Maintenance_bot removed a project: Patch-For-Review.Nov 2 2021, 2:10 AM
cjming claimed this task.Nov 2 2021, 5:08 PM
gerritbot added a comment.Nov 4 2021, 10:53 PM

Change 736919 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/core@master] Update margin rule for menu icons.

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

gerritbot added a project: Patch-For-Review.Nov 4 2021, 10:53 PM
cjming removed cjming as the assignee of this task.Nov 4 2021, 10:54 PM
cjming moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Nov 5 2021, 5:35 PM
Jdlrobson assigned this task to Edtadros.Nov 8 2021, 4:55 PM
Jdlrobson removed Edtadros as the assignee of this task.
Jdlrobson moved this task from Needs More Work to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson moved this task from QA to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
Jdlrobson added a subscriber: Edtadros.
cjming claimed this task.Nov 8 2021, 6:35 PM
cjming removed cjming as the assignee of this task.Nov 8 2021, 10:00 PM
cjming moved this task from Needs More Work to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
gerritbot added a comment.Nov 8 2021, 11:39 PM

Change 737448 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Partial revert \"Fix spacing between icon + text in main menu\"

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

Jdlrobson assigned this task to Edtadros.Nov 8 2021, 11:42 PM
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
gerritbot added a comment.Nov 9 2021, 12:10 AM

Change 736919 merged by jenkins-bot:

[mediawiki/core@master] Update margin rule for menu icons.

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

gerritbot added a comment.Nov 9 2021, 11:02 PM

Change 737448 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Partial revert \"Fix spacing between icon + text in main menu\"

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

Maintenance_bot removed a project: Patch-For-Review.Nov 9 2021, 11:10 PM
QutieBot added a project: QTE-TestingOverview.Nov 17 2021, 5:47 PM
QutieBot moved this task from Inbox to Edward on the QTE-TestingOverview board.
Jdlrobson mentioned this in T296212: Language button visual regression.Nov 30 2021, 7:40 PM
Edtadros reassigned this task from Edtadros to Jdlrobson.Dec 6 2021, 2:36 PM

@Jdlrobson, I'm not sure if this is the correct way to validate it, but, here's how it looks in the web archive:

Screen Shot 2021-12-06 at 6.29.27 AM.png (459×890 px, 121 KB)

That shows the 12px. Beta and Prod show 8px.

Screen Shot 2021-12-06 at 6.31.21 AM.png (460×890 px, 121 KB)

Screen Shot 2021-12-06 at 6.32.36 AM.png (459×886 px, 115 KB)

• alexhollender_WMF added a comment.Dec 6 2021, 3:09 PM

@Edtadros apologies for the confusion, we settled on 8px, so that's correct. I just never went back and updated the mock.

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Dec 7 2021, 11:27 PM
Jdlrobson moved this task from QA to QA in Prod on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

(pass): see above

Edtadros added a comment.Dec 7 2021, 11:33 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Spacing between icon and text label should be 8px (see: T292452#7549913)

Screen Shot 2021-12-06 at 6.31.21 AM.png (460×890 px, 121 KB)

Edtadros added a comment.Dec 7 2021, 11:35 PM

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: Spacing between icon and text label should be 8px (see: T292452#7549913)

Screen Shot 2021-12-06 at 6.32.36 AM.png (459×886 px, 115 KB)

thanks @alexhollender and @Jdlrobson !

Edtadros reassigned this task from Edtadros to ovasileva.Dec 7 2021, 11:36 PM
Edtadros updated the task description. (Show Details)
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.
ovasileva closed this task as Resolved.Dec 9 2021, 10:22 AM
BrandonXLF mentioned this in T301056: Have consistent spacing between icon and text label in all menus.Feb 6 2022, 1:27 AM
• Esanders mentioned this in T307233: Minerva mobile: non-ASCII char in section heading cause bigger margin.Apr 30 2022, 10:38 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits