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:


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/


Issues:

  • Looks all messed up.

Proposed:

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.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 29 2015, 12:57 AM
matmarex updated the task description. (Show Details)Jan 29 2015, 12:59 AM
matmarex set Security to None.
matmarex updated the task description. (Show Details)
Jdforrester-WMF triaged this task as Normal priority.Jan 29 2015, 2:06 AM

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

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

Patch-For-Review

Jdforrester-WMF moved this task from Backlog to Doing on the OOUI board.
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

matmarex reassigned this task from Esanders to Prtksxna.Jun 5 2015, 12:04 AM
matmarex added a mock: M54: Combo box.
matmarex added a subscriber: Esanders.

Copy of the image from the mock M54:

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

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

Prtksxna removed Prtksxna as the assignee of this task.Mar 14 2016, 5:05 AM
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
Danny_B moved this task from Unsorted to OOUI on the UI-Standardization board.May 20 2016, 8:57 PM
Jdforrester-WMF moved this task from Doing to Backlog on the OOUI board.Aug 23 2016, 8:36 PM

Current L&F:

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 moved this task from Backlog to Reviewing on the OOUI board.Sep 9 2016, 12:34 AM

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

Volker_E edited subscribers, added: RHo, Pginer-WMF; removed: violetto.

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

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

Volker_E updated the task description. (Show Details)Sep 30 2016, 4:41 AM
Volker_E moved this task from Backlog to Review on the UI-Standardization-Kanban board.
Jdforrester-WMF moved this task from Reviewing to OOjs-UI-0.18.0 on the OOUI board.Oct 3 2016, 7:41 PM
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.18.0); removed OOUI.

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

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

Volker_E closed this task as Resolved.Oct 3 2016, 10:54 PM
Volker_E removed a project: Patch-For-Review.
Volker_E moved this task from Review to Done on the UI-Standardization-Kanban board.