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

Assigned To

Authored By

	• alexhollender_WMF
	Sep 17 2019, 10:22 PM

Description

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

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

AC	Status	Details
1	✅	T233167#5516219
2	✅	T233167#5516219

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Labels for mw-ui-icon-before elements should be vertically aligned inside	mediawiki/skins/MinervaNeue	master	+9 -3

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	ovasileva	T226562 AMC - display labels for toolbar actions on larger screens
Resolved	• alexhollender_WMF	T229440 [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency
Resolved	ovasileva	T233167 [ICON] language label in overflow menu should look disabled matching icon (AMC user pages)

Event Timeline

• alexhollender_WMF created this task.Sep 17 2019, 10:22 PM

Jdlrobson removed • alexhollender_WMF as the assignee of this task.Sep 17 2019, 10:26 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.

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

gerritbot added a project: Patch-For-Review.Sep 18 2019, 3:45 PM

ovasileva set the point value for this task to 2.Sep 19 2019, 5:54 PM

ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.

Jdlrobson assigned this task to • alexhollender_WMF.Sep 19 2019, 6:59 PM

Jdlrobson moved this task from Ready for Development to Needs Design Review on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.

Jdlrobson moved this task from Needs Design Review to Needs Code Review on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.

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

Jdlrobson reassigned this task from • alexhollender_WMF to Edtadros.Sep 20 2019, 6:43 PM

Jdlrobson moved this task from Needs Code Review to Needs QA on the Web-Team-Backlog-Archived (Readers-Web-Kanbanana-2019-20-Q1) board.

Maintenance_bot removed a project: Patch-For-Review.Sep 20 2019, 7:10 PM

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.

✅ 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.

Edtadros updated the task description. (Show Details)Sep 23 2019, 2:11 PM

Looks good!

	F30443995: T233167a.png
	Sep 23 2019, 2:10 PM

	F30444000: T233167b.png
	Sep 23 2019, 2:10 PM

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