UX standardization

From MediaWiki.org
Jump to navigation Jump to search
See also Frontend standards group/Roadmap

We have a number of divergent UI libraries in use in MediaWiki core and extensions. This project, led by the Design team at the Wikimedia Foundation, is attempting to slowly but surely converge on a single, consistent look-and-feel for MediaWiki user interfaces.


Existing libraries / conventions[edit]

  • mw-ui- styles in the mediawiki.ui core module
    • used by Special:Login, Special:CreateAccount, Special:PasswordChange, and Special:Search in core
    • used by extensions Echo, Flow, GettingStarted, GuidedTour, OAuth, UploadWizard (campaigns only)
  • jQuery.ui used by AFT, PageTriage, TimedMediaHandler, UploadWizard, WikiBase, WikiLove, more...
  • backbone.js/Underscore.js (PageTriage) - JS MVC framework with template support
  • Mobile ui (MobileFrontend)
  • OOUI widget framework used by VisualEditor
  • Vector
  • Design audit has screenshots

What we are converging on[edit]

  • OOUI for rich JavaScript and widgets

To Do[edit]

  • Convert Mediawiki.ui to LESS
  • Implement Agora CSS in mediawiki.ui (bug 54360)
  • Update inputs and textareas in mediawiki.ui to look like Flow's .mw-ui-input
  • Make mediawiki.ui a flavor/theme of OOUI
  • Use the "Agora" design in the mediawiki.ui CSS in core and extensions
    • by applying mw-ui- CSS styles
      • Gerrit change 52169 does this for many buttons in core
      • HTMLForm in core could apply mw-ui- styles by default (currently it only does it if you choose the vform stacked vertical displayFormat). This was in patch set 14 of gerrit 62169
    • by rewriting buttons to use OOUI toolkit, once that has a mediawiki.ui flavor/theme.
  • Use mediawiki.ui CSS in mobile (Gerrit change 102581)
  • Implement Agora design in VE by completing mediawiki.ui flavor/theme
  • Identify existing and required Control/UI elements
  • Develop live style guide:
  • Add useful descriptions to the class comments for each Widget class in OO.ui - i.e. what sort of UI element does this build?

OOUI to dos[edit]

  • Yes Done Split into separate repos
  • N Not done Split OOUI dialog into a separate component and apply Agora styling to it
  • Documentation (intro and reference)
  • Sample code (Gerrit change 93525)
  • Get requirements from other teams
  • Clients outside VE team.
  • RfC
  • Move this to core

UX standardization status by extension[edit]

See also Icon standardisation for use of icons by extensions.

Extension Maintainer Status/Blockers UI components Compatibility
ContentTranslation i18n team One mw-ui button Agora Grid, mediawiki.ui, callouts, variety of cards (link , references, tools are presented as cards). Simple rich text formatting toolbar. The extension does not use Mediawiki chrome, uses full screen area IE10+
Flow Core features team Implements additions to Agora, such as sleeper/thin buttons, tooltips, dropdown menu, WikiFont, as local override not core jquery.ui.dialog, jquery.conditionalScroll, mediawiki.ui (+ local overrides)
MultimediaViewer Multimedia team Uses OOUI for "Use this file" tabbed dialog, with incomplete Agora skinning OOUI MenuItem,TextInput, etc. widgets, ... ??
UploadWizard Multimedia team Uses mostly jQuery.ui, campaigns are migrated to mediawiki.ui resizable input field, resizable textarea, inline input field, form validation, radio buttons, dropdown select lists, auto-suggest dropdown, tooltips, file input, collapsible form elements, image thumbnail selection grid, date picker, modal dialog box IE6 and newer
MobileFrontend Mobile web team All internal styles and libraries except for hogan templates buttons, full-screen overlays, toggler, button bar, segmented button IE9 and newer (usually)
PageTriage No one Some internal, some jQuery.ui backbone.js + Underscore (including use of templates), jquery.waypoints, jquery.tipoff, jquery.badge, jquery.ui.button, jquery.ui.draggable, pokey dialog IE7?
Echo Core features + volunteers Some internal, some mediawiki.ui buttons, pokey dialog, jQuery,badge IE7?
GuidedTour Growth Uses mediawiki.ui controls, some redundant styles to remove from original guiders.js Primary buttons, close icon
GettingStarted Growth Uses few mediawiki.ui controls, needs some new styles such as muli-line text in buttons and icons in buttons Primary and secondary CTAs, close icon
OAuth Platform-core mw-ui- styles mostly, jquery.ui.autocomplete, jquery.ui.dialog
WikiLove No one uses jQuery.ui jquery.ui.dialog,, dropdown select lists
WikiEditor No one uses some internal, some jQuery.ui button toolbar, jquery.ui.dialog, jquery.ui.button, dropdown select lists
CentralNotice Fundraising team uses internal and some jQuery.ui jquery.ui.multiselect, jquery.ui.datepicker, dropdown select lists
Special:PasswordReset (Core) None vform, mw.ui.primary
Special:ChangeEmail (Core) None mediawiki.special.changeemail (clientside form validation)
Special:Search (Core) Platform vform, mw.ui.primary
UniversalLanguageSelector (ULS) Language Engineering Team mediawiki.ui use is bug 50599, but ULS needs to work in MW 1.20 Foundation Framework grid, side tabs, buttons, flyout. local 'button blue' CSS, jquery tipsy, more?