Page MenuHomePhabricator
Create Task
Maniphest T323176

[S] Sticky header icon buttons are missing padding
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT
Actions

Description

Visual regression introduced by T320101. More context

Steps to replicate the issue (include links if applicable):

What happens?:
The sticky header icon buttons dont have padding

What should have happened instead?:
There should be 8px padding between each icon button

Screenshots comparing change to master prior to deployment of visual enhancements feature flag:

Screen Shot 2022-11-15 at 4.42.27 PM.png (1×2 px, 580 KB)

https://jmp.sh/w9fMa6NB

QA Results - Beta

ACStatusDetails
1✅T323176#8411668

QA Results - Prod

ACStatusDetails
1✅T323176#8418542

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Fix icon button spacing in sticky headermediawiki/skins/Vectorwmf/1.40.0-wmf.10+2 -0
Fix icon button spacing in sticky headermediawiki/skins/Vectormaster+2 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

bwang created this task.Nov 15 2022, 10:51 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 15 2022, 10:51 PM
bwang added a parent task: T322673: Test VectorVisualEnhancementsNext flag.Nov 15 2022, 10:57 PM
Jdlrobson moved this task from Incoming to Table of Contents on the Vector 2022 board.Nov 16 2022, 5:41 AM
Jdlrobson moved this task from Table of Contents to Search on the Vector 2022 board.
Jdlrobson moved this task from Incoming to Not ready to estimate on the Web-Team-Backlog-Archived board.Nov 16 2022, 5:45 AM
ovasileva triaged this task as High priority.Nov 16 2022, 9:30 PM
ovasileva edited projects, added Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2); removed Web-Team-Backlog-Archived.
Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Nov 16 2022, 10:22 PM
• alexhollender_WMF mentioned this in T322673: Test VectorVisualEnhancementsNext flag.Nov 16 2022, 10:54 PM
Jdlrobson subscribed.Nov 16 2022, 10:58 PM

This was broken by https://github.com/wikimedia/Vector/commit/16da6a5e6a484088cd45224335c58e8ae203ffcd

Quoting @bwang this "Should be a simple fix of reapplying the column-gap to vector-sticky-header-icons . I don’t think we want to be applying it to all the other containers like it was originally though. otherwise there will be extra padding between the ULS button, the edit button, and the user menu dropdown (edited) "

Jdlrobson set the point value for this task to 1.Nov 16 2022, 11:18 PM
LGoto renamed this task from Sticky header icon buttons are missing padding to [S] Sticky header icon buttons are missing padding.Nov 17 2022, 6:20 PM
LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
bwang moved this task from Ready for Development to Doing on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Nov 18 2022, 4:44 PM
bwang claimed this task.Nov 18 2022, 5:18 PM
gerritbot added a comment.Nov 18 2022, 5:18 PM

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

[mediawiki/skins/Vector@master] Fix icon button spacing in sticky header

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

gerritbot added a project: Patch-For-Review.Nov 18 2022, 5:18 PM
bwang removed bwang as the assignee of this task.Nov 18 2022, 5:20 PM
bwang moved this task from Doing to Code Review on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
bwang added a comment.Nov 18 2022, 5:43 PM
In T323176#8401078, @Jdlrobson wrote:

This was broken by https://github.com/wikimedia/Vector/commit/16da6a5e6a484088cd45224335c58e8ae203ffcd

Quoting @bwang this "Should be a simple fix of reapplying the column-gap to vector-sticky-header-icons . I don’t think we want to be applying it to all the other containers like it was originally though. otherwise there will be extra padding between the ULS button, the edit button, and the user menu dropdown (edited) "

I realized that the spacing will be slightly off work if the language button isnt in the sticky header. I still think the simple solution of applying column-gap to .vector-sticky-header-icons is worth doing, but down the line I think we should implement a more robust solution that generically applies to both personal tools and the sticky header, regardless of their composition of regular buttons, icon buttons or links. This should be possible after T323244. We could refactor the .vector-sticky-header-end container to be a flat list of elements. Then we could use column-gap and negative margins on regular buttons to achieve the spacing we want.

• nray mentioned this in T320101: [M] Enable VectorVisualEnhancementsNext everywhere.Nov 19 2022, 1:07 AM
Jdlrobson claimed this task.Nov 21 2022, 6:13 PM
Jdlrobson mentioned this in T323244: Remove extra spacing from username/create account link.Nov 21 2022, 7:31 PM

@bwang makes sense to me. I added a note to T323244

gerritbot added a comment.Nov 21 2022, 7:39 PM

Change 858627 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix icon button spacing in sticky header

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

Jdlrobson reassigned this task from Jdlrobson to Edtadros.Nov 21 2022, 7:45 PM
Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.12; 2022-11-28).Nov 21 2022, 8:01 PM
Maintenance_bot removed a project: Patch-For-Review.Nov 21 2022, 8:30 PM
Edtadros moved this task from QA to QA in Prod on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.Nov 21 2022, 11:55 PM

Test Result - Beta

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

Test Artifact(s):

QA Steps

Go to https://en.wikipedia.beta.wmflabs.org/wiki/Polar_bear?useskin=vector-2022
Log in
Scroll down to see the sticky header
✅ AC1: There should be 8px padding between each icon button

Screenshot 2022-11-21 at 3.53.19 PM.png (1×1 px, 512 KB)

gerritbot added a comment.Nov 22 2022, 4:12 PM

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

[mediawiki/skins/Vector@wmf/1.40.0-wmf.10] Fix icon button spacing in sticky header

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

gerritbot added a project: Patch-For-Review.Nov 22 2022, 4:12 PM
gerritbot added a comment.Nov 22 2022, 9:43 PM

Change 859508 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.40.0-wmf.10] Fix icon button spacing in sticky header

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

Stashbot added a comment.Nov 22 2022, 9:44 PM

Mentioned in SAL (#wikimedia-operations) [2022-11-22T21:44:17Z] <samtar@deploy1002> Started scap: Backport for [[gerrit:859508|Fix icon button spacing in sticky header (T323176)]]

Stashbot added a comment.Nov 22 2022, 9:44 PM

Mentioned in SAL (#wikimedia-operations) [2022-11-22T21:44:39Z] <samtar@deploy1002> samtar and bwang: Backport for [[gerrit:859508|Fix icon button spacing in sticky header (T323176)]] synced to the testservers: mwdebug2001.codfw.wmnet, mwdebug1001.eqiad.wmnet, mwdebug2002.codfw.wmnet, mwdebug1002.eqiad.wmnet

Stashbot added a comment.Nov 22 2022, 9:51 PM

Mentioned in SAL (#wikimedia-operations) [2022-11-22T21:51:42Z] <samtar@deploy1002> Finished scap: Backport for [[gerrit:859508|Fix icon button spacing in sticky header (T323176)]] (duration: 07m 25s)

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.12; 2022-11-28).Nov 22 2022, 10:01 PM
Maintenance_bot removed a project: Patch-For-Review.Nov 22 2022, 10:30 PM
Jdlrobson mentioned this in T314323: [EPIC, Visual refinements] Standardize icon buttons & links (Vector 2022).Nov 23 2022, 4:10 PM
Edtadros reassigned this task from Edtadros to ovasileva.Nov 23 2022, 9:05 PM
Edtadros moved this task from QA in Prod to Ready for Signoff on the Web-Team-Backlog-Archived (Kanbanana-2022-23-Q2) board.
Edtadros subscribed.

Test Result - Prod

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

Test Artifact(s):

QA Steps

Go to https://en.wikipedia.org/wiki/Polar_bear?useskin=vector-2022
Log in
Scroll down to see the sticky header
✅ AC1: There should be 8px padding between each icon button

Screenshot 2022-11-23 at 1.03.07 PM.png (1×998 px, 470 KB)

Edtadros updated the task description. (Show Details)Nov 23 2022, 9:07 PM
ovasileva closed this task as Resolved.Nov 28 2022, 3:09 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