Thanks for this summary S, the "living style guide" mentioned in https://www.mediawiki.org/wiki/UX_standardization will include not only the visual styling of agora controls but best practices for using them. e.g. things like order of buttons (primary CTA rightmost) and what types of buttons should be disabled when invalid input is detected (places where a post would result in an error) as well as when to use different styles of buttons. 



Jared Zimmerman  \\  Director of User Experience \\ Wikimedia Foundation               
M : +1 415 609 4043 |   :  @JaredZimmerman



On Tue, Nov 5, 2013 at 6:47 PM, S Page <spage@wikimedia.org> wrote:
Agora specs[1] introduce expanded button semantics, but the "Buttons" visuals on p. 3 don't name or explain them.

I added that image and some explication to the existing page "Patterns and components"[2]
<mildflame on>Don't ignore existing specs just because you didn't work on them! Update pages when designs change, don't leave them to rot and mislead.</mildflame>

Because the semantics are changed, some current styles in mediawiki.ui  don't cleanly map:
*  mw-ui-primary (the main button, e.g. [Login])
 * mw-ui-constructive (an alternative, e.g. "Don't have an account?  [Join Wikipedia]" button)

The new specs distinguish continue and completion actions for the primary button, and a constructive alternative is just a plain button. mw-ui-primary can either remain the style for the complete form action (changing from blue to green!) or be a deprecated synonym for a new mw-ui-completion style, since I don't think any multi-step forms use Agora yet. I think mw-ui-constructive becomes a deprecated no-op.

Flow's CSS uses "mw-ui-button mw-ui-text" for actions that don't appear as a button (the two top rows).

[1] https://www.mediawiki.org/wiki/File:Agora_specs.pdf
[2] https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Patterns_and_components#Buttons.2FActions

--
=S Page  Features engineer

_______________________________________________
Design mailing list
Design@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design