Page MenuHomePhabricator

[ICON] language label in overflow menu should look disabled matching icon (AMC user pages)
Closed, ResolvedPublic2 Estimated Story Points

Description

In AMC, in the overflow menu on user pages the Languages label should be disabled (light gray) when the icon is disabled

image.png (220×123 px, 23 KB)

Developer notes

The CSS rule .mw-ui-icon-element.disabled, .language-selector.disabled should apply to the label element as well.

Hopefully as simple as adding the classes disabled language-selector to the span.toggle-list-item__label or using the sibling CSS selector .language-selector.disabled ~ span

It can also be achieved (which also fixes vertical alignment by moving the span into the mw-ui-icon-before element

QA steps

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/User:Jdlrobson with AMC enabled and click the overflow menu. The language icon and label should be gray.

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain and confirm the language icon is disabled and gray with and without AMC enabled.

QA Results

ACStatusDetails
1T233167#5516219
2T233167#5516219

Event Timeline

ovasileva triaged this task as Medium priority.Sep 18 2019, 9:38 AM
Jdlrobson renamed this task from [ICON] language label in overflow menu (AMC user pages) to [ICON] language label in overflow menu should look disabled matching icon (AMC user pages).Sep 18 2019, 3:31 PM
Jdlrobson updated the task description. (Show Details)

Change 537671 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Labels for mw-ui-icon-before elements should be vertically aligned inside

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

Change 537671 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Labels for mw-ui-icon-before elements should be vertically aligned inside

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

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP
Emulated Device: iPhoneX, Galaxy S5, iPad Pro, Google Pixel 2, Galaxy Note 3

Test Artifact(s):
✅ AC1 - Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/User:Jdlrobson with AMC enabled and click the overflow menu. The language icon and label should be gray.

T233167a.png (2×1 px, 218 KB)

✅ AC2 - Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain and confirm the language icon is disabled and gray with and without AMC enabled.

T233167b.png (2×1 px, 390 KB)