Page MenuHomePhabricator

Epic: Do a design inventory of Wikiverse (Design Style Guide, OOUI, WVUI, MediaWiki widgets) UI components
Open, HighPublic

Description

Design inventory background

Identify everything that exists and reduce design (and possible technical) debt as we move things into Vue.js. Inventory is to prioritise the order by which we build the Vue.js library, under current trial Wikimedia Vue UI or short WVUI.
For simplicity we'll focus here on one theme application, namely WikimediaUI.

Overarching design challenges

No universally used typographic styles
  • Base font size different per skin – Vector 14px equiv, MinervaNeue 16px equiv. Don't even look at Monobook ;)
  • Two different technical solutions and range of design discrepancies for mobile web (MobileFrontend/MinervaNeue skin) and Desktop (Vector)
Grid system just rudimentary (spacing) implemented
Problematic theming outside “WikimediaUI” theme

Thinking MediaWiki skins application of WVUI/OOUI components in skins like Monobook or a dark mode feature for one of Vector/MinervaNeue

Components design inventory

Legend:
… not applicable
… not clear yet
/ … covered and available; Green = Go, Yellow = Go with minor todos
blocking issue, that blocks or slows down designers/devs
(XL/L/M/S) … estimated size of issue from x-large to small

ComponentsDesign Style GuideOOUIWVUIVector skinMinervaNeue skinNotes
Links not applicablelink color not aligned all, but focus T245887Complete documentation of link styles T280494
Buttons demoby WVUI/OOUI/mediawiki.uiby OOUI/mediawiki.ui
Buttons primary (progressive and destructive):by OOUI/mediawiki.uiby OOUI/mediawiki.ui
Buttons quiet (frameless) (M) Missing explanation of quiet progressive & destructive ones and their applicationby OOUI/mw.uiby OOUI/mw.uiNot fully clear when to choose quiet progressive & destructive ones. Some style inconsistencies were found: background color of quiet progressive and destructive on hover (T280344), active state (T280498, T280503).
Buttons secondary (S) Missing explanation of normal progressive & destructive ones and their applicationby WVUI/OOUI/mw.uiby OOUI/mw.ui- T253755
Buttons normalby WVUI/OOUI/mw.uiby OOUI/mw.ui
Toggle buttons demo to be implemented
Button Groups demo to be implemented
Button with dropdown documented as a type of button to be implementedby WVUI/OOUI/mw.ui?Should we document the use cases of this component better? Can it be considered an individual component?
Checkboxes demo demoby mw.ui/OOUIby mw.ui/OOUIThe WikimediaUI design file documents a size variation of 4px between desktop and mobile checkboxes (20px > 24px) that is not documented on the Style guide.
Radio buttons demo demoThe WikimediaUI design file documents a size variation of 4px between desktop and mobile radio buttons (20px > 24px) that is not documented on the Style guide.
Toggle switches demo (M) to be implementedby OOUIby OOUI
Dropdowns demo; full-width issue, too long demoby OOUIInline validation styles should be defined and documented T267807; Consolidate style of disabled dropdowns T280508. Consider menu dependency.
Comboboxes demo (M) to be implementedby OOUIInline validation styles should be defined and documented T267807
Text inputs (and textareas) demoby WVUI/OOUI/mw.uiby OOUI/mw.uiInline validation styles should be defined and documented T267807 (Applies to all input types)
Textareas (S) to be implementedby OOUI/mw.uiby OOUI/mw.ui
Search inputsby WVUI/OOUI/mw.uiby OOUI/mw.ui
Number inputs demo (S) to be implementedby OOUIby OOUI(?)- Increase/decrease buttons useful and necessary? - Position of the buttons (same side vs opposite sides)? - T145598
File inputs demo (L) to be implementedby OOUIby OOUI(?)By OS specifics strict limitations on mobile
Tag inputs Missing, but design approved implementation in OOUI TagMultiselect demoby OOUI
Tags Already an implementation in OOUI TagMultiselectby OOUIAdded T280681 for DSG
Filtering component & filter chips/tags?partially?T280701. See also discussion around Category widgets T147811
Messages demo (S) to be implementedby MW core CSS/OOUIby MW core CSS/OOUIAdded T280658 for additional definitions and revision of existing DSG component
Form validation (M) to be implemented, already in Sketch (M) to be implementedby MW core CSS/OOUIby MW core CSS/OOUI
Language selectors not planned (M) to be implemented
Typeahead search (M) to be implemented T272625 not plannedby WVUI in Vector modern not planned
Date pickers (XL) to be added2 different OOUI-based MW widgets, somewhat following designConsolidation task of 2 different MW ones: T91148
Color pickers not planned
Progress indicators (M) to be implemented T266028 Dialog loading indicator wrong (S) To be implementedby MW core CSS/OOUIby MW core CSS/OOUIStill jquery.ui and other non-design approved implementations available
Lists (M) Intro typographic guidelines not planned (S) allover design-wise in Vector, partly community driven (S) allover design-wise in MN
Lists of pages aka Lists (Advanced) (M) not plannedby MW core/extensions like RelatedArticlesT153417
Menus (M) partly covered by dropdown and typeaheadby WVUI/OOUIby OOUIT286240: Define and add “Menu” component to the DSG
Dividers Intro typographic guidelines not plannedby MW core
Cards (M) Captured in T278311 not planned (M) to be implemented T256036possibly in Newcomer homepage project/extMN features card-like elementsConsolidate and take into account desktop & mobile current implementations and challenges, also includes defining layout rules for when multiple cards/modules are shown
Tabs/segmented control (M) Already a standards-oriented implementation in OOUI/WVUI in SDCby WVUI/OOUIby WVUI/OOUIMinor variabilities in implementations need to be unified
Tables, data tables (L) Already a standards-oriented treatment in Vector/MN (S) MW core/Vector home-brewed implementations (MW core's own data table .wikitable styles) (S) MW core/MN home-brewed implementationsSee also T280727, and T214208
Sheets: bottom and side Already an implementation in MN, that is not standards-compliantMN code
Navigation menu: bottom and side (M) not planned?by MinervaNeueT280680 details how this may be considered distinct from "Sheets:bottom and side"
Image galleries (L) To be implemented not planned not plannedVector (community) implementationsMN home-brewed implementations
Steppers (M) To be implemented, compare Number inputs not planned
Pagination (S) To be implemented not plannedsome semi-design approved Vector implementationssome semi-design approved MN implementations
Breadcrumbs
Sliders (S) To be implemented not planned
Drag & Drop / Reorder (M) To be implemented, already OOUI widget avail (?) Available, but w/o design involvement not planned yetvia OOUI not planned yet, due to drag & drop difficulties on mobileTechnical difficulties with touch interfaces
Avatars (M) not plannedSee old task T128953
Badges (M) not planneddesigned but not unifieddesigned but not unifiedT280708
Page previews/hover cards (M) Already standards-oriented implementation in VectorVector-only
Dialogs Captured in T266029. Alerts and quick confirm treatment still needs extra work (L) Out of sync with DSG, T155528 (XL) to be implementedby jquery.ui/OOUI/home-brewedby OOUI/Minerva home-brewed
Page/view types (XL) Not available besides bits & pieces Scope of WVUI unclear yet, if it is meant for full page types, prob yes (XL) designs all over the place (XL) designs all over the placeGrid as one the missing keys of the issue
Text highlight (S) Yes, but outdated???T280670
Edit Diff (M) not planned???T280717, T90948
Tooltips (S) design approved implementation in OOUI demoby OOUI/jquery.uiT280677
Floating action buttons (& associated components) (L) Captured in T278134See T280330 and T278134
Onboarding/ guided help (S) not plannedT280705
Form layouts (S) Rudimentary captured in components overviewProvided various layout types as Fieldlayoutsby MW core/OOUI/Vectorby MW core/OOUI/MinervaNeueT280724
Media player controls (S) not planned not plannedby TimedMediaHandler extensionT280725
Expand and collapse (M) design approved implementation on special pages/Advanced SearchT280785
Empty states (S) not plannedT280789
Skeleton / Placeholder UI (S) not plannedT280842, potentially as a child of T75972
Offline states (S) not plannedT280845
Carousels (M) not plannedShould this even be part of DSG. With all negative usability research on carousels?! T280846
Data visualisations (XL)T280847
Icons need to be constantly synced in 4 different places default implementation (M) Yes, with limitations T276808 T260815 (M) also still a number of out-of-sync and homegrown icons (M) Some icons homegrown still inSee also T141801: OOUI/WikimediaUI icon inventory (tracking), T280662, and T280666
Animation and transitions (XL) partly implemented in widgetsby WVUI/OOUI/mw.ui/MW coreby OOUI/mw.ui/MW coreT77949
Color palette - dark/black mode (XL) not plannedonly by gadgets/extensions per wikiSee DarkMode and example gadget on enwiki
ComponentsDesign Style GuideOOUIWVUIVector skinMinervaNeue skinNotes

Question and open call

Go through the design inventory and add in any gaps you are aware/you come across. First round feedback is gathered in next Design Practice and Systems Meeting on April 20th. Deadline for design-all review is May 04th.

  1. File a sub-task to this task on the affected component.
  2. Put a Tnnnnnn link into notes column for it, maybe with a short (few words) summary of the issue.

Prior art

T113560: Standardize MediaWiki components (tracking)

Related Objects

StatusSubtypeAssignedTask
OpenNone
ResolvedCatrope
ResolvedVolker_E
ResolvedCatrope
OpenNone
OpenNone
OpenNone
ResolvedCatrope
OpenRHo
OpenNone
ResolvedVolker_E
OpenNone
ResolvedVolker_E
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
DeclinedNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
InvalidNone
DeclinedNone
DeclinedNone
OpenNone
OpenNone
OpenNone

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Volker_E updated the task description. (Show Details)

We may want to capture "text styles" in the table. These are not a component on its own, but having them represented in the code of the front-end library may be needed to avoid duplication when including text content in the UI.

T259639 shows an example of recent adjustment on the text styles.

Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)
Volker_E renamed this task from Epic: Do a design inventory of Wikiverse (Design Style Guide, OOUI, WVUI, Mediawiki widgets) UI components to Epic: Do a design inventory of Wikiverse (Design Style Guide, OOUI, WVUI, MediaWiki widgets) UI components.May 4 2021, 2:57 PM
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)