I'd like to propose we go with "Neutral, Progressive, Destructive, and Constructive" for the actual names in code.

Primary = button boundary is drawn (uses N,P,D,C states above)
Secondary = stylized text with custom hover effects, but no button boundary  (uses N,P,D,C states above)
Quiet = a name I just made up for a button that is one of the P,D,C states above when in hover, click, or clicked, but Neutral when there is no user interaction, Its currently used for Thank in flow. 

Action rail/bar = what we've (in design) been calling the icons that are right aligned in flow for things like watch,, permalink, edit, flag. As well as being used in the mockups for multimedia actions like flag, thank, share, use, for images. 

Neutral null state = Primary Neutral (buttons) in a state where a user is not interacting with the control, wasn't trying to to be obtuse. 

CTA = Call to action = Button we want user to press to move a process flow along



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



On Wed, Nov 6, 2013 at 9:28 PM, S Page <spage@wikimedia.org> wrote:
On Tue, Nov 5, 2013 at 8:49 PM, Jared Zimmerman <jared.zimmerman@wikimedia.org> wrote:

It sounds like you're going to write a new <https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Patterns_and_components> , but two levels down. If you can't adapt that, please Be Bold and move it to /Old and move yours up.
 
I'm using the format of questions to capture behaviors, that won't be the final state of this, but its helpful to capture some of the places that will need clarity, like the control UI style guide itself this will grow and change over time, as people interact with it. 

Explaining behaviors is good, but  the biggest boost to clarity will come when designers add consistent text and names to the excellent specs and mockups you've already built. Or you chop the specs up to fit these wiki pages, which seems a lot of work. Maybe there's wiki markup to, e.g. show a portion of page 3 of Agora_specs.pdf within a wiki page; I couldn't figure it out and so took a cropped screenshot for <https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Patterns_and_components#Buttons.2FActions> , which sucks when you revise the original.

Clarity will also come when the LESS files use the same names and reference wiki pages in their comments.

For example, the names in <https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_Control_Library> like "Neutral, Progressive, Destructive, and Constructive" are very helpful, but they're not in the mockups. I love your "Quiet action"[1], but what does it look like? Is it a secondary action that doesn't have a button outline?
 
I'm done for the night, so if you have questions to add, please do so,
The highest priority are the grid of buttons in Agora specs.pdf page 3 "Buttons" , we need good class names for their LESS implementation, and decide what to do with the current mw-ui- classes. Let's nail 'em down tomorrow.

The Behaviors terminology is different from its parent page <https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_Control_Library>. Terms that appear in one and not the other include:

Behaviors:
primary, secondary, CTA, action buttons
action bar

ACL:
Quiet action, neutral null state.
action rail

[1] subtle Human League ♩♫ reference :-)
Cheers,
--
=S Page  Features engineer



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