Page MenuHomePhabricator

mw.widgets.DateInputWidget does not match the design of other widgets in MediaWiki theme
Closed, ResolvedPublic

Description

After the recent OOjs UI design updates, mw.widgets.DateInputWidget no longer matches the design of other widgets in MediaWiki theme. None of the colors match and it really stands out among other widgets. Screenshot from UploadWizard:

pasted_file (434×887 px, 26 KB)

pasted_file (45×304 px, 1 KB)
pasted_file (45×304 px, 2 KB)
pasted_file (45×304 px, 1 KB)
pasted_file (45×304 px, 2 KB)

I think it was meant to resemble DropdownInputWidget when not active, and TextInputWidget when active (it also has a dropdown, not shown here, because it has never matched anything much anyway – let's consider it out of scope for now).

Event Timeline

Change 318485 had a related patch set uploaded (by VolkerE):
Align mw.widgets.DateInputWidget to OOjs UI's MediaWiki theme widgets

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

@matmarex Following CapsuleMultiselectWidget here and not dropdown as it immediately turns into an input widget.

Current implementation in Special:UploadWizardM101 Template
T149270 Upload Wizard - Wikimedia Commons 2016-11-07.png (303×412 px, 34 KB)
T149270 CalendarWidget.png (324×351 px, 22 KB)

In order to bring template and implementation on par, this is a remaining open question:
Currently we don't feature rounded date items. It would be a separate interaction pattern, but date/time selection seems like a place where it is sensible to feature it?!

The rounding had been implemented, but it was removed in 43374cbe1a9633ec7c625f419c754dc0000850e3 per T113740. I don't mind either way.

@matmarex Thanks for pointing to this, I've already reached out to designers and UX engineers to get feedback here in order to come to one agreement (dateinput a different UI pattern or normal rounded selection).

Also changed CalendarWidget to box-sizing: border-box to enable calendar menu border on IE 8 and added menu box shadow to be consistent with other menus in M101/OOjs UI. M101 will be updated accordingly.

Updated screen from M101 without rounded borders, after feedback of other designers:

T149270 CalendarWidget - Choose date updated.png (324×351 px, 20 KB)

Volker_E triaged this task as Medium priority.Dec 22 2016, 10:46 AM
matmarex assigned this task to Volker_E.
matmarex removed a project: Patch-For-Review.

Change 318485 merged by jenkins-bot:
Align mw.widgets.DateInputWidget to OOjs UI's MediaWiki theme widgets

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