Page MenuHomePhabricator

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

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

WikimediaUIApex

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

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

WikimediaUIApex
  • 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

Related Objects

StatusAssignedTask
ResolvedEsanders
OpenNone
OpenNone
OpenNone
ResolvedMarkTraceur
Resolvedmatmarex
Resolvedmatmarex
Resolvedmatmarex
OpenNone
OpenNone
OpenNone
Resolved Jdlrobson
Resolvedmatmarex
Resolvedmatmarex
OpenNone
OpenNone
ResolvedEsanders
DuplicateNone
ResolvedTTO
ResolvedJayprakash12345
DuplicateNone
OpenNone
ResolvedVolker_E
ResolvedVolker_E

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 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 updated the task description. (Show Details)Sep 22 2016, 7:55 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 Normal 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

Volker_E moved this task from Next-up to Reviewing on the OOUI board.Feb 12 2019, 12:26 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
Volker_E added a comment.EditedMar 6 2019, 9:11 PM

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

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

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.
Volker_E claimed this task.
Volker_E removed a subscriber: gerritbot.
Volker_E moved this task from Reviewing to OOUI-0.30.4 on the OOUI board.Mar 7 2019, 12:56 AM
Volker_E edited projects, added OOUI (OOUI-0.30.4); removed OOUI.
Volker_E reopened this task as Open.

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

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

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

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