Page MenuHomePhabricator

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


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:

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

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

Current implementation in Special:UploadWizardM101 Template

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:

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