Page MenuHomePhabricator

Design inventory of Wikiverse (Codex design system, OOUI, MediaWiki widgets) UI components
Open, Needs TriagePublic

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
Jun 23 2022, 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

NOTE: This task is a resource and not associated with a specific deliverable.

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.
Please see also the list and status of currently defined Codex core components in T313357

For simplicity we'll focus here on one default theme application “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 GuideOOUICodexVector skinMinervaNeue skinNotes
Links not applicable Core component. To be implementedlink color not aligned all, but focus T245887Complete documentation of link styles T280494
Buttons demo Core component demoby Codex/OOUI/mediawiki.uiby OOUI/mediawiki.ui
Buttons primary (progressive and destructive): (See 'Buttons')by OOUI/mediawiki.uiby OOUI/mediawiki.ui
Buttons quiet (frameless) (M) Missing explanation of quiet progressive & destructive ones and their application (See 'Buttons')by 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 application (See 'Buttons')by Codex/OOUI/mw.uiby OOUI/mw.ui- T253755. What's the difference between Secondary and Normal (neutral, progressive and destructive) buttons?
Buttons normal (See 'Buttons')by Codex/OOUI/mw.uiby OOUI/mw.ui
Toggle buttons demo Core component demo
Button Groups demo Core component. To be implemented
Button with dropdown documented as a type of button to be implementedby Codex/OOUI/mw.ui?Should we document the use cases of this component better? Can it be considered an individual component?
Checkboxes demo Core component 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 Core component 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 Core component demoby OOUIby OOUI
Dropdowns demo; full-width issue, too long Core component 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, Codex, etc) or bold (DSG)?
Comboboxes demo Core component demoby OOUIInline validation styles should be defined and documented T267807
Label Core component/mixin. To be implemented.
Field Core component. To be implemented.
Text inputs demo Core component demoby Codex/OOUI/mw.uiby OOUI/mw.uiInline validation styles should be defined and documented T267807 (Applies to all input types)
Label Core component/mixin. To be implemented.
Textareas (S) Core component. To be implementedby OOUI/mw.uiby OOUI/mw.ui
Search inputs Core component demoby Codex/OOUI/mw.uiby OOUI/mw.ui
Lookup Missing Core component demoby Codex/OOUI/mw.uiby OOUI/mw.ui
Number inputs demo (S) Core component. 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) Core component. 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 demo (aka ChipInput) Core component. To be implementedby OOUI
Tags Already an implementation in OOUI TagMultiselect (aka InfoChip and FilterChip) Core component. To be implementedby OOUIAdded T280681 for DSG
Filtering component & filter chips/tags?partially?T280701. See also discussion around Category widgets T147811. Duplicate of Tags/Filter chip?
Messages demo Core component demoby 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) (Aka ValidationMessage) Core component. To be implementedby MW core CSS/OOUIby MW core CSS/OOUI
Toast notification Core component. To be implemented
Language selectors not planned (M) Potential core component or pattern. To be implementedRelated responsive debt T161957
Typeahead search (M) to be implemented T272625 not planned Core component demoby Codex in modern Vector 2022 not planned
Date pickers (XL) to be added2 different OOUI-based MW widgets, somewhat following design Core component. To be implementedConsolidation task of 2 different MW ones: T91148
Color pickers not planned
Progress indicators (M) to be implemented T266028 Dialog loading indicator wrong (S) Core components. 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 Core component demo (Indeterminate only)
Lists (M) Intro typographic guidelines not planned Potential core component (S) allover design-wise in Vector, partly community driven (S) allover design-wise in MN
Lists of pages aka Lists (Advanced) (M) not plannedProbably covered by 'List'by MW core/extensions like RelatedArticlesT153417
Menus (M) partly covered by dropdown and typeahead Core component demo (basic functionality)by Codex/OOUIby OOUIT286240: Define and add “Menu” component to the DSG
Menu item Missing Core component demo
Dividers Intro typographic guidelines not planned Core component/mixin. To be implemented.by MW core
Cards (M) Captured in T278311, T338015 not planned (M) Core component. MVP (card): T278311, WIP (module): T338015Newcomer homepage project/ext, WikifunctionsMN 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 Codex/OOUI Core component demoby Codex/OOUIby Codex/OOUIMinor variabilities in implementations need to be unified. Codex: T303321
Tables, data tables (L) Already a standards-oriented treatment in Vector/MN (L) Core component. To be implemented (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 Missing Potential core componentT314514
Thumbnail Missing Core component demo
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 planned Potential core componentsome semi-design approved Vector implementationssome semi-design approved MN implementations
Breadcrumbs Potential core component
Sliders (S) To be implemented not planned Potential core component
Drag & Drop / Reorder (M) To be implemented, already OOUI widget avail (?) Available, but w/o design involvement not plannedvia OOUI not planned yet, due to drag & drop difficulties on mobileT356644: Add reorderable list (by drag & drop) to Codex Technical difficulties with touch interfaces
Avatars (M) not plannedSee old task T128953
Badges (M) not planned Core component. To be implemented.designed 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) (Simple and complex) Core components. To be implementedby jquery.ui/OOUI/home-brewedby OOUI/Minerva home-brewed
Page/view types (XL) Not available besides bits & pieces Scope of Codex 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 Core component. To be implemented??T333681, T90948
Tooltips (S) design approved implementation in OOUI demo Core component. To be implementedby OOUI/jquery.uiT340456: Tooltip: Add Tooltip component to Codex T280677
Floating action buttons (& associated components) (L) Captured in T278134 Core component. To be implementedSee T280330 and T278134
Onboarding/ guided help (S) not planned Potential core componentT280705
Form layouts (S) Rudimentary captured in components overviewProvided various layout types as Fieldlayouts Could provide pattern recommendationsby MW core/OOUI/Vectorby MW core/OOUI/MinervaNeueT280724
Media player not planned Potential core component
Media player controls (S) not planned Potential core componentby TimedMediaHandler extensionT280725
Expand and collapse (accordion) (M) design approved implementation on special pages/Advanced Search Potential core componentT280785
Empty states (S) not planned Patterns should be documentedT280789
Skeleton / Placeholder UI (S) not planned Core component/mixin. To be implementedT280842, potentially as a child of T75972
Offline states (S) not plannedT280845
Carousels (M) not planned Potential core componentShould 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 Core component demo (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 widgets Partially covered by Animation and Transition tokensby Codex/OOUI/mw.ui/MW coreby OOUI/mw.ui/MW coreT77949
Color palette - dark/black mode (XL) not plannedonly by gadgets/extensions per wikiSee MediaWiki-extensions-DarkMode and example gadget on enwiki
ComponentsDesign Style GuideOOUICodexVector 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
In ProgressDAbad
ResolvedCCiufo-WMF
OpenNone
ResolvedCatrope
ResolvedVolker_E
ResolvedCatrope
ResolvedNone
InvalidNone
OpenNone
ResolvedCatrope
OpenNone
ResolvedVolker_E
OpenNone
ResolvedVolker_E
ResolvedCatrope
OpenNone
OpenNone
OpenNone
OpenNone
DuplicateNone
ResolvedNone
OpenFeatureNone
OpenNone
DeclinedNone
ResolvedSswiergosz
OpenNone
OpenNone
OpenNone
DuplicateNone
DuplicateNone
DuplicateNone
DuplicateNone
OpenNone
OpenNone
OpenNone
DeclinedNone
OpenNone
DeclinedNone
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
OpenNone
ResolvedNone
InvalidNone
DeclinedNone
DeclinedNone
DeclinedNone
OpenNone
Resolvedegardner
DuplicateNone
OpenNone
DuplicateNone

Event Timeline

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

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.

Volker_E renamed this task from Epic: Do a design inventory of Wikiverse (Design Style Guide, Codex, OOUI, WVUI, MediaWiki widgets) UI components to Epic: Do a design inventory of Wikiverse (Design Style Guide, Codex, OOUI, MediaWiki widgets) UI components.EditedJul 7 2022, 10:52 AM
Volker_E updated the task description. (Show Details)

Removed WVUI, which is going to be replaced by Codex in coming few weeks. Replaced demo links as well.

Hey @Volker_E , would you be open to closing this task once we have made Component Audit spreadsheet accessible for public comment? (T314095)

Alternatively, if this task is still needed as an epic, perhaps we could remove the table in the description and link out to the Component Audit sheet as the source of truth.

Volker_E updated the task description. (Show Details)
ldelench_wmf raised the priority of this task from High to Needs Triage.Jan 20 2023, 7:00 PM
ldelench_wmf renamed this task from Epic: Do a design inventory of Wikiverse (Design Style Guide, Codex, OOUI, MediaWiki widgets) UI components to Design inventory of Wikiverse (Design Style Guide, Codex, OOUI, MediaWiki widgets) UI components.Feb 14 2023, 3:01 PM
ldelench_wmf removed a project: Epic.
Volker_E renamed this task from Design inventory of Wikiverse (Design Style Guide, Codex, OOUI, MediaWiki widgets) UI components to Design inventory of Wikiverse (Codex design system, OOUI, MediaWiki widgets) UI components.Jan 19 2024, 4:48 PM