Page MenuHomePhabricator

Identify & resolve shortcomings in TagMultiselect outline input and general readonly inputs
Closed, ResolvedPublic

Description

Already outlined in the parent task, our new TagMultiselectWidget features an inputPosition: 'outline' option, where the box above acts as container box for the selected tags.
As of v0.21.0 it resembles a normal input box too closely resulting in unmet user expectations.
You can only focus in when a tag has already been added, otherwise clicking the container box results in focussing the input field below.

A close widget is the readonly TextInputWidget, which currently doesn't feature the normal progressive accent color focus outline, but #c8ccd1 and should probably be revisited in the course of this as well.
Focussing in selects the input widget's value, similar to the TagMultiselect container above.

Event Timeline

Volker_E added a comment.EditedApr 17 2017, 6:00 PM
Citing from T162965#3182437, @Pginer-WMF wrote:

Some initial thoughts:

  • When the control is shown with both an input and a tag area, some adjustments can help to make the component look more connected. Adjusting the border radius on the touching corners and avoid the double borders (e.g., removing the bottom border of the tag area), and making the tag area slightly darker using Base90 (#F8F9FA)
CurrentProposed

From my perspective it might make sense to have readonly TextInputWidget also following this and add #f8f9fa as background-color. Receiving normal widget focus and text selection capability stay the same.
While disabled TextInputWidget features background-color: #eaecf0; color: #72777d, it doesn't receive focus at all.

Change 348519 had a related patch set uploaded (by VolkerE):
[oojs/ui@master] MediaWiki theme: Make readonly TextInputWidget appearance clearer

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

Volker_E added a comment.EditedApr 17 2017, 7:50 PM
Patch 348519348621

Exemplified from the patch how a readonly (first screenshot) with proposed changes and second, how TagMultiselectWidget with outlined input would look like. We should probably also increase contrast of input values when adding background-color in TextInputWidget.
Thoughts?

Jdforrester-WMF moved this task from Backlog to Doing on the OOUI board.Apr 17 2017, 8:02 PM

Change 348621 had a related patch set uploaded (by VolkerE):
[oojs/ui@master] MediaWiki theme: TagMultiselectWidget outlined UI improvements

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

Change 348519 merged by jenkins-bot:
[oojs/ui@master] MediaWiki theme: Make readonly TextInputWidget appearance clearer

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

Change 348621 merged by jenkins-bot:
[oojs/ui@master] MediaWiki theme: TagMultiselectWidget outlined UI improvements

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

@Pginer-WMF I've updated the readonly TextInputWidget color with the default Base20.

Volker_E closed this task as Resolved.Apr 18 2017, 11:25 PM
Volker_E moved this task from Doing to OOjs-UI-0.21.1 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.21.1); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.