Align MinervaNeue/MobileFrontend visual message treatment to Style Guide
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Volker_E
	Jul 15 2019, 10:14 AM

Description

Bring MinervaNeue & MobileFrontend error/warning/success messages/message box visual appearance close to Style Guide components template.

Originated in T127405 with current treatment is off template and has too low contrast accessibility issues

Screen Shot 2016-10-28 at 11.01.06 AM.png (690×998 px, 64 KB)

Proposed unified colors

Applying Style Guide definitions of message boxes:

Messages_20190713_error_boxed_level_AA_&_properties.png (1×1 px, 182 KB)

Steps to accomplish

Both, MinervaNeue & MobileFrontend are currently importing mediawiki.ui variables and define their own. Let's remove special overrides and just references mediawiki.ui vars until MN/MF gets independent from it. Defining in 3 places makes 0 sense
Align only colors and borders for now, padding seems contextual. Can revisit in a box unification at a later point

Details

Due Date: Dec 10 2020, 5:00 PM

Subject	Repo	Branch	Lines +/-
Carve out and limit `.error` class	mediawiki/extensions/MobileFrontend	master	+4 -4
Replace special message variables with mediawiki.ui ones	mediawiki/skins/MinervaNeue	master	+1 -9
Remove special message variables and unify message appearance	mediawiki/extensions/MobileFrontend	master	+13 -22

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	Volker_E	T228022 Align MinervaNeue/MobileFrontend visual message treatment to Style Guide
Resolved	Volker_E	T232414 `.previewnote p` should be replaced by semantic message classes as `.warningbox` and `.messagebox`
Resolved	Volker_E	T232553 Add `.messagebox` to shared.css and MinervaNeue

Event Timeline

Volker_E created this task.Jul 15 2019, 10:14 AM

Restricted Application added a project: UI-Standardization. · View Herald TranscriptJul 15 2019, 10:14 AM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Volker_E renamed this task from Align MinervaNeue visual message treatment to Style Guide to Align MinervaNeue/MobileFrontend visual message treatment to Style Guide.Jul 15 2019, 12:14 PM

Volker_E updated the task description. (Show Details)Jul 15 2019, 12:17 PM

Change 523155 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Replace special message variables with mediawiki.ui ones

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

gerritbot added a project: Patch-For-Review.Jul 15 2019, 12:44 PM

Volker_E added a project: MobileFrontend.Jul 15 2019, 12:47 PM

Volker_E updated the task description. (Show Details)

Volker_E added a subscriber: Jdrewniak.

Volker_E added a subscriber: ovasileva.

We need clarification on a current, non-standard special treatment on MobileFrontend.
Both, errorbox and error styles receive a boxed appearance.
We should differentiate boxed and inline messages, as established in the Style Guide. That means, we need to ensure all instances of boxed error should be changed to errorbox when needed. @Jdlrobson your thoughts?

Change 523159 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Remove special message variables and unify message appearance

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

Change 523159 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Remove special message variables and unify message appearance

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.14; 2019-07-16).Jul 15 2019, 9:00 PM

Thanks @Jdlrobson for reviewing quickly. One derived task has already been identified in T228100: Errors in mobile editor preview appear unstyled and are not obviously errors.

Another follow-up would be to re-consider specific .error treatment in https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/MobileFrontend/+/refs/heads/master/resources/mobile.talk.overlays/talk.less#6

Class is currently on a textarea, it doesn't seem to get applied even when error is set:

Also, that should probably be generalized on mw-ui-input and not as talk.less specific rule?
URL of my example above: https://en.m.wikipedia.org/wiki/Talk:National_Museum,_New_Delhi#/talk/new

Volker_E moved this task from Backlog to Doing… on the UI-Standardization-Kanban board.Jul 16 2019, 1:14 PM

Change 523155 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Replace special message variables with mediawiki.ui ones

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

Restricted Repository Identity mentioned this in rSKIN0f17869bc3ea: Update git submodules.Jul 16 2019, 9:20 PM

ReleaseTaggerBot edited projects, added MW-1.34-notes (1.34.0-wmf.15; 2019-07-23); removed MW-1.34-notes (1.34.0-wmf.14; 2019-07-16).Jul 16 2019, 10:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jul 16 2019, 10:10 PM

Jdlrobson added a comment.Sep 9 2019, 10:01 PM

This comment was removed by Jdlrobson.

Volker_E closed subtask T232414: `.previewnote p` should be replaced by semantic message classes as `.warningbox` and `.messagebox` as Resolved.Sep 17 2019, 9:29 PM

Change 556504 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MobileFrontend@master] Carve out and limit .error class

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

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptDec 12 2019, 12:04 AM

gerritbot added a project: Patch-For-Review.Dec 12 2019, 12:04 AM

Volker_E updated the task description. (Show Details)Dec 12 2019, 12:10 AM

Change 556504 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Carve out and limit .error class

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

Maintenance_bot removed a project: Patch-For-Review.Dec 12 2019, 3:10 PM

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.11; 2019-12-17).Dec 12 2019, 4:00 PM

Jdlrobson moved this task from Backlog to Blocked on Discussion on the MinervaNeue board.Jan 17 2020, 10:38 PM

Jdlrobson moved this task from Backlog to Team: web on the MobileFrontend board.Jul 24 2020, 2:51 AM

Jdlrobson added a project: MediaWiki-Core-Skin-Architecture.Dec 9 2020, 7:24 PM

Jdlrobson moved this task from Backlog to Phase 4 - Standardize ResourceLoaderSkinModules styling rules on the MediaWiki-Core-Skin-Architecture board.Dec 9 2020, 8:23 PM

Np300 set Due Date to Dec 10 2020, 5:00 PM.Dec 11 2020, 2:08 PM

All requested treatments on system boxes have been merged. There's nothing left to accomplish.

	F30284947: Screenshot 2019-09-09 at 2.59.28 PM.png
	Sep 9 2019, 10:01 PM

	F30284946: Screenshot 2019-09-09 at 2.59.45 PM.png
	Sep 9 2019, 10:01 PM

	F29760612: Messages_20190713_error_boxed_level_AA_&_properties.png
	Jul 15 2019, 10:14 AM

	F4669690: Screen Shot 2016-10-28 at 11.01.06 AM.png
	Jul 15 2019, 10:14 AM

	F29781970: image.png
	Jul 16 2019, 1:01 PM

Align MinervaNeue/MobileFrontend visual message treatment to Style GuideClosed, ResolvedPublicActions