Design/Archive/Wikimedia Foundation Design/Agora Control Library
 | This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date. |
The Agora Control Library is a series of styles and behaviors for common controls that are reused across projects within MediaWiki.
Current state[edit source]
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 source]
Buttons[edit source]
Buttons come in 4 basic types, Neutral, Progressive, Destructive, and Constructive
Quiet action[edit source]
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 source]
Segmented control[edit source]
Toolbars[edit source]
Toolbar button[edit source]
Toolbar button icon only[edit source]
e.g. VE tool buttons; also a Flow board's Full-Collapsed-Small view icon trio?
Toolbar button with icon and label[edit source]
e.g. VE page settings
Sub-toolbar "drawer"[edit source]
e.g. VE toolbar for advanced text styling
Toolbar flyout[edit source]
e.g. VE toolbar junk drawer (more v)
Input fields[edit source]
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 source]
Multi-line input[edit source]
Search input[edit source]
Validated input[edit source]
Password input[edit source]
Special cases[edit source]
ULS language selector control
Date picker control
Flyout[edit source]
e.g. Flow "action menu" in topic bar.
e.g. Flow post moderation actions (Hide/Suppress/Delete)
Actionable[edit source]
Dual action or collapsible (top, left, bottom, right anchoring)
Informational[edit source]
Anchored to element and triggered by focus state (top, left, bottom, right anchoring)
[edit source]
vertical list of actions in a stacked menu]
Guide/Hint[edit source]
Control[edit source]
Radio button[edit source]
Dropdown[edit source]
Combo box[edit source]
Multi-select[edit source]
Field[edit source]
Requested by Fundraising tech
Dropdown[edit source]
Check box[edit source]
Number stepper[edit source]
Sliders[edit source]
Precise[edit source]
Imprecise[edit source]
Action rail[edit source]
Notifications/toasters[edit source]
Alerts[edit source]
Saves[edit source]
Connection issues[edit source]
Progress indicators[edit source]
Full page[edit source]
Determinate/percentage[edit source]
Indeterminate[edit source]
Requested controls[edit source]
Button with image[edit source]
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[edit source]
Requestor: Core Features (WMF)
Use: Flow/submit
Bug :
Status : Not designed
Multi-line text button[edit source]
Requestor: Growth Team (WMF)
Use: Getting started
Status : Not designed
[edit source]
Extended actions[edit source]
Requestor: Core Features (WMF)
Use: Flow Action menu
Status : Designed
[edit source]
Requestor: Core Features (WMF)
Use: Flow Flag actions
Status : Designed
Rich controls[edit source]
Language selector[edit source]
Requestor: Language Engineering (WMF)
Use: ULS
Bug :
Status : Not designed
Date picker[edit source]
Requestor: Wikidata
Use: Data Input
Bug :
Status : Not designed
See also[edit source]
- /Behavior - Q&A guide to using these controls
- Category:Design audit - its subcategories are a visual taxonomy of UX features
- Tracking bug 53733 - Use the same icons to represent the same things
- Wikimedia Foundation Design/Patterns and components - the same thing before it was called Agora?