== 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.
For simplicity we'll focus here on one theme application, namely WikimediaUI.
=== Overall 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)
==== No universally applicable grid system
- {T90687} Connected to (blocked on) mobile and desktop issue above and prioritization across teams
==== Problematic theming outside “WikimediaUI” theme
Thinking MediaWiki skins application of OOUI/WVUI 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 |
| **[[ https://design.wikimedia.org/style-guide/components/buttons.html | Buttons ]]** | {icon check color=yellow} | {icon check color=green} | {icon check color=yellow} | 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=yellow} | 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} | {icon exclamation-triangle color=red} to be implemented | {icon minus} | |
| **[[ https://design.wikimedia.org/style-guide/components/button-groups.html | Button Groups ]]** | {icon check color=green} | {icon check color=green} | {icon exclamation-triangle color=red} to be implemented | {icon minus} | |
| **[[ https://design.wikimedia.org/style-guide/components/checkboxes.html | Checkboxes ]]** | {icon check color=green} | {icon check color=green} | {icon check color=green} (S) To be implemented. Ready to go design-wise. | by mw.ui/OOUI | by mw.ui/OOUI |
| **[[ https://design.wikimedia.org/style-guide/components/radio-buttons.html | Radio buttons ]]** | {icon check color=green} | {icon check color=green} | {icon check color=green} (S) To be implemented. Ready to go design-wise. | {icon minus} | {icon minus} |
| **[[ https://design.wikimedia.org/style-guide/components/toggle-switches.html | Toggle switches ]]** | {icon check color=green} | {icon check color=green} |{icon exclamation-triangle color=red} to be implemented | by OOUI | by OOUI |
| **[[ https://design.wikimedia.org/style-guide/components/dropdowns.html | Dropdowns ]]** | {icon check color=yellow} full-width issue, too long | {icon check color=green} | {icon exclamation-triangle color=red} to be implemented | {icon minus} | {icon minus} | Inline validation styles should be defined and documented T267807; Consolidate style of disabled dropdown T280503
| **[[ https://design.wikimedia.org/style-guide/components/comboboxes.html | Comboboxes ]]** | {icon check color=green} | {icon check color=green} |{icon exclamation-triangle color=red} to be implemented | {icon minus} | {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} | {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} 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} | {icon exclamation-triangle color=red} 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} | {icon exclamation-triangle color=red} to be implemented | by OOUI | by OOUI(?) |
| **Tag inputs** | {icon exclamation-triangle color=red} design-approved implementation in OOUI TagMultiselect | {icon check color=green} | | 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
| **[[ https://design.wikimedia.org/style-guide/components/messages.html | Messages ]]** | {icon check color=green} | {icon check color=green} | {icon exclamation-triangle color=red} (S) to be implemented | by MW core CSS/OOUI | by MW core CSS/OOUI | Added T280658 for aditionally 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} | not planned | {icon exclamation-triangle color=red} (M) to be implemented | {icon minus} | {icon minus} |
| **Typeahead search** | {icon exclamation-triangle color=red} (M) to be implemented | {icon minus} not planned | {icon check color=green} | 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} |
| **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) | | || | 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 |
| **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 OOUI/WVUI | by OOUI/WVUI | Minor variabilities in implementations need to be unified
| **Tables, data tables** | {icon exclamation-triangle color=red} (M) Already a standards-oriented treatment in Vector/MN | {icon minus} | {icon question} | {icon exclamation-triangle color=red} (S) MW core/Vector home-brewed implementations | {icon exclamation-triangle color=red} (S) MW core/MN home-brewed implementations | See also T214208
| **Sheets: bottom and side** | {icon exclamation-triangle color=red} Already an implementation in MN, that is not standards-compliant | {icon minus} | | {icon minus} | MN code |
| **Navigation menu: bottom and side** | {icon exclamation-triangle color=red} (M) | ? | | ? | ? | 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 minus} not planned | | |
| **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} |
| **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} 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
| **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
| **Text highlight** | {icon exclamation-triangle color=red} (S) | ? | ? | ? | ? | T280670
| **Edit Diff ** | {icon exclamation-triangle color=red} (M) | ? | ? | ? | ? | T280717, T90948
| **Info tooltips** | {icon exclamation-triangle color=red} (S) | ? | ? | ? | ? | T280677
| **Floating action buttons** (& associated components) | {icon exclamation-triangle color=red} (L) | | | | | See T280330 and T278134
| **Onboarding/ guided help** | {icon exclamation-triangle color=red} (S) | | || | T280705
| **Form layouts** | {icon exclamation-triangle color=red} (S) | | || | T280724
| **Media player controls** | {icon exclamation-triangle color=red} (S) | | || | T280725
| **Expand and collapse** | {icon exclamation-triangle color=red} (M) | | || | T280785
| **Empty states** | {icon exclamation-triangle color=red} (S) | | || | T280789
| **Skeleton / Placeholder UI** | {icon exclamation-triangle color=red} (S) | | || | T280842, potentially as a child of T75972
| **Offline states** | {icon exclamation-triangle color=red} (S) | | || | T280845
| **Carousels** | {icon exclamation-triangle color=red} (M) | | || | T280846
| **Data tables** | {icon exclamation-triangle color=red} (L) | | || | T280727
| **Data visualisations** | {icon exclamation-triangle color=red} (XL) | | || | T280847
| **Animation and transitions** | {icon exclamation-triangle color=red} (XL) | | || | T77949
| **Colour palette - dark/black mode** | {icon exclamation-triangle color=red} (XL) | | || | See #darkmode
| 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}