Page MenuHomePhabricator

Document components' validation states
Closed, ResolvedPublic

Assigned To
None
Authored By
Sarai-WMDE
Nov 12 2020, 5:24 PM
Referenced Files
F33917343: Screenshot 2020-11-17 at 12.34.49.png
Nov 17 2020, 11:34 AM
F33917341: Screenshot 2020-11-17 at 12.33.37.png
Nov 17 2020, 11:34 AM
F33913277: Screenshot 2020-11-12 at 18.21.31.png
Nov 12 2020, 5:24 PM
F33913238: Screenshot 2020-11-12 at 18.11.53.png
Nov 12 2020, 5:24 PM
F33913259: Screenshot 2020-11-12 at 18.17.01.png
Nov 12 2020, 5:24 PM
F33913271: Screenshot 2020-11-12 at 18.19.51.png
Nov 12 2020, 5:24 PM
F33913284: Screenshot 2020-11-12 at 18.23.07.png
Nov 12 2020, 5:24 PM
Tokens
"Like" token, awarded by Volker_E.

Description

The Design style guide should display the applicable validation states (error, warning, success, notice( ?)...) of input components.

At the moment, only limited validation guidelines are provided, and several divergent approaches can be found in production (red border + red text, red border only, with or without inline validation message, persistent red border on focus or not), so it's hard to infer any style patterns. Some live examples of how validated components are currently styled:

Link input field (VE):

Screenshot 2020-11-12 at 18.11.53.png (136×776 px, 18 KB)

Input/combobox (VE):

Screenshot 2020-11-12 at 18.17.01.png (140×936 px, 16 KB)

Button/dropdown (VE):

Screenshot 2020-11-12 at 18.19.51.png (86×208 px, 7 KB)

Lookup (Structured data, Commons):

Screenshot 2020-11-12 at 18.21.31.png (86×342 px, 8 KB)

Point in time selector (Structured data, Commons):

Screenshot 2020-11-12 at 18.23.07.png (320×968 px, 34 KB)

Event Timeline

Volker_E subscribed.

Quick clarification, where's the example of Button/Dropdown (VE) from exactly?

Input/Combobox (VE) looks like an implementation bug. The inputs border should be border-color-error.

Quick clarification, where's the example of Button/Dropdown (VE) from exactly?

It's in the Categories section of the VE. This is originally a lookup input that becomes a dropdown button once a selection is made:

Screenshot 2020-11-17 at 12.34.49.png (323×710 px, 46 KB)

@Sarai-WMDE Thanks, that's clearly a bug. It's not providing clear enough feedback to the user and moreover is confusing as such appearance clashes with a normal destructive button style. CCing @iamjessklein.

Volker_E triaged this task as Medium priority.Nov 17 2020, 3:08 PM

I think the red there is to mimic missing link styling, because the category doesn't exist. It isn't strictly speaking an error.

It's also an edge case in a relatively low-usage feature.

Sarai-WMDE renamed this task from Display components' validation states to Document components' validation states.Feb 3 2021, 4:40 PM
Sarai-WMDE updated the task description. (Show Details)

With Codex in place and its demos, this is successfully resolved.