[M] [Technical] Vector should consistently use mw-ui-icon-flush-left and mw-ui-icon-flush-right utility classes
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	Jdlrobson
	Oct 24 2022, 4:54 PM

Description

NOTE: Why this is a priority: Without doing this there is a risk that future changes to Codex/mediawiki UI by the DST team would be blocked on web team. Since we are making various changes relating to this code, now seems like an ideal time to do this work. It also aids with the solution to T317583.

In several places in Vector code, we require knowledge of icon sizes to align layout correctly. This is problematic when the specification for icons changes, particularly going forward where the specification will be owned by another team. This IMO blocks us moving to updated icon specification.

TODO

With the VisualEnhancementsNext feature flag enabled, elements will align correctly using only the mw-ui-icon-flush-left and mw-ui-icon-flush-right utility classes

QA

On master there should be no visual regressions https://pixel.wmcloud.org/reports/desktop

QA Results - Beta

AC	Status	Details
1	✅	T321504#8403383

Details

Subject	Repo	Branch	Lines +/-
Fix alignment between icons on left and right of screen	mediawiki/skins/Vector	master	+74 -23
Use standard utility classes for flushing icons left and right	mediawiki/skins/Vector	master	+92 -75
Fix ToC dropdown menu spacing when visual next flag is enabled, address icon related feedback	mediawiki/skins/Vector	master	+29 -80
Add and document mw-ui-flush classes to eventually replace existing ones	mediawiki/core	master	+4 -0
Disable new flushing rules on mobile	mediawiki/skins/MinervaNeue	master	+10 -0
Disable new flushing rules with feature flag disabled	mediawiki/skins/Vector	master	+10 -0
Correct flush value for new icon specification	mediawiki/core	master	+11 -0
Remove duplicate styles	mediawiki/skins/Vector	master	+0 -8

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	ovasileva	T317884 [EPIC] Vector 2022 post-deployment work
Open	ovasileva	T317632 [EPIC] Visual refinements pt2
Resolved	• alexhollender_WMF	T314323 [EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022)
Resolved	Jdlrobson	T320101 [M] Enable VectorVisualEnhancementsNext everywhere
Resolved	ovasileva	T321504 [M] [Technical] Vector should consistently use mw-ui-icon-flush-left and mw-ui-icon-flush-right utility classes

Event Timeline

Jdlrobson created this task.Oct 24 2022, 4:54 PM

Jdlrobson triaged this task as High priority.Oct 24 2022, 5:00 PM

Jdlrobson lowered the priority of this task from High to Medium.Oct 24 2022, 11:13 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Jdlrobson updated the task description. (Show Details)

Jdlrobson set the point value for this task to 1.

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

[mediawiki/skins/Vector@master] Use standard utility classes for flushing icons left and right

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

gerritbot added a project: Patch-For-Review.Oct 24 2022, 11:19 PM

Jdlrobson updated the task description. (Show Details)Oct 24 2022, 11:21 PM

Jdlrobson lowered the priority of this task from Medium to Low.Oct 25 2022, 4:57 PM

ovasileva raised the priority of this task from Low to Medium.Oct 25 2022, 4:58 PM

ovasileva edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Kanbanana-2022-23-Q2).

Jdlrobson moved this task from Incoming to Needs Prioritization (Tech) on the Web-Team-Backlog board.Oct 26 2022, 4:21 PM

Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog.

LGoto renamed this task from [Technical] Vector should consistently use mw-ui-icon-flush-left and mw-ui-icon-flush-right utility classes to [M] [Technical] Vector should consistently use mw-ui-icon-flush-left and mw-ui-icon-flush-right utility classes.Oct 26 2022, 4:59 PM

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-2022-23-Q2); removed Web-Team-Backlog (Needs Prioritization (Tech)).Oct 26 2022, 5:00 PM

Jdlrobson moved this task from Upcoming to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Oct 26 2022, 5:02 PM

Jdlrobson mentioned this in T319449: [M] Create toggle to control the fixed width of the content for Vector 2022 skin.

Jdlrobson removed Jdlrobson as the assignee of this task.Oct 26 2022, 8:52 PM

Change 838926 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Use standard utility classes for flushing icons left and right

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

Maintenance_bot removed a project: Patch-For-Review.Oct 27 2022, 3:29 PM

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

[mediawiki/skins/Vector@master] Remove duplicate styles

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

gerritbot added a project: Patch-For-Review.Oct 27 2022, 5:06 PM

LGoto assigned this task to bwang.Oct 27 2022, 5:07 PM

From @bwang:

The mw-ui-icon-flush-left and mw-ui-icon-flush-right classes don't work when the VisualEnhancementNext flag is enabled, this is because the icon buttons need a different flush value than the normal buttons. Right now the alignment when the visual enhancement next flag is enabled is off

Will look into this later.

Change 850214 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove duplicate styles

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

Maintenance_bot removed a project: Patch-For-Review.Oct 28 2022, 3:31 PM

Jdlrobson claimed this task.Oct 28 2022, 3:38 PM

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.8; 2022-10-31).Oct 28 2022, 4:00 PM

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

[mediawiki/skins/Vector@master] Fix alignment between icons on left and right of screen

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

gerritbot added a project: Patch-For-Review.Oct 28 2022, 9:51 PM

Jdlrobson removed Jdlrobson as the assignee of this task.Oct 28 2022, 9:52 PM

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

To visually test the alignment I am using this code:

$('<div>').attr('style', 'position:fixed; right: 53px; top: 0; bottom: 0; width: 1px; background: black;').appendTo(document.body)
$('<div>').attr('style', 'position:fixed; left: 46px; top: 0; bottom: 0; width: 1px; background: black;').appendTo(document.body)

On TOC there is 1px discrepancy due to the .sidebar-toc-toggle { left: ~'calc( -1 * @{toc-subsection-toggle-icon-size} - 1px )'; } rule.

Jdlrobson assigned this task to bwang.Oct 31 2022, 5:31 PM

Jdlrobson moved this task from Code Review to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Oct 31 2022, 7:08 PM

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

[mediawiki/core@master] Correct flush value for new icon specification

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

Jdlrobson moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 1 2022, 4:30 PM

Change 851146 merged by jenkins-bot:

[mediawiki/core@master] Correct flush value for new icon specification

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.10; 2022-11-14); removed MW-1.40-notes (1.40.0-wmf.8; 2022-10-31).Nov 1 2022, 10:00 PM

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

[mediawiki/skins/MinervaNeue@master] Disable new flushing rules on mobile

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

Jdlrobson moved this task from Code Review to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 2 2022, 8:26 PM

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

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

[mediawiki/skins/Vector@master] Disable new flushing rules with feature flag disabled

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

Change 852291 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Disable new flushing rules with feature flag disabled

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

Change 852276 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Disable new flushing rules on mobile

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

bwang moved this task from Doing to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 3 2022, 5:14 PM

Jdlrobson moved this task from Code Review to Blocked on Others on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 3 2022, 8:48 PM

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

[mediawiki/core@master] Add and document mw-ui-flush classes to eventually replace existing ones

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

Jdlrobson moved this task from Blocked on Others to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 4 2022, 3:47 PM

Jdlrobson mentioned this in T320101: [M] Enable VectorVisualEnhancementsNext everywhere.

Change 850594 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix alignment between icons on left and right of screen

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

Change 853062 abandoned by Jdlrobson:

[mediawiki/core@master] Add and document mw-ui-flush classes to eventually replace existing ones

Reason:

Abandoning in favor of https://phabricator.wikimedia.org/T322436

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

Jdlrobson moved this task from Code Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 4 2022, 6:24 PM

Jdlrobson reassigned this task from bwang to Edtadros.Nov 4 2022, 6:27 PM

Jdlrobson updated the task description. (Show Details)

Jdlrobson moved this task from Ready for Signoff to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Change 853396 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Fix ToC spacing when visual next flag is enabled, address icon related feedback

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

ovasileva mentioned this in T322673: Test VectorVisualEnhancementsNext flag.Nov 8 2022, 6:22 PM

bwang moved this task from QA to Code Review on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Nov 11 2022, 5:02 PM

bwang moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.

Change 853396 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix ToC dropdown menu spacing when visual next flag is enabled, address icon related feedback

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: On master there should be no visual regressions https://pixel.wmcloud.org/reports/desktop

Screenshot 2022-11-17 at 9.45.43 AM.png (796×1 px, 118 KB)

Not testable in Beta so moving to Ready for Signoff.

Edtadros updated the task description. (Show Details)Nov 17 2022, 5:49 PM

This can be resolved now.

Jdlrobson mentioned this in T314323: [EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022).Nov 23 2022, 4:10 PM

Jdlrobson closed this task as Resolved.Nov 23 2022, 8:18 PM

	F35791597: Screenshot 2022-11-17 at 9.45.43 AM.png
	Nov 17 2022, 5:48 PM

	F35644837: image.png
	Oct 27 2022, 7:27 PM

[M] [Technical] Vector should consistently use mw-ui-icon-flush-left and mw-ui-icon-flush-right utility classesClosed, ResolvedPublic1 Estimated Story PointsActions