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 Sass (converting it to LESS is 54485).

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 add these new or modified controls into core so they can be used by developers within their own work.

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 "junk drawer" 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)

Tracking Bug :

Status : Not designed

Button with status indicator
Requestor: Core Features (WMF)

Use: Flow/submit

Tracking Bug :

Status : Not designed

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

Use: Getting started

Tracking Bug :

Status : Not designed

Extended actions
Requestor: Core Features (WMF)

Use: Flow/Junk Drawer

Tracking Bug : https://bugzilla.wikimedia.org/show_bug.cgi?id=55535

Status : Designed

Horizontal action menu
Requestor: Core Features (WMF)

Use: Flow/Flag Actions

Tracking Bug : https://bugzilla.wikimedia.org/show_bug.cgi?id=55535

Status : Designed

Language selector
Requestor: Language Engineering (WMF)

Use: ULS

Tracking Bug :

Status : Not designed

Date picker
Requestor: Wikidata

Use: Data Input

Tracking Bug :

Status : Not designed