Page MenuHomePhabricator

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

Assigned To
None
Authored By
Volker_E
Mar 10 2021, 2:25 PM
Referenced Files
F35267432: Captura de Pantalla 2022-06-23 a las 11.45.23.png
Thu, Jun 23, 9:47 AM
F34598612: image.png
Aug 17 2021, 8:21 PM
F34598606: image.png
Aug 17 2021, 8:21 PM
F34598604: image.png
Aug 17 2021, 8:21 PM
F34407680: Screenshot 2021-04-19 at 17.48.41 2.png
Apr 19 2021, 3:50 PM
F34407672: image.png
Apr 19 2021, 3:37 PM
Tokens
"Love" token, awarded by ldelench_wmf."Love" token, awarded by thiemowmde."Love" token, awarded by Milimetric.

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 future Vue.js based Codex component toolkit.
For simplicity we'll focus here on one theme application, namely WikimediaUI.

Overarching design challenges

Typographic styles not universally used
  • 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
Theming beyond “WikimediaUI” theme problematic

Thinking MediaWiki skins application of Codex/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 demo 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 demo
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. Should the font-weight of the Dropdown label be regular (OOUI, WVUI, etc) or bold (DSG)?
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(?)Also known as SelectFile* widget; Limited by strict OS mobile specifics; multiple [[ T218408 | support ]] on desktop
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 implementedRelated responsive debt T161957
Typeahead search (M) to be implemented T272625 not planned demoby 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
Progress bar (M) to be implemented T266028 demo (indeterminate only)
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. Codex: T303321
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 (accordion) (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 - Note that wikistats charts currently uses Vue
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: WikimediaUI (Codex/OOUI) icon inventory (tracking), T280662, and T280666
Grabber / Handlebar Missing (S)See T297805: Add a grabber (aka handlebar) component to Codex
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
OpenNone
ResolvedVolker_E
OpenNone
ResolvedVolker_E
ResolvedCatrope
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenBUG REPORTNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
DeclinedNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone
InvalidNone
DeclinedNone
DeclinedNone
OpenNone
OpenNone
OpenNone
OpenNone
OpenNone

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

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)

Structured Data team components that might be reusable:

Observer (code)

Wrapper for basic IntersectionObserver behavior. Add the component where you want it in the DOM and it'll emit events on intersect and on hide.

Image (code, styles)

Image that loads on intersect

CopyTextLayout (code, styles)

From MediaWiki core; copies text to clipboard

image.png (66×468 px, 11 KB)

Suggestion (code)

Basically a specially stylized checkbox for confirming one or more suggested options (well...it should have been a checkbox)

image.png (96×372 px, 13 KB)

ToastNotification (code)

Temporary pop-in notification

image.png (730×2 px, 108 KB)

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, Codex, OOUI, WVUI, MediaWiki widgets) UI components.Dec 1 2021, 6:26 AM
Volker_E updated the task description. (Show Details)
Volker_E updated the task description. (Show Details)

Hi @Volker_E and @bmartinezcalvo - curious if we should either close this task or keep it updated with the main Codex components development work? Asking as I am finding new Codex tasks for components that are duplicates of tasks detailed here, for example the table component tickets T280727 and T303320.

Hi @Volker_E and @bmartinezcalvo - curious if we should either close this task or keep it updated with the main Codex components development work? Asking as I am finding new Codex tasks for components that are duplicates of tasks detailed here, for example the table component tickets T280727 and T303320.

@RHo I think we should keep Codex updated and create a column for the Codex components links in this table since now it has columns just for DSG, OOUI and WVUI but Codex is missing. We could also link the Phab tasks to each column if possible, to be able to easily find them and detect if we have duplicated tasks.

Captura de Pantalla 2022-06-23 a las 11.45.23.png (236×874 px, 78 KB)

Hi @Volker_E and @bmartinezcalvo - curious if we should either close this task or keep it updated with the main Codex components development work? Asking as I am finding new Codex tasks for components that are duplicates of tasks detailed here, for example the table component tickets T280727 and T303320.

@RHo I think we should keep Codex updated and create a column for the Codex components links in this table since now it has columns just for DSG, OOUI and WVUI but Codex is missing. We could also link the Phab tasks to each column if possible, to be able to easily find them and detect if we have duplicated tasks.

Captura de Pantalla 2022-06-23 a las 11.45.23.png (236×874 px, 78 KB)

That would be fab, thanks!

Addendum: wanted to confirm if part of this process of adding the Codex tickets would be de-duplicate tasks where a new Codex task has been created for an existing task - T309249 for chips, when there was already T280701, etc

Addendum: wanted to confirm if part of this process of adding the Codex tickets would be de-duplicate tasks where a new Codex task has been created for an existing task - T309249 for chips, when there was already T280701, etc

Definitely, we should do this as part of the component task creation process. If there's an existing ticket, we should evaluate whether to repurpose it for Codex (preferred) or close it and start a new one.

In this task's description, we should consider replacing the WVUI column with Codex. Codex has all of the components WVUI has, and WVUI will soon be deprecated, so the info in the WVUI column is no longer needed.