== Design inventory background
Identify everything that exists and reduce design (and possible technical) debt as we move things into [[ https://phabricator.wikimedia.org/tag/vue.js/ | 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
==== 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
- {T90687} Connected to (blocked on) mobile and desktop issue above and prioritization across teams
==== Theming beyond “WikimediaUI” theme problematic
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:
{icon minus} … not applicable
{icon question} … not clear yet
{icon check color=green}/{icon check color=yellow} … covered and available; Green = Go, Yellow = Go with minor todos
{icon exclamation-triangle color=red} blocking issue, that blocks or slows down designers/devs
(XL/L/M/S) … estimated size of issue from x-large to small
| Components | [[ https://design.wikimedia.org/style-guide/ | Design Style Guide ]] | [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop | OOUI ]] | [[ https://doc.wikimedia.org/wvui/master/ui/ | WVUI ]] | Vector skin | MinervaNeue skin | Notes
| -- | -- | -- | -- | -- | -- | --
| **[[ https://design.wikimedia.org/style-guide/components/links.html | Links ]]** | {icon check color=green} | {icon minus} not applicable | {icon question} | link color not aligned | {icon check color=yellow} all, but focus T245887 | Complete documentation of link styles T280494
| **[[ https://design.wikimedia.org/style-guide/components/buttons.html | Buttons ]]** | {icon check color=yellow} | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#demo-section-buttons | demo]] | {icon check color=green} [[ https://doc.wikimedia.org/wvui/master/ui/?path=/docs/components-button--configurable | demo ]] | by WVUI/OOUI/mediawiki.ui | by OOUI/mediawiki.ui |
| Buttons primary (progressive and destructive): | {icon check color=green} | {icon check color=green} | {icon check color=green} | by OOUI/mediawiki.ui | by OOUI/mediawiki.ui |
| Buttons quiet (frameless) | {icon exclamation-triangle color=red} (M) Missing explanation of quiet progressive & destructive ones and their application | {icon check color=green} | {icon check color=green} | by OOUI/mw.ui | by OOUI/mw.ui | Not 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 | {icon exclamation-triangle color=red} (S) Missing explanation of normal progressive & destructive ones and their application | {icon check color=green} | {icon check color=green} | by WVUI/OOUI/mw.ui | by OOUI/mw.ui | - T253755
| Buttons normal | {icon check color=green} | {icon check color=green} | {icon check color=green} | by WVUI/OOUI/mw.ui | by OOUI/mw.ui |
| [[ https://design.wikimedia.org/style-guide/components/buttons.html#type-toggle-buttons | Toggle buttons ]] | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ToggleButtonWidget | demo ]] | {icon check color=green} [[ https://doc.wikimedia.org/wvui/master/ui/?path=/docs/components-togglebutton--configurable | demo ]] | {icon minus} | |
| **[[ https://design.wikimedia.org/style-guide/components/button-groups.html | Button Groups ]]** | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ButtonGroupWidget | demo ]] | {icon exclamation-triangle color=red} to be implemented | {icon minus} | |
| Button with dropdown | {icon exclamation-triangle color=green} documented as a type of button | {icon check color=green} | {icon exclamation-triangle color=red} to be implemented | by WVUI/OOUI/mw.ui | ? | Should we document the use cases of this component better? Can it be considered an individual component?
| **[[ https://design.wikimedia.org/style-guide/components/checkboxes.html | Checkboxes ]]** | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#CheckboxInputWidget | demo ]] | {icon check color=green} [[ https://doc.wikimedia.org/wvui/master/ui/?path=/docs/components-checkbox--configurable | demo ]] | by mw.ui/OOUI | by mw.ui/OOUI | The [[ https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/WikimediaUI-%E2%80%93-Components-library?node-id=217%3A164 | WikimediaUI ]] design file documents a size variation of 4px between desktop and mobile checkboxes (20px > 24px) that is not documented on the Style guide.
| **[[ https://design.wikimedia.org/style-guide/components/radio-buttons.html | Radio buttons ]]** | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#RadioSelectInputWidget | demo ]] | {icon check color=green} [[ https://doc.wikimedia.org/wvui/master/ui/?path=/docs/components-radio--configurable | demo ]] | {icon minus} | {icon minus} | The [[ https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/WikimediaUI-%E2%80%93-Components-library?node-id=217%3A165 | 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.
| **[[ https://design.wikimedia.org/style-guide/components/toggle-switches.html | Toggle switches ]]** | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ToggleSwitchWidget | demo ]] |{icon exclamation-triangle color=red} (M) to be implemented | by OOUI | by OOUI |
| **[[ https://design.wikimedia.org/style-guide/components/dropdowns.html | Dropdowns ]]** | {icon check color=green} | {icon check color=yellow} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#DropdownWidget | demo ]]; full-width issue, too long | {icon check color=green} [[ https://doc.wikimedia.org/wvui/master/ui/?path=/story/components-dropdown--configurable | demo ]] | by OOUI | {icon minus} | Inline validation styles should be defined and documented T267807; Consolidate style of disabled dropdowns T280508. Consider menu dependency.
| **[[ https://design.wikimedia.org/style-guide/components/comboboxes.html | Comboboxes ]]** | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#ComboBoxInputWidget | demo ]] |{icon exclamation-triangle color=red} (M) to be implemented | by OOUI | {icon minus} | Inline validation styles should be defined and documented T267807
| **[[ https://design.wikimedia.org/style-guide/components/text-inputs-and-textarea.html | Text inputs (and textareas) ]]** | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#TextInputWidget | demo ]] | {icon check color=green} | by WVUI/OOUI/mw.ui | by OOUI/mw.ui | Inline validation styles should be defined and documented T267807 (Applies to all input types)
| [[ https://design.wikimedia.org/style-guide/components/text-inputs-and-textarea.html | Textareas ]] | {icon check color=green} | {icon check color=green} | {icon exclamation-triangle color=red} (S) to be implemented | by OOUI/mw.ui | by OOUI/mw.ui |
| [[ https://design.wikimedia.org/style-guide/components/text-inputs-and-textarea.html | Search inputs ]] | {icon check color=green} | {icon check color=green} | {icon exclamation-triangle color=green} | by WVUI/OOUI/mw.ui | by OOUI/mw.ui |
| **[[https://design.wikimedia.org/style-guide/components/number-inputs.html | Number inputs]]** | {icon check color=yellow} | {icon check color=yellow} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#NumberInputWidget | demo ]] | {icon exclamation-triangle color=red} (S) to be implemented | by OOUI | by OOUI(?) | - Increase/decrease buttons useful and necessary? - Position of the buttons (same side vs opposite sides)? - T145598
| **[[ https://design.wikimedia.org/style-guide/components/file-inputs.html | File inputs ]]** | {icon check color=yellow} | {icon check color=yellow} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#SelectFileInputWidget | demo ]] | {icon exclamation-triangle color=red} (L) to be implemented | by OOUI | by OOUI(?) | Also known as SelectFile* widget; Limited by strict OS mobile specifics; `multiple` [[ T218408 | support ]] on desktop
| **Tag inputs** | {icon exclamation-triangle color=red} Missing, but design approved implementation in OOUI TagMultiselect | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#TagMultiselectWidget-allowArbitrary-inline-input-placeholder | demo ]] | | by OOUI | {icon question} |
| **Tags** | {icon exclamation-triangle color=red} Already an implementation in OOUI TagMultiselect | {icon check color=green} | | by OOUI | {icon question} | Added T280681 for DSG
| Filtering component & filter chips/tags | ? | partially | ? | | | T280701. See also discussion around Category widgets T147811
| **[[ https://design.wikimedia.org/style-guide/components/messages.html | Messages ]]** | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#MessageWidget-type-notice | demo ]] | {icon exclamation-triangle color=red} (S) to be implemented | by MW core CSS/OOUI | by MW core CSS/OOUI | Added T280658 for additional definitions and revision of existing DSG component
| **Form validation** | {icon exclamation-triangle color=red} (M) to be implemented, already in Sketch | {icon check color=green} | {icon exclamation-triangle color=red} (M) to be implemented | by MW core CSS/OOUI | by MW core CSS/OOUI |
| **[[ https://design.wikimedia.org/style-guide/components/language-selectors.html | Language selectors ]]** | {icon check color=green} | {icon minus} not planned | {icon exclamation-triangle color=red} (M) to be implemented | {icon minus} | {icon minus} | Related responsive debt T161957
| **Typeahead search** | {icon exclamation-triangle color=red} (M) to be implemented T272625 | {icon minus} not planned | {icon check color=green} [[ https://doc.wikimedia.org/wvui/master/ui/?path=/docs/components-typeaheadsearch--configurable | demo ]] | by WVUI in Vector modern | {icon minus} not planned |
| **Date pickers** | {icon exclamation-triangle color=red} (XL) to be added | 2 different OOUI-based MW widgets, somewhat following design | {icon minus} | {icon minus} | {icon minus} | Consolidation task of 2 different MW ones: T91148
| **Color pickers** | {icon minus} not planned | {icon minus} | {icon minus} | {icon minus} | {icon minus} |
| **Progress indicators** | {icon exclamation-triangle color=red} (M) to be implemented T266028 | {icon check color=yellow} Dialog loading indicator wrong | {icon exclamation-triangle color=red} (S) To be implemented | by MW core CSS/OOUI | by MW core CSS/OOUI | Still jquery.ui and other non-design approved implementations available
| **Lists** | {icon exclamation-triangle color=red} (M) Intro typographic guidelines | {icon minus} not planned | {icon question} | {icon exclamation-triangle color=red} (S) allover design-wise in Vector, partly community driven | {icon exclamation-triangle color=red} (S) allover design-wise in MN |
| **Lists of pages** aka **Lists (Advanced)** | {icon exclamation-triangle color=red} (M) | {icon minus} not planned | {icon question} | by MW core/extensions like RelatedArticles | | T153417
| **Menus** | {icon exclamation-triangle color=red} (M) partly covered by dropdown and typeahead | {icon check color=yellow} | {icon check color=yellow} | by WVUI/OOUI | by OOUI | {T286240}
| **Dividers** | {icon check color=yellow} Intro typographic guidelines | {icon minus} not planned | {icon question} | by MW core | |
| **Cards** | {icon exclamation-triangle color=red} (M) Captured in T278311 | {icon minus} not planned | {icon exclamation-triangle color=red} (M) to be implemented T256036 | possibly in Newcomer homepage project/ext | MN features card-like elements | Consolidate 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** | {icon exclamation-triangle color=red} (M) Already a standards-oriented implementation in OOUI/WVUI | {icon check color=green} | {icon check color=green} in SDC | by WVUI/OOUI | by WVUI/OOUI | Minor variabilities in implementations need to be unified
| **Tables, data tables** | {icon exclamation-triangle color=red} (L) Already a standards-oriented treatment in Vector/MN | {icon minus} | {icon question} | {icon exclamation-triangle color=red} (S) MW core/Vector home-brewed implementations (MW core's own data table `.wikitable` styles) | {icon exclamation-triangle color=red} (S) MW core/MN home-brewed implementations | See also T280727, and T214208
| **Sheets: bottom and side** | {icon exclamation-triangle color=red} Already an implementation in MN, that is not standards-compliant | {icon minus} | {icon question} | {icon minus} | MN code |
| **Navigation menu: bottom and side** | {icon exclamation-triangle color=red} (M) | {icon minus} not planned | {icon question} | ? | by MinervaNeue | T280680 details how this may be considered distinct from "Sheets:bottom and side"
| **Image galleries** | {icon exclamation-triangle color=red} (L) To be implemented | {icon minus} not planned | {icon minus} not planned | Vector (community) implementations | MN home-brewed implementations |
| **Steppers** | {icon exclamation-triangle color=red} (M) To be implemented, compare Number inputs | {icon minus} not planned | {icon question} | | |
| **Pagination** | {icon exclamation-triangle color=red} (S) To be implemented | {icon minus} not planned | {icon question} | some semi-design approved Vector implementations | some semi-design approved MN implementations |
| **Breadcrumbs** | {icon question} | | | | |
| **Sliders** | {icon exclamation-triangle color=red} (S) To be implemented | {icon minus} not planned | {icon question} | {icon minus} | {icon minus} |
| **Drag & Drop / Reorder** | {icon exclamation-triangle color=red} (M) To be implemented, already OOUI widget avail | {icon exclamation-triangle color=red} (?) Available, but w/o design involvement | {icon minus} not planned yet | via OOUI | {icon minus} not planned yet, due to drag & drop difficulties on mobile | Technical difficulties with touch interfaces
| **Avatars** | {icon exclamation-triangle color=red} (M) | {icon minus} not planned | {icon minus} | {icon minus} | {icon minus} | See old task T128953
| **Badges** | {icon exclamation-triangle color=red} (M) | {icon minus} not planned | designed but not unified | designed but not unified | {icon minus} | T280708
| **Page previews/hover cards** | {icon exclamation-triangle color=red} (M) Already standards-oriented implementation in Vector | {icon minus} | {icon minus} | Vector-only | {icon minus}|
| **[[ https://design.wikimedia.org/style-guide/components/dialogs.html | Dialogs ]]** | {icon check color=yellow} Captured in T266029. Alerts and quick confirm treatment still needs extra work | {icon exclamation-triangle color=red} (L) Out of sync with DSG, T155528 | {icon exclamation-triangle color=red} (XL) to be implemented | by jquery.ui/OOUI/home-brewed | by OOUI/Minerva home-brewed |
| **Page/view types** | {icon exclamation-triangle color=red} (XL) Not available besides bits & pieces | {icon minus} | {icon question} Scope of WVUI unclear yet, if it is meant for full page types, prob yes | {icon exclamation-triangle color=red} (XL) designs all over the place | {icon exclamation-triangle color=red} (XL) designs all over the place | Grid as one the missing keys of the issue
| **Text highlight** | {icon exclamation-triangle color=red} (S) | {icon exclamation-triangle color=red} Yes, but outdated | ? | ? | ? | T280670
| **Edit Diff ** | {icon exclamation-triangle color=red} (M) | {icon minus} not planned | ? | ? | ? | T280717, T90948
| **Tooltips** | {icon exclamation-triangle color=red} (S) design approved implementation in OOUI | {icon check color=yellow} [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#PopupButtonWidget-quiet-with-popup-head-with-icon-align-force-left | demo ]] | {icon question} | by OOUI/jquery.ui | {icon question} | T280677
| **Floating action buttons** (& associated components) | {icon exclamation-triangle color=red} (L) Captured in T278134 | | | | | See T280330 and T278134
| **Onboarding/ guided help** | {icon exclamation-triangle color=red} (S) | {icon minus} not planned | {icon question} || | T280705
| **Form layouts** | {icon exclamation-triangle color=red} (S) Rudimentary captured in components overview | Provided various layout types as Fieldlayouts | | by MW core/OOUI/Vector | by MW core/OOUI/MinervaNeue | T280724
| **Media player controls** | {icon exclamation-triangle color=red} (S) | {icon minus} not planned | {icon question} not planned | by TimedMediaHandler extension | {icon question} | T280725
| **Expand and collapse** | {icon exclamation-triangle color=red} (M) design approved implementation on special pages/Advanced Search | | || | T280785
| **Empty states** | {icon exclamation-triangle color=red} (S) | {icon minus} not planned | | {icon question} | {icon question} | T280789
| **Skeleton / Placeholder UI** | {icon exclamation-triangle color=red} (S) | {icon minus} not planned | || | T280842, potentially as a child of T75972
| **Offline states** | {icon exclamation-triangle color=red} (S) | {icon minus} not planned | {icon question} | {icon minus} | {icon minus} | T280845
| **Carousels** | {icon exclamation-triangle color=red} (M) | {icon minus} not planned | {icon question} | {icon minus} | {icon minus} | Should this even be part of DSG. With all negative usability research on carousels?! T280846
| **Data visualisations** | {icon exclamation-triangle color=red} (XL) | {icon minus} | || | T280847 - Note that wikistats charts currently uses Vue
| **Icons** | {icon exclamation-triangle color=green} need to be constantly synced in 4 different places | {icon check color=green} default implementation | {icon exclamation-triangle color=red} (M) Yes, with limitations T276808 T260815 | {icon exclamation-triangle color=red} (M) also still a number of out-of-sync and homegrown icons | {icon exclamation-triangle color=red} (M) Some icons homegrown still in | See also {T141801}, T280662, and T280666
| **Animation and transitions** | {icon exclamation-triangle color=red} (XL) | {icon check color=yellow} partly implemented in widgets | {icon question} | by WVUI/OOUI/mw.ui/MW core | by OOUI/mw.ui/MW core | T77949
| **Color palette - dark/black mode** | {icon exclamation-triangle color=red} (XL) | {icon minus} not planned | {icon question} | only by gadgets/extensions per wiki | | See #darkmode and [[ https://en.wikipedia.org/wiki/User:Volker_E._(WMF)/dark-mode | example gadget on enwiki ]]
| Components | Design Style Guide | OOUI | WVUI | Vector skin | MinervaNeue skin | Notes
== 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}