warnings (especially in WikimediaUI theme)
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	matmarex
	Sep 14 2016, 7:33 PM

Description

In T85853#2550072, @Tgr wrote:

OOUI error messages seem awkward to me, even apart from the issue fixed in T142639: there is just no visual sign I would recognize as error (such as red color or background). I feels closer to the explanatory text created with the 'help' keys on VForm.

I think the styling in the Apex theme is actually a bit better. (Screenshots below are from https://gerrit.wikimedia.org/r/284902.)

WikimediaUI	Apex

Warnings are even worse, they are set in the same font and color as any random label and only highlighted with a small icon.

Screen Shot 2016-09-20 at 10.02.40 AM.png (103×677 px, 13 KB)

The styles here were created by myself when implementing this feature (which we needed urgently for OOUI HTMLForm: T106947) and I probably spent about 30 seconds thinking about them. We should rethink them ;)

We might draw some inspiration from the success/warning/error message boxes in MediaWiki, see T127405: Review current style and integrate Messages and message boxes (errors, warnings) as WikimediaUI component.

Improvements integrated

WikimediaUI	Apex

Increased visibility by changing color of errors to destructive Red50,
invented a separate warning message with a Yellow50 icon, but black text for achieving WCAG 2.0 level AA contrast (also makes code semantically cleaner)
gonna provide a tad more whitespace to let messages better focus
put icon on top position for immediate identification on mobile on multiline messages
add icons to Apex for better message focus and identification
clean up some unnecessary properties to remove code duplication

Details

Subject	Repo	Branch	Lines +/-
Update OOUI to v0.30.4	mediawiki/core	master	+1 K -1 K
themes: Provide 'emphasized' color for messages	oojs/ui	master	+3 -0
Apex theme: Bring icons and layout styles from WikimediaUI theme	oojs/ui	master	+19 -10
Implement 'error' flag and 'warning' type messages	oojs/ui	master	+146 -54

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		None	T49145 Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core
Open		None	T100270 Replace use of jQuery UI and MW UI with OOUI across all Wikimedia-deployed extensions and core
Open		None	T100161 Convert all of MediaWiki core to OOUI PHP (tracking)
Resolved		MarkTraceur	T85291 Implement OOUI "display format" in MediaWiki's HTMLForm
Resolved		matmarex	T97871 PHP TextInputWidget has no 'required' config
Resolved		matmarex	T91132 Forcefully preventing default event actions on FormLayout, ButtonWidget and ButtonInputWidget is problematic
Resolved		matmarex	T85285 Disentangle VForms from HTMLForm code in core
Resolved		matmarex	T101480 Remove 'wgUseMediaWikiUIEverywhere' and code forks, always using the off/false path
Duplicate		None	T101476 [EPIC] Make mobile look and work as desired without wgUseMediaWikiUIEverywhere
Invalid		None	T101471 Convert core forms that use MW UI with wgUseMediaWikiUIEverywhere false to OOUI FormSpecialPage or explicit OOUI PHP
Resolved		Jdlrobson	T107069 Convert HistoryAction.php to use OOUI and MW's new DateInputWidget
Resolved	BUG REPORT	matmarex	T220601 DateInputWidget reflow after infusion
Resolved		matmarex	T220781 When filtering page history by date, the older/newer paging links don't work
Open		None	T107037 Convert all MW core special pages to OOUI
Resolved		• Esanders	T113758 Convert DeleteAction.php/SpecialUndelete.php to use OOUI
Duplicate		None	T171455 Dropdown widgets on Special:Delete only has partial OOUI styling
Resolved		TTO	T160236 Update action=purge page button
Resolved		Jayprakash12345	T173997 Convert file delete to use OOUI
Duplicate		None	T155964 NewSignupPage should use OOUI checkboxInputWidget instead
Resolved		Jdlrobson	T85853 Convert MW core login/create account pages to Codex (Special:UserLogin / Special:CreateAccount)
Resolved		Volker_E	T136790 Improve form layouts in OOUI MW core forms for better user experience
Resolved		Volker_E	T145674 OOUI FieldLayout errors/warnings do not look sufficiently like errors/warnings (especially in WikimediaUI theme)

Event Timeline

matmarex created this task.Sep 14 2016, 7:33 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 14 2016, 7:33 PM

matmarex raised the priority of this task from Low to Needs Triage.Sep 14 2016, 7:34 PM

matmarex added a parent task: T136790: Improve form layouts in OOUI MW core forms for better user experience.

matmarex renamed this task from OOjs UI FieldLayout errors do not look sufficiently like errors (especially in MediaWiki theme) to OOjs UI FieldLayout errors/warnings do not look sufficiently like errors/warnings (especially in MediaWiki theme).Sep 22 2016, 7:49 PM

matmarex updated the task description. (Show Details)

matmarex mentioned this in T146155: UploadWizard warns of properly filling gin all the fields; isn't clear which fields it wants.

matmarex updated the task description. (Show Details)Sep 22 2016, 7:55 PM

Volker_E subscribed.Sep 22 2016, 8:03 PM

Jdforrester-WMF moved this task from Backlog to Next-up on the OOUI board.Feb 7 2017, 4:36 PM

Jdforrester-WMF triaged this task as Medium priority.Feb 14 2017, 9:57 PM

Jdforrester-WMF renamed this task from OOjs UI FieldLayout errors/warnings do not look sufficiently like errors/warnings (especially in MediaWiki theme) to OOjs UI FieldLayout errors/warnings do not look sufficiently like errors/warnings (especially in WikimediaUI theme).May 20 2017, 8:24 AM

Volker_E renamed this task from OOjs UI FieldLayout errors/warnings do not look sufficiently like errors/warnings (especially in WikimediaUI theme) to OOUI FieldLayout errors/warnings do not look sufficiently like errors/warnings (especially in WikimediaUI theme).Jan 6 2018, 7:49 AM

Volker_E updated the task description. (Show Details)

In OOUI 0.26 they look like this:

…which is maybe a bit better, but not much better.

Currently, I can't identify use cases for differentiating between user message groups 'errors' and 'warnings'. OOUI's handling as of v0.30.2 is that we offer 'notice' and 'warning/error' messages, where latter labels are used interchangably.
For the time being it seems more reasonable to
a) provide only a 'warning' flag (warning, as not every warning is an error, but every error is a warning, so resulting in more application flexibility) or
b) have an 'error' flag that is 1:1 equivalent to 'warning'

It's unsettling to have oo-ui-fieldLayout-messages-error > oo-ui-flaggedElement-warning

A note on the naming: in OOUI, there are "errors" and "notices"; in MediaWiki, they are correspondingly called "errors" and "warnings". This inconsistency is stupid and I'm afraid it is my fault. (In OOUI, there is also a "warning" flag, which is completely unrelated, and I think here someone else is to blame.)

The difference is that errors have to be corrected by the user before a form can be submitted, while notices/warnings do not. (This is just the convention, not enforced by the code.)

For example, UploadWizard uses both errors and notices/warnings in this manner:

Change 489917 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Implement 'error' flag and 'warning' type messages

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

gerritbot added a project: Patch-For-Review.Feb 12 2019, 12:26 AM

Volker_E moved this task from Next-up to Reviewing on the OOUI board.Feb 12 2019, 12:26 AM

Volker_E mentioned this in T213334: Road to OOUI v1.0.0.

Volker_E mentioned this in T85853: Convert MW core login/create account pages to Codex (Special:UserLogin / Special:CreateAccount).Feb 21 2019, 6:42 AM

Change 489917 merged by jenkins-bot:
[oojs/ui@master] Implement 'error' flag and 'warning' type messages

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

Volker_E updated the task description. (Show Details)Mar 6 2019, 2:09 AM

A bit of context to the change above and several other smaller amendments:

We've increased visibility by changing color of errors to destructive Red50,
invented a separate warning message with a Yellow50 icon, but black text for achieving WCAG 2.0 level AA contrast (also makes code semantically cleaner)
gonna provide a tad more whitespace to let messages better focus
put icon on top position for immediate identification on mobile on multiline messages
add icons to Apex for better message focus and identification
clean up some unnecessary properties to remove code duplication

Change 494827 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] Apex theme: Bring icons and layout styles from WikimediaUI theme

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

Volker_E updated the task description. (Show Details)Mar 6 2019, 9:56 PM

Volker_E updated the task description. (Show Details)

Change 494827 merged by jenkins-bot:
[oojs/ui@master] Apex theme: Bring icons and layout styles from WikimediaUI theme

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

We're staying with inline messages similar to MediaWiki's core, while message boxes are for places like full article messages.

Volker_E closed this task as Resolved.Mar 6 2019, 11:25 PM

Volker_E claimed this task.

Volker_E removed a project: Patch-For-Review.

Volker_E removed a subscriber: gerritbot.

Re-opened as color emphasis on warning/notices not yet given.

Change 494864 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] themes: Provide 'emphasized' color for messages

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

gerritbot added a project: Patch-For-Review.Mar 7 2019, 1:06 AM

Change 494864 merged by jenkins-bot:
[oojs/ui@master] themes: Provide 'emphasized' color for messages

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

Volker_E closed this task as Resolved.Mar 7 2019, 3:54 AM

Volker_E removed a project: Patch-For-Review.

Change 494883 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/core@master] Update OOUI to v0.30.4

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

gerritbot added a project: Patch-For-Review.Mar 7 2019, 9:22 AM

Change 494883 merged by jenkins-bot:
[mediawiki/core@master] Update OOUI to v0.30.4

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

Volker_E removed a project: Patch-For-Review.Mar 7 2019, 11:36 PM

Volker_E mentioned this in T218236: Evaluate 'notice' type messages and decide on deprecating it in favor of 'warning'.Mar 13 2019, 5:37 PM

	F4491169: Screen Shot 2016-09-20 at 10.02.40 AM.png
	Sep 22 2016, 7:49 PM

	F28338639: image.png
	Mar 6 2019, 9:56 PM

	F28333479: image.png
	Mar 6 2019, 2:09 AM

	F28195237: image.png
	Feb 11 2019, 11:26 PM

	F15917880: image.png
	Mar 20 2018, 6:43 PM

OOUI FieldLayout errors/warnings do not look sufficiently like errors/warnings (especially in WikimediaUI theme)Closed, ResolvedPublicActions