MediaWiki

Design/Archive/Wikimedia Foundation Design/Agora Control Library

< Design | Archive/Wikimedia Foundation Design

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

Current state

edit

There is a mediawiki.ui library (documentation) in core, written in Less. You can see it working in the MediaWiki desktop living style guide.

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 Gerrit change 103494 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.

Existing & planned controls

edit

Buttons

edit

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

Quiet action

edit

Button without a border and background. Same 4 types Neutral null state and Progressive/Destructive/Constructive

See and use the buttons in the living style guide with commentary.

Progress bar buttons

edit

Segmented control

edit

Toolbars

edit

Toolbar button

edit
Toolbar button icon only
edit

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

Toolbar button with icon and label
edit

e.g. VE page settings

Sub-toolbar "drawer"
edit

e.g. VE toolbar for advanced text styling

Toolbar flyout

edit

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

Input fields

edit

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

Single-line input

edit

Multi-line input

edit

Search input

edit

Validated input

edit

Password input

edit

Special cases

edit

ULS language selector control

Date picker control

Flyout

edit

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

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

Actionable
edit

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

Informational
edit

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

Flyout menu
edit
 
Flow topic actions

vertical list of actions in a stacked menu]

Guide/Hint

edit

Control

edit

Radio button

edit
edit

Combo box

edit

Multi-select

edit

Field

edit

Requested by Fundraising tech

edit

Check box

edit

Number stepper

edit

Sliders

edit

Precise

edit

Imprecise

edit

Action rail

edit

Notifications/toasters

edit

Alerts

edit

Saves

edit

Connection issues

edit

Progress indicators

edit

Full page

edit

Determinate/percentage

edit

Indeterminate

edit

Requested controls

edit

Button with image

edit

Requestor: Growth Team (WMF)

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

bug 55535

Status : Not designed

Button with status indicator

edit

Requestor: Core Features (WMF)

Use: Flow/submit

Bug :

Status : Not designed

Multi-line text button

edit

Requestor: Growth Team (WMF)

Use: Getting started

bug 55535

Status : Not designed

Flyout menus

edit

Extended actions

edit

Requestor: Core Features (WMF)

Use: Flow Action menu

bug 55535

Status : Designed

Horizontal action menu

edit

Requestor: Core Features (WMF)

Use: Flow Flag actions

bug 55535

Status : Designed

Rich controls

edit

Language selector

edit

Requestor: Language Engineering (WMF)

Use: ULS

Bug :

Status : Not designed

Date picker

edit

Requestor: Wikidata

Use: Data Input

Bug :

Status : Not designed

See also

edit
Retrieved from "https://www.mediawiki.org/w/index.php?title=Design/Archive/Wikimedia_Foundation_Design/Agora_Control_Library&oldid=4951773"