Page MenuHomePhabricator

Standardize MobileFrontend buttons to match design spec
Open, MediumPublic

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, collapse section buttons 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

Event Timeline

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

(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.

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

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