Page MenuHomePhabricator

Redesign the ComboBox in OOjs UI's MediaWiki theme
Closed, ResolvedPublic

Description

MediaWiki UI ComboBox design is needed (and by 'design', I meant both design and implementation). The current one is a bit messed up.

Current design looks thus:

JadU5Jq.png (344×701 px, 7 KB)

Issues:

  • Dropdown menu is not full-width
  • Indicator on disabled combobox is not disabled

I tried to cook up something better here: https://gerrit.wikimedia.org/r/#/c/186536/

IZpyoFO.png (344×701 px, 7 KB)

Issues:

  • Looks all messed up.

Proposed:

T87832 ComboboxInputWidget II - OOjs UI Demos 2016-09-29.png (207×657 px, 16 KB)
T87832 ComboboxInputWidget OOjs UI Demos 2016-09-29.png (256×657 px, 18 KB)

Event Timeline

matmarex raised the priority of this task from to Needs Triage.
matmarex updated the task description. (Show Details)
matmarex added a subscriber: matmarex.
matmarex set Security to None.
matmarex updated the task description. (Show Details)

Change 191877 had a related patch set uploaded (by Esanders):
Fix DropdownWidget and ComboboxWidget appearance

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

Patch-For-Review

Mattflaschen-WMF renamed this task from MediaWiki UI ComboBox design needed to OOjs UI ComboBox design needed.Jun 4 2015, 11:18 PM
Mattflaschen-WMF renamed this task from OOjs UI ComboBox design needed to OOjs UI ComboBox design needed (MediaWiki theme).

Change 191877 abandoned by Bartosz Dziewoński:
Fix DropdownWidget and ComboboxWidget appearance

Reason:
Not being actively worked on, superseded by https://gerrit.wikimedia.org/r/#/c/210881/

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

Change 210881 had a related patch set uploaded (by Bartosz Dziewoński):
MediaWiki Theme: comboBoxWidget: Implement parts of new design

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

Change 210881 abandoned by Prtksxna:
MediaWiki Theme: comboBoxWidget: Implement parts of new design

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

Prtksxna removed a project: Patch-For-Review.
Prtksxna added subscribers: Volker_E, violetto.
Prtksxna added a subscriber: Prtksxna.

@Volker_E @violetto, feel free to take over this.

Jdforrester-WMF renamed this task from OOjs UI ComboBox design needed (MediaWiki theme) to Redesign the ComboBox in OOjs UI's MediaWiki theme.Apr 27 2016, 8:37 PM

Current L&F:

Screen Shot 2016-09-07 at 10.33.42.png (338×986 px, 31 KB)

There's now just one deviation from M54 that I can see, which is that drop-down "caret" control is an icon, not a button. This has three effects:

  • It's not separated with a line from the text entry box
  • It's not highlighted on hover
  • It's not selected on focus

Do we want to make that change too?

@Jdforrester-WMF From an user experience point of view it makes sense to still change the appearance of the dropdown to a button, because it must be made clear to the user that a combobox is acting as an input with an additional dropdown functionality.
Sure, there are normal input fields that might feature something like an autocomplete menu as well. In my understanding the difference would be that combobox is already featuring results before any keyboard input while latter needs to have input before a menu appears.

The demos of ComboBoxInputWidget, ComboBoxInputWidget (empty) and CapsuleMultiselectWidget currently (as of v0.17.9) seem ambiguous to me in when to use which. Related to this, ComboBoxInputWidget (empty) shouldn't feature a dropdown indicator when there is nothing to show. That contradicts user expectations.

Change 313552 had a related patch set uploaded (by VolkerE):
ComboBoxInputWidget: Align to design specification

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

Change 313552 merged by jenkins-bot:
ComboBoxInputWidget: Align to design specification

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

Volker_E removed a project: Patch-For-Review.
Volker_E moved this task from Review to Done on the UI-Standardization-Kanban board.