Design/Archive/Wikimedia Foundation Design/Agora Control Library

The Agora Control Library is a series of styles and behaviors for common controls that are reused across projects within MediaWiki.

Current state
There is a mediawiki.ui library (documentation) in core, written in LESS.

Each team who will be using controls from the Agora Library is writing their controls in LESS within their own project; some of these are entirely new controls, and some override or enhance the mediawiki.ui ones. The next step is to move these new or modified controls into core so they are available to all developers. For example, the Flow discussion software implemented revised button design, and updates core to these designs.

The initial look and feel of Agora Controls was outlined in Agora_specs.pdf in August 2013; however, this is an iterative process and controls will change during implementation.

Buttons
Buttons come in 4 basic types, Neutral, Progressive, Destructive, and Constructive

Quiet action
Button with Neutral null state and Progressive/Destructive/Constructive hover, click, or post-click state

Changes: "As far as I remember... We decided that the mouseover from the spec will become the new normal, and mouseover will be slightly darker than the new normal (like the background color of a clicked normal button)." -- Juliusz Gonera

Toolbar button icon only
e.g. VE tool buttons; also a Flow board's Full-Collapsed-Small view icon trio?

Toolbar button with icon and label
e.g. VE page settings

Sub-toolbar "drawer"
e.g. VE toolbar for advanced text styling

Toolbar flyout
e.g. VE toolbar junk drawer (more v)

Input fields
Text input fields come in many styles, with special behaviors, such as search, validation, and content obscuring in the case of passwords.

Special cases
ULS language selector control

Date picker control

Flyout
e.g. Flow "action menu" in topic bar.

e.g. Flow post moderation actions (Hide/Suppress/Delete)

Actionable
Dual action or collapsible (top, left, bottom, right anchoring)

Informational
Anchored to element and triggered by focus state (top, left, bottom, right anchoring)

Button with image
Requestor: Growth Team (WMF)

Use: Getting started (also [☺ Thank] button in Flow, Reply button in Flow with icon)

Status : Not designed

Button with status indicator
Requestor: Core Features (WMF)

Use: Flow/submit

Bug :

Status : Not designed

Multi-line text button
Requestor: Growth Team (WMF)

Use: Getting started

Status : Not designed

Extended actions
Requestor: Core Features (WMF)

Use: Flow Action menu

Status : Designed

Horizontal action menu
Requestor: Core Features (WMF)

Use: Flow Flag actions

Status : Designed

Language selector
Requestor: Language Engineering (WMF)

Use: ULS

Bug :

Status : Not designed

Date picker
Requestor: Wikidata

Use: Data Input

Bug :

Status : Not designed