"Theme" (Accessibility for Reading) button in Vector 2022 should have consistent padding in button form
Closed, ResolvedPublic2 Estimated Story PointsFeature
Actions

Assigned To

Authored By

	aliu
	Dec 23 2023, 6:01 PM

Description

Feature summary (what you would like to be able to do and where):
In the above picture, as you can see, the eyeglasses button has less padding surrounding it than the other buttons.

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):
For everyone who enables the Accessibility for Reading beta

Benefits (why should this be implemented?):
Consistent interface

QA Results - Beta

AC	Status	Details
1	✅	T353987#9759167

QA Results - PROD

AC	Status	Details
1	✅	T353987#9761682

Details

	Subject	Repo	Branch	Lines +/-
	[VISUAL CHANGE] Make spacing in UserLinks menus more consistent	mediawiki/skins/Vector	master	+27 -36

Customize query in gerrit

Related Objects

Mentioned In: T363369: Verify 1.43.0-wmf.2 deployment
T355420: Appearance dropdown icon is too close notification bell
Mentioned Here: T355420: Appearance dropdown icon is too close notification bell

Event Timeline

aliu created this task.Dec 23 2023, 6:01 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptDec 23 2023, 6:01 PM

Aklapper renamed this task from New "Theme" (Accessibilty for Reading) button in V22 should have consistent padding in button form to New "Theme" (Accessibilty for Reading) button in Vector22 should have consistent padding in button form.Dec 23 2023, 7:56 PM

Aklapper renamed this task from New "Theme" (Accessibilty for Reading) button in Vector22 should have consistent padding in button form to New "Theme" (Accessibilty for Reading) button in Vector2022 should have consistent padding in button form.

aliu renamed this task from New "Theme" (Accessibilty for Reading) button in Vector2022 should have consistent padding in button form to New "Theme" (Accessibilty for Reading) button in Vector 2022 should have consistent padding in button form.Dec 23 2023, 7:57 PM

Jdlrobson added a project: Web-Team-Backlog (FY2023-24 Q3 Sprint 1).Jan 2 2024, 7:19 PM

Jdlrobson moved this task from FY2023-24 Q3 Sprint 1 to FY2023-24 Q3 Sprint 2 on the Web-Team-Backlog board.Jan 4 2024, 12:10 AM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 2); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 1).

@JScherer-WMF - thoughts on this one from your side?

ovasileva triaged this task as Medium priority.Jan 4 2024, 3:33 PM

Jdlrobson renamed this task from New "Theme" (Accessibilty for Reading) button in Vector 2022 should have consistent padding in button form to [Design] New "Theme" (Accessibilty for Reading) button in Vector 2022 should have consistent padding in button form.Jan 29 2024, 4:15 PM

Jdlrobson assigned this task to JScherer-WMF.

This could be because the icon has a different shape than the square-ish icons beside it, in which case the padding would be fine.

@Jdrewniak or @Jdlrobson can you confirm that the padding is off? If not, I'll work with @DTorsani-WMF on solutions. He is already thinking through a more square version of the icon.

The bell icon is quite far from a square. I'm not sure what you mean.

See the screenshot above. The Appearance button is structured very different from the others and doesn't have the vector-menu etc. css classes

In T353987#9496358, @aliu wrote:

The bell icon is quite far from a square. I'm not sure what you mean.

I double checked this, thanks! There is a 6 pixel discrepancy in the computed distance between icons.

They should all be 16. I'll move this to ready for dev and unassign myself.

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 3); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 2).Jan 30 2024, 5:01 PM

ovasileva merged a task: T355420: Appearance dropdown icon is too close notification bell.Jan 30 2024, 5:44 PM

ovasileva mentioned this in T355420: Appearance dropdown icon is too close notification bell.

ovasileva added a subscriber: Esanders.

aliu merged a task: T355420: Appearance dropdown icon is too close notification bell.Jan 30 2024, 5:49 PM

Jdlrobson added a project: FY2023-24-WE 2.1 Typography and palette customizations.Feb 1 2024, 7:20 PM

Copying my screenshot from T355420:

Buttons in vector-user-links are usually spaced by 8px, but the new appearance dropdown isn't:

Jdlrobson moved this task from Incoming to typography/darkmode on the Desktop Improvements (Vector 2022) board.Feb 8 2024, 5:21 PM

Jdlrobson renamed this task from [Design] New "Theme" (Accessibilty for Reading) button in Vector 2022 should have consistent padding in button form to "Theme" (Accessibility for Reading) button in Vector 2022 should have consistent padding in button form.Feb 8 2024, 6:01 PM

Jdlrobson moved this task from Backlog to General on the FY2023-24-WE 2.1 Typography and palette customizations board.Feb 9 2024, 6:31 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 4); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 3).Feb 12 2024, 7:07 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 5); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 4).Feb 26 2024, 7:04 PM

Jdlrobson edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (FY2023-24 Q3 Sprint 5).Mar 11 2024, 7:09 PM

ovasileva edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 5); removed Web-Team-Backlog.Mar 21 2024, 4:22 PM

Mabualruz edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 6); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 5).Mar 21 2024, 4:49 PM

ovasileva raised the priority of this task from Medium to High.Mar 21 2024, 5:25 PM

Jdlrobson set the point value for this task to 2.Mar 21 2024, 5:41 PM

Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 6) board.

SToyofuku-WMF claimed this task.Mar 25 2024, 10:16 PM

SToyofuku-WMF moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 6) board.

(jk)

ovasileva lowered the priority of this task from High to Medium.Mar 26 2024, 8:18 AM

ovasileva moved this task from Ready for Development to Incoming on the Web-Team-Backlog (FY2023-24 Q3 Sprint 6) board.Mar 26 2024, 4:45 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q4 Sprint 1); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 6).Apr 3 2024, 2:04 AM

Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q4 Sprint 1) board.Apr 5 2024, 6:21 AM

Jdrewniak claimed this task.Thu, Apr 18, 2:47 PM

Jdrewniak moved this task from Ready for Development to Doing on the Web-Team-Backlog (FY2023-24 Q4 Sprint 1) board.

Change #1021503 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Make spacing in UserLinks menus more consistent

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

gerritbot added a project: Patch-For-Review.Thu, Apr 18, 3:17 PM

@JScherer-WMF although the patch above seeks to make the spacing around the icons more consistent, this doesn't mean there is 16px from glyph to glyph because sometimes the alert and notification icons can have a count beside them that sticks out beyond the original image. Instead, the patch targets spacing around the icon containers as shown below.


current spacing (top) vs new spacing (bottom)	without icon container outlines

new spacing at different resolutions (logged-out):

Screenshot 2024-04-18 at 10.42.46 AM.png (2×1 px, 669 KB)

Screenshot 2024-04-18 at 10.42.38 AM.png (2×2 px, 708 KB)

Screenshot 2024-04-18 at 10.42.27 AM.png (2×3 px, 767 KB)

new spacing at different resolutions (logged-in):

Screenshot 2024-04-18 at 10.41.00 AM.png (2×1 px, 728 KB)

Screenshot 2024-04-18 at 10.40.47 AM.png (2×3 px, 1 MB)

Screenshot 2024-04-18 at 10.40.53 AM.png (2×2 px, 947 KB)

Implementation notes:
The implementation here was challenging because the menus don't conform to a standardized HTML structure. Some elements have classes that are also used in drop-downs. To handle this, 4px margins (both right and left, so 8px total) were added on all .vector-dropdown-label and .mw-list-item in this section, then reset to zero for items inside drop-downs.