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 any information on this page. |
The Agora Control Library is a series of styles and behaviors for common controls that are reused across projects within MediaWiki.
Current stateEdit
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)
Edit
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)
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
Status : Not designed
Edit
Extended actionsEdit
Requestor: Core Features (WMF)
Use: Flow Action menu
Status : Designed
Edit
Requestor: Core Features (WMF)
Use: Flow Flag actions
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
- /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?