Open main menu

Design/Archive/Wikimedia Foundation Design/Agora Control Library

< Design‎ | Archive/Wikimedia Foundation Design(Redirected from 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 stateEdit

Contents

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 controlsEdit

ButtonsEdit

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

Quiet actionEdit

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 buttonsEdit

Segmented controlEdit

ToolbarsEdit

Toolbar buttonEdit

Toolbar button icon onlyEdit

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

Toolbar button with icon and labelEdit

e.g. VE page settings

Sub-toolbar "drawer"Edit

e.g. VE toolbar for advanced text styling

Toolbar flyoutEdit

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

Input fieldsEdit

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

Single-line inputEdit

Multi-line inputEdit

Search inputEdit

Validated inputEdit

Password inputEdit

Special casesEdit

ULS language selector control

Date picker control

FlyoutEdit

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

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

ActionableEdit

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

InformationalEdit

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

Flyout menuEdit
 
Flow topic actions

vertical list of actions in a stacked menu]

Guide/HintEdit

ControlEdit

Radio buttonEdit

DropdownEdit

Combo boxEdit

Multi-selectEdit

FieldEdit

Requested by Fundraising tech

DropdownEdit

Check boxEdit

Number stepperEdit

SlidersEdit

PreciseEdit

ImpreciseEdit

Action railEdit

Notifications/toastersEdit

AlertsEdit

SavesEdit

Connection issuesEdit

Progress indicatorsEdit

Full pageEdit

Determinate/percentageEdit

IndeterminateEdit

Requested controlsEdit

Button with imageEdit

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 indicatorEdit

Requestor: Core Features (WMF)

Use: Flow/submit

Bug :

Status : Not designed

Multi-line text buttonEdit

Requestor: Growth Team (WMF)

Use: Getting started

bug 55535

Status : Not designed

Flyout menusEdit

Extended actionsEdit

Requestor: Core Features (WMF)

Use: Flow Action menu

bug 55535

Status : Designed

Horizontal action menuEdit

Requestor: Core Features (WMF)

Use: Flow Flag actions

bug 55535

Status : Designed

Rich controlsEdit

Language selectorEdit

Requestor: Language Engineering (WMF)

Use: ULS

Bug :

Status : Not designed

Date pickerEdit

Requestor: Wikidata

Use: Data Input

Bug :

Status : Not designed

See alsoEdit