Standardize MobileFrontend buttons to match design spec
Closed, ResolvedPublic5 Estimated Story Points
Actions

Assigned To

Authored By

	bwang
	Oct 22 2021, 6:47 PM

Description

Background

MobileFrontend is responsible for certain JS buttons that are still relying primarily on mw-ui-icon-element. To name a few these include the search overlay close button, VE overlay buttons, buttons inside the drawer component and others. This approach means these buttons are lacking focus and active states, and are not aligned with the design style guide specs for "quiet buttons"

This task is for updating MobileFrontend buttons to match the implementation in MinerveNeue and Vector, aka add the mw-ui-button and mw-ui-button-quiet classes to mw-ui-icon-element buttons.

This is a follow up to: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/MobileFrontend/+/733009

QA

Ensure all icon buttons on the mobile site all have the correct button states
The collapse section buttons should no longer be styled as buttons, as the entire header open and close sections

Details

	Subject	Repo	Branch	Lines +/-
	Standardize button and icons in MobileFrontend to match Minerva and Vector	mediawiki/extensions/MobileFrontend	master	+287 -70
	Restrict overlay button styles to non icon buttons	mediawiki/skins/MinervaNeue	master	+1 -1

Customize query in gerrit

Related Objects

Mentioned In: T294191: Mobile section editing icon is oversized when level 0 headings are present on page

Event Timeline

bwang created this task.Oct 22 2021, 6:47 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 22 2021, 6:47 PM

bwang updated the task description. (Show Details)Oct 22 2021, 6:48 PM

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

[mediawiki/extensions/MobileFrontend@master] POC: Standardize button and icons in MobileFrontend to match Minerva and Vector

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

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

[mediawiki/skins/MinervaNeue@master] Restrict overlay button styles to non icon buttons

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

Change 732992 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Restrict overlay button styles to non icon buttons

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

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.7; 2021-11-02).Oct 26 2021, 6:00 PM

cjming edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog.Oct 29 2021, 3:57 PM

Jdlrobson claimed this task.Nov 1 2021, 5:09 PM

ovasileva triaged this task as Medium priority.Nov 2 2021, 5:20 PM

ovasileva added a parent task: T266072: [GOAL] Build Minerva the way we build Vector (adoption of SkinMustache).

(This is not related to the technical goal). We hit a few regressions relating to icons so this will help future proof it a little better.

This would mean that section heading icons have focus states.

Screen Shot 2021-11-05 at 10.36.32 AM.png (304×648 px, 12 KB)

In the case of section headings, shouldn't the entire heading have the focus state?

Moving to backlog for now, as I'm going to be out on vacation and want to chat with @bwang before we proceed with this task.

Jdlrobson moved this task from Backlog to Simplify MobileFrontend on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Dec 7 2021, 1:41 AM

Jdlrobson moved this task from Simplify MobileFrontend to MobileFrontend frontend cleanup on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Dec 7 2021, 1:45 AM

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/42a757c950/w/

Bernard has a patch so moving to sprint board for estimation.

Jdlrobson removed Jdlrobson as the assignee of this task.Jan 13 2022, 11:24 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson subscribed.

LGoto set the point value for this task to 5.Jan 31 2022, 6:40 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

bwang moved this task from Ready for Development to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Feb 7 2022, 6:53 PM

bwang updated the task description. (Show Details)

bwang updated the task description. (Show Details)Feb 7 2022, 6:56 PM

Jdlrobson claimed this task.Feb 8 2022, 6:05 PM

Jdlrobson moved this task from Code Review to Design Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Feb 9 2022, 10:20 PM

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

https://patchdemo.wmflabs.org/wikis/c23454a6bd/w/

@alexhollender_WMF For this one I recommend performing design review with a real device and testing on both beta cluster and patch demo (for real content make sure to test references for example)

This would likely also benefit from an exploratory QA by Edward, so please move to QA when design review is complete.

Change 733009 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Standardize button and icons in MobileFrontend to match Minerva and Vector

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

ReleaseTaggerBot edited projects, added MW-1.38-notes (1.38.0-wmf.22; 2022-02-14); removed MW-1.38-notes (1.38.0-wmf.7; 2021-11-02).Feb 9 2022, 11:00 PM

Maintenance_bot removed a project: Patch-For-Review.Feb 9 2022, 11:10 PM

bwang closed this task as Resolved.Feb 22 2022, 9:19 PM

bwang reopened this task as Open.

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

~~https://patchdemo.wmflabs.org/wikis/42a757c950/w/~~

Jdlrobson moved this task from Design Review to Ready for Signoff on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.May 31 2022, 5:12 PM

I sent an email to Alex to remind him to review this at a later date.

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

~~https://patchdemo.wmflabs.org/wikis/c23454a6bd/w/~~

DLynch mentioned this in T294191: Mobile section editing icon is oversized when level 0 headings are present on page.Aug 4 2022, 2:59 PM

	F34731915: Screen Shot 2021-11-05 at 10.36.32 AM.png
	Nov 5 2021, 6:06 PM

Standardize MobileFrontend buttons to match design specClosed, ResolvedPublic5 Estimated Story PointsActions