⚓ T319070 [M] [Visual Enhancements] Correct margins of icons and arrows

AC	Status	Details
1	❓	T319070#8306196
2	✅	T319070#8306196

Project	Branch	Lines +/-	Subject
mediawiki/skins/Vector	master	+7 -0	Limit user dropdown link to 48px
mediawiki/skins/Vector	master	+8 -2	Restrict margin between arrow and icon to feature flag
mediawiki/skins/Vector	master	+17 -5	Visual enhancements next: Fix alignments of icons
mediawiki/skins/Vector	master	+5 -13	Revert "Visual enhancements next: Fix alignments of icons"
mediawiki/skins/Vector	master	+13 -5	Visual enhancements next: Fix alignments of icons

Status	Subtype	Assigned	Task
Open		ovasileva	T317884 [EPIC] Vector 2022 post-deployment work
Open		ovasileva	T317632 [EPIC] Visual refinements pt2
Open		None	T304330 ToC: micro-interactions
Open	BUG REPORT	None	T306744 Sticky header doesn't show the page title if PAGEBANNER is used
Resolved	BUG REPORT	ovasileva	T315639 Vector 2022: Absence of #contentSub breaks on-wiki gadgets and user scripts
Resolved	BUG REPORT	ovasileva	T316095 PAGEBANNER is not displaying at euwiki with New Vector
Resolved		ovasileva	T311311 Visual refinements to page toolbar & VE toolbar
Resolved		ovasileva	T313409 Hide article toolbar/tab-bar if there is only one item/tab
Resolved		Mabualruz	T313349 Allow special pages to register navigation links in skins
Open	Spike	None	T254055 Typography: Increased font-size design for Vector 2022
Resolved	BUG REPORT	ppelberg	T322738 Font size of page description, warning box, toolbar, edit buttons and other elements too large
Resolved	BUG REPORT	TheresNoTime	T321728 Preview font size has increased in Vector 2022
Resolved		ovasileva	T322000 [Unplanned] Font size in jQuery UI dialog too large when using vector 2022
Open		ovasileva	T311469 Evaluate Chinese, Japanese, and Korean characters' font size
Open		None	T313735 Make "new message" alert a floating element
Resolved		• alexhollender_WMF	T314323 [EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022)
Open		None	T314328 [Visual refinements] Decrease height of sticky header
Open		None	T314487 [Visual refinements] Decrease (or remove) min-width on User menu
Open		Jdlrobson	T315609 [Visual refinements] Fix language button styling
Resolved		ovasileva	T316032 [Visual refinements] Bold active section in ToC (Part 2!)
Resolved		ovasileva	T316609 Buttons in sticky header should never wrap
Resolved		• KieranMcCann	T316950 [Visual refinements] Reduce height of article toolbar
Open		None	T317558 [Visual refinements] Standardize menu border radiuses & box shadows
Resolved		None	T311160 Add indicator that appears when TOC & page tools menu have been hidden
Resolved		ovasileva	T315932 TOC should float on larger screen sizes when the "hide" button is pressed
Resolved		ovasileva	T320453 [subtask] Update styling and position of floating TOC button
Open		None	T323272 Update watchstar animation
Resolved		Jdlrobson	T323244 Remove extra spacing from username/create account link
Resolved	BUG REPORT	None	T323174 Spacing between the collapsed ToC button and page title changes above 1000px
Resolved	BUG REPORT	ovasileva	T323172 [S] Extra spacing around personal tools icon buttons on viewports below tablet
Open	BUG REPORT	None	T323177 Page titlebar elements are vertically centered when the page title wraps
Open		None	T323631 Make dropdown arrows consistent across Vector and aligned with the spec
Resolved		None	T325086 When navigating directly to a sub-section, the table of contents section should expand (if collapsed) and be bolded
Resolved		ovasileva	T323625 Add label and title attribute/tooltip to full-screen toggle button
Resolved		None	T323245 Weird flash when opening sticky search
Open		None	T325553 [Design spike] Style "hide" and "move to sidebar" buttons as buttons (not links)
Resolved		ovasileva	T325554 [Regression] ToC icon in sticky header is missing spacing
Open	BUG REPORT	None	T325083 Sticky user menu is invisible but still clickable after scrolling to top
Open	BUG REPORT	None	T320906 Text for "You have a new talk page message" does not get larger when the page font size is made larger
In Progress		None	T303013 Indicate when search results are from redirects (sometimes)
Resolved		• EUdoh-WMF	T323987 Add supporting text in MenuItem component
Resolved		Jdlrobson	T319047 [Goal] Vector 2022 post-deployment work for Q2
Resolved		ovasileva	T317573 (M) [Visual enhancement] Remove horizontal padding on .mw-body
Resolved		ovasileva	T317583 [S] [Visual refinements] Remove ToC and main menu desktop wide viewport spacing
Resolved		• alexhollender_WMF	T319070 [M] [Visual Enhancements] Correct margins of icons and arrows

Jdlrobson created this task.Sep 30 2022, 7:35 PM

Restricted Application removed a project: Patch-For-Review. · View Herald TranscriptSep 30 2022, 7:35 PM

Jdlrobson renamed this task from Correct margins of icons and arrows to [Visual Enhancements] Correct margins of icons and arrows.Sep 30 2022, 7:35 PM

Jdlrobson removed projects: Epic, MW-1.40-notes (1.40.0-wmf.2; 2022-09-19), Design-Systems-Team.

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

[mediawiki/skins/Vector@master] Visual enhancements next: Fix alignments of icons

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

gerritbot added a project: Patch-For-Review.Sep 30 2022, 7:35 PM

Jdlrobson updated the task description. (Show Details)Sep 30 2022, 7:40 PM

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

Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog board.Sep 30 2022, 8:11 PM

this is now ready for estimation.

Jdlrobson triaged this task as Low priority.Oct 3 2022, 9:00 PM

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

Jdlrobson updated the task description. (Show Details)

Change 832003 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Visual enhancements next: Fix alignments of icons

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

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

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

[mediawiki/skins/Vector@master] Revert "Visual enhancements next: Fix alignments of icons"

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

Change 837720 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Revert "Visual enhancements next: Fix alignments of icons"

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

Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-2022-23-Q2); removed Web-Team-Backlog (Kanbanana-2022-23-Q1).Oct 4 2022, 12:38 AM

Jdlrobson updated the task description. (Show Details)

Jdlrobson mentioned this in T319071: MediaWiki UI: Bring touch area styles in line with latest Codex.

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

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

[mediawiki/skins/Vector@master] [Take 2] Visual enhancements next: Fix alignments of icons

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/575115d9e1/w

Alex please take a look at the patch demo and move this to needs more work or code review accordingly:
https://patchdemo.wmflabs.org/wikis/575115d9e1/w/index.php?title=Main_Page&useskin=vector-2022&vectorvisualenhancementnext=1

There should be no visual changes without feature flag.

Jdlrobson mentioned this in T317371: [S] New watchstar doesn't spin.Oct 4 2022, 4:18 PM

LGoto set the point value for this task to 1.Oct 4 2022, 4:56 PM

@Jdlrobson this is looking great. the only thing I see is 1 extra pixel between the person icon and the chevron/dropdown arrow (should be 6px of space between, currently there is 7px):

Screen Shot 2022-10-04 at 2.22.13 PM.png (1×1 px, 233 KB)

if that's difficult to remove we can leave it as is — not a big deal.

8px spacing between icon buttons looks good:

We can fix that no problem.

Jdlrobson added a parent task: T319047: [Goal] Vector 2022 post-deployment work for Q2.Oct 4 2022, 11:03 PM

https://gerrit.wikimedia.org/r/c/837721 is design reviewed and ready for code review.

Change 837721 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Visual enhancements next: Fix alignments of icons

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

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.5; 2022-10-10); removed MW-1.40-notes (1.40.0-wmf.4; 2022-10-03).Oct 5 2022, 3:00 AM

LGoto renamed this task from [Visual Enhancements] Correct margins of icons and arrows to [M] [Visual Enhancements] Correct margins of icons and arrows.Oct 5 2022, 5:02 PM

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

[mediawiki/skins/Vector@master] Restrict margin between arrow and icon to feature flag

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

Jdlrobson removed Jdlrobson as the assignee of this task.Oct 5 2022, 7:19 PM

Change 838853 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Restrict margin between arrow and icon to feature flag

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

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

Test Result - Beta

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

Test Artifact(s):

QA Steps

❓AC1: Ensure all button and icon sizings meet the specification above
Normal:
these look good

Screen Shot 2022-10-10 at 6.16.47 PM.png (235×315 px, 25 KB)

Screen Shot 2022-10-10 at 6.17.00 PM.png (240×335 px, 26 KB)

Screen Shot 2022-10-10 at 6.17.09 PM.png (218×341 px, 23 KB)

Dropdown:
❓ I couldn't get anything showing a width of 48px, is this acceptible? As for the individual items in the menu, the icons were all 20px with a height of 32px. I couldn't verify left and right padding.

Screen Shot 2022-10-10 at 6.19.40 PM.png (398×339 px, 34 KB)

Screen Recording 2022-10-10 at 6.31.48 PM.mov.gif (526×320 px, 491 KB)

Spacing between buttons:
column gap is 8px.

✅ AC2: These changes should be limited to the wgVectorVisualEnhancementNext feature flag

with the feature flag:

Screen Shot 2022-10-10 at 6.26.11 PM.png (332×239 px, 18 KB)

without the feature flag:

Screen Shot 2022-10-10 at 6.25.20 PM.png (222×322 px, 24 KB)

Screen Shot 2022-10-10 at 6.26.23 PM.png (338×242 px, 21 KB)

Edtadros updated the task description. (Show Details)Oct 11 2022, 1:38 AM

Alex I know your off next week (possibly now?) but wondered if you wanted to sign off Edward's comments

@Jdlrobson I'm guessing the 1px issue I noted here T319070#8284272 (which might be more of a 2px issues) is the reason why @Edtadros is seeing that dropdown at 50px instead of 48px.

Jdlrobson moved this task from Ready for Signoff to Needs More Work on the Web-Team-Backlog (Kanbanana-2022-23-Q2) board.Oct 21 2022, 12:28 AM

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

[mediawiki/skins/Vector@master] Limit user dropdown link to 48px

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

Let's check this is our sync next week.

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/79ec5fddc4/w

You can review this (when logged in) @ https://patchdemo.wmflabs.org/wikis/79ec5fddc4/wiki/Main_Page?useskin=vector-2022&vectorvisualenhancementnext=1

Seeking review on https://gerrit.wikimedia.org/r/c/845776

• alexhollender_WMF removed • alexhollender_WMF as the assignee of this task.Oct 26 2022, 2:44 PM

LGoto assigned this task to • nray.Oct 26 2022, 4:39 PM

• alexhollender_WMF mentioned this in T319449: [M] Create toggle to control the fixed width of the content for Vector 2022 skin.Oct 26 2022, 4:41 PM

Change 845776 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Limit user dropdown link to 48px

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

Alex would you mind checking beta cluster one last time and signing off? All should be taken care of now within the feature flag:
https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?useskin=vector-2022&vectorvisualenhancementnext=1

ReleaseTaggerBot edited projects, added MW-1.40-notes (1.40.0-wmf.8; 2022-10-31); removed MW-1.40-notes (1.40.0-wmf.5; 2022-10-10).Oct 26 2022, 10:00 PM

• alexhollender_WMF mentioned this in T320101: [M] Enable VectorVisualEnhancementsNext everywhere.Oct 31 2022, 7:59 PM

@Jdlrobson I'm seeing an issue with the collapsed TOC icon, in the case where it's sitting next to the page title:

it's not properly aligned

it seems to be the wrong size (expected 32x32px)

Yeh this is currently handled in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/850594. I'll assign this to me for now, until that's merged and then pass it back to you for sign off.

@alexhollender_WMF the alignment should now be taken care of. Could you take another look at the collapsed table of contents icon on https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?useskin=vector-2022&vectorvisualenhancementnext=1 and resolve if it looks good?

In T319070#8376413, @Jdlrobson wrote:

@alexhollender_WMF the alignment should now be taken care of. Could you take another look at the collapsed table of contents icon on https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein?useskin=vector-2022&vectorvisualenhancementnext=1 and resolve if it looks good?

awesome, seems fixed

Screen Shot 2022-11-08 at 11.22.57 AM.png (376×1 px, 257 KB)

• alexhollender_WMF mentioned this in T323246: Icon button dropdown should be 48px wide (not 50px).Nov 16 2022, 10:51 PM

bwang mentioned this in T323631: Make dropdown arrows consistent across Vector and aligned with the spec.Nov 22 2022, 6:46 PM

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/575115d9e1/w/~~

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/79ec5fddc4/w/~~

[M] [Visual Enhancements] Correct margins of icons and arrows
Closed, ResolvedPublic1 Estimated Story Points
Actions

Description

Technical Blockers

TODO

QA Results - Beta

Details

Related Objects
Search...

Event Timeline

Test Result - Beta

QA Steps

	F35720836: Screen Shot 2022-11-08 at 11.22.57 AM.png
	Nov 8 2022, 4:23 PM

	F35685594: Screen Shot 2022-10-31 at 4.10.10 PM.png
	Oct 31 2022, 8:18 PM

	F35685580: Screen Shot 2022-10-31 at 4.17.00 PM.png
	Oct 31 2022, 8:18 PM

	F35561767: Screen Shot 2022-10-10 at 6.26.23 PM.png
	Oct 11 2022, 1:37 AM

	F35561765: Screen Shot 2022-10-10 at 6.25.20 PM.png
	Oct 11 2022, 1:37 AM

	F35561763: Screen Shot 2022-10-10 at 6.26.11 PM.png
	Oct 11 2022, 1:37 AM

	F35561773: Screen Shot 2022-10-10 at 6.29.09 PM.png
	Oct 11 2022, 1:37 AM

	F35561771: Screen Recording 2022-10-10 at 6.31.48 PM.mov.gif
	Oct 11 2022, 1:37 AM

[M] [Visual Enhancements] Correct margins of icons and arrowsClosed, ResolvedPublic1 Estimated Story PointsActions

Description

Technical Blockers

TODO

QA Results - Beta

Details

Related ObjectsSearch...

Event Timeline

Test Result - Beta

QA Steps

[M] [Visual Enhancements] Correct margins of icons and arrows
Closed, ResolvedPublic1 Estimated Story Points
Actions

Related Objects
Search...