Hi all,
In the interest of closer collaboration, Jon and Matt have merged a patch
to upstream new mw-ui-input styles, which I believe originated in Flow.
It's at
https://gerrit.wikimedia.org/r/#/c/149173/
I'm glad we merged this sooner rather than later, since it means there are
fewer Flow-specific overrides on top of mediawiki.ui and it forces us to
have a cross-team discussion. However, with the new input styles going out
on desktop search, log in, and create account there are some design issues
we need to resolve.
1. This appears to have caused a regression, where the CAPTCHA input
field on create account is not styled correctly. It's now way too small for
the container.
2. We now have multiple indicator styles showing up. In form fields, the
blue bar on the left appears. On elements like page links and checkboxes,
the softer blue outline appears. This mixed experience is distracting.
3. The left-aligned blue bar is way too close to the cursor, and makes
it harder to see where it is. In an RTL language like Hebrew, the blue bar
overlaps entirely with the cursor.
You can see all of these by checking out the relevant forms on Beta Labs
right now. You can see the previous forms on English Wikipedia, or via the
style guide (which hasn't been updated yet):
http://tools.wmflabs.org/styleguide/desktop/section-3.html
Overall, the issues identified lead me to believe this new input indicator
is the wrong way to go for now. This is particularly true when you consider
that previously one input indicator was applied to all elements
consistently, and with the new style you see both the blue outline and the
new in-field indicator depending on which element type you're selecting.
I'm okay updating form-by-form with mediawiki.ui, but the forms themselves
cannot be sloppy like this.
On a related issue, but not caused by the latest updates: we need to sort
out what the type styles are for forms and buttons. Right now I am getting
the system font of Lucida Grande. That doesn't appear to meet the spec,
according to the Trello card mocks like
https://trello.com/c/8FOi1X1x and
https://trello.com/c/4TfdOik8. Let's update so at least we're using the
plain sans-serif, so the user is not getting a mix of different sans-serifs
on one form.
--
Steven Walling,
Product Manager
https://wikimediafoundation.org/