== 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 future Vue.js based #Codex component toolkit.
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
- {T90687} Connected to (blocked on) mobile and desktop issue above and prioritization across teams
==== 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:
{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/codex/main/ | Codex ]] | Vector skin | MinervaNeue skin | Notes
| -- | -- | -- | -- | -- | -- | --
| **[[ https://design.wikimedia.org/style-guide/components/links.html | Links ]]** | {icon check color=green} | {icon minus} not applicable | {icon exclamation-triangle color=red} Core component. To be implemented | 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/codex/main/components/button.html | Core component demo ]] | by Codex/OOUI/mediawiki.ui | by OOUI/mediawiki.ui |
| Buttons primary (progressive and destructive): | {icon check color=green} | {icon check color=green} | {icon check color=green} (See 'Buttons') | 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} (See 'Buttons') | 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} (See 'Buttons') | by Codex/OOUI/mw.ui | by OOUI/mw.ui | - T253755. What's the difference between Secondary and Normal (neutral, progressive and destructive) buttons?
| Buttons normal | {icon check color=green} | {icon check color=green} | {icon check color=green} (See 'Buttons') | by Codex/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/codex/main/components/toggle-button.html | Core component 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} Core component. 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 Codex/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/codex/main/components/checkbox.html | Core component 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/codex/main/components/radio.html | Core component 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 check color=green} [[ https://doc.wikimedia.org/codex/main/components/toggle-switch.html | Core component demo ]] | 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/codex/main/components/select.html | Core component demo ]] | by OOUI | {icon minus} | Inline 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)?
| **[[ 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 check color=green} [[ https://doc.wikimedia.org/codex/main/components/combobox.html | Core component demo ]] | 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 | Label ]]** | | | {icon exclamation-triangle color=red} Core component/mixin. To be implemented. | | | |
| **[[ https://design.wikimedia.org/style-guide/components/text-inputs-and-textarea.html | Field ]]** | | | {icon exclamation-triangle color=red} Core component. To be implemented. | | | |
| **[[ https://design.wikimedia.org/style-guide/components/text-inputs-and-textarea.html | Text inputs ]]** | {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} [[ https://doc.wikimedia.org/codex/main/components/text-input.html | Core component demo ]]| by Codex/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 | Label ]]** | | | {icon exclamation-triangle color=red} Core component/mixin. To be implemented. | | | |
| [[ 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) Core component. 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 check color=green} [[ https://doc.wikimedia.org/codex/main/components/search-input.html | Core component demo ]] | by Codex/OOUI/mw.ui | by OOUI/mw.ui |
| **Lookup** | {icon exclamation-triangle color=red} Missing | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/codex/main/components/lookup.html | Core component demo ]] | by Codex/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) Core component. 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) Core component. 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 ]] | {icon exclamation-triangle color=red} (aka ChipInput) Core component. To be implemented | by OOUI | {icon question} |
| **Tags** | {icon exclamation-triangle color=red} Already an implementation in OOUI TagMultiselect | {icon check color=green} | {icon exclamation-triangle color=red} (aka InfoChip and FilterChip) Core component. To be implemented | by OOUI | {icon question} | Added T280681 for DSG
| Filtering component & filter chips/tags | ? | partially | ? | | | T280701. See also discussion around Category widgets T147811. Duplicate of Tags/Filter chip?
| **[[ 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 check color=green} [[ https://doc.wikimedia.org/codex/main/components/message.html | Core component demo ]] | 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) (Aka ValidationMessage) Core component. To be implemented | by MW core CSS/OOUI | by MW core CSS/OOUI |
| **Toast notification** | | | {icon exclamation-triangle color=red} Core component. To be implemented | | |
| **[[ 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) Potential core component or pattern. 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/codex/main/components/typeahead-search.html | Core component demo ]] | by Codex in modern Vector 2022 | {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 exclamation-triangle color=red} Core component. To be implemented | {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) Core components. To be implemented | by MW core CSS/OOUI | by MW core CSS/OOUI | Still jquery.ui and other non-design approved implementations available
| Progress bar | {icon exclamation-triangle color=red} (M) to be implemented T266028 | {icon check color=green} | {icon check color=yellow} [[ https://doc.wikimedia.org/codex/main/components/progress-bar.html | Core component demo ]] (Indeterminate only) | {icon minus} | {icon minus} |
| **Lists** | {icon exclamation-triangle color=red} (M) Intro typographic guidelines | {icon minus} not planned | {icon question} Potential core component | {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 | Probably covered by 'List' | 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} [[ https://doc.wikimedia.org/codex/main/components/menu.html | Core component demo ]] (basic functionality) | by Codex/OOUI | by OOUI | {T286240}
| **Menu item** | {icon exclamation-triangle color=red} Missing | | {icon check color=green} [[ https://doc.wikimedia.org/codex/main/components/menu-item.html | Core component demo ]] | | | |
| **Dividers** | {icon check color=yellow} Intro typographic guidelines | {icon minus} not planned | {icon exclamation-triangle color=red} Core component/mixin. To be implemented.| by MW core | |
| **Cards** | {icon exclamation-triangle color=red} (M) Captured in T278311 | {icon minus} not planned | {icon exclamation-triangle color=red} (M) Core component. WIP: T278311 | 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 Codex/OOUI | {icon check color=green} | {icon check color=green} [[ https://doc.wikimedia.org/codex/main/components/tabs.html | Core component demo ]] | by Codex/OOUI | by Codex/OOUI | Minor variabilities in implementations need to be unified. Codex: T303321
| **Tables, data tables** | {icon exclamation-triangle color=red} (L) Already a standards-oriented treatment in Vector/MN | {icon minus} | {icon exclamation-triangle color=red} (L) Core component. To be implemented | {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** | {icon exclamation-triangle color=red} Missing | {icon minus } | {icon question} Potential core component | | | |
| **Thumbnail** | {icon exclamation-triangle color=red} Missing | {icon minus} | {icon check color=green} [[ https://doc.wikimedia.org/codex/main/components/thumbnail.html | Core component demo ]] | | | |
| **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} Potential core component | some semi-design approved Vector implementations | some semi-design approved MN implementations |
| **Breadcrumbs** | {icon question} | | {icon question} Potential core component | | |
| **Sliders** | {icon exclamation-triangle color=red} (S) To be implemented | {icon minus} not planned | {icon question} Potential core component | {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 | 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 | {icon exclamation-triangle color=red} Core component. To be implemented. | 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) (Simple and complex) Core components. 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 Codex 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 | {icon exclamation-triangle color=red} Core component. To be implemented | ? | ? | 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 exclamation-triangle color=red} Core component. To be implemented | by OOUI/jquery.ui | {icon question} | T280677
| **Floating action buttons** (& associated components) | {icon exclamation-triangle color=red} (L) Captured in T278134 | | {icon exclamation-triangle color=red} Core component. To be implemented | | | See T280330 and T278134
| **Onboarding/ guided help** | {icon exclamation-triangle color=red} (S) | {icon minus} not planned | {icon question} Potential core component || | T280705
| **Form layouts** | {icon exclamation-triangle color=red} (S) Rudimentary captured in components overview | Provided various layout types as Fieldlayouts | {icon question} Could provide pattern recommendations | 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} Potential core component | by TimedMediaHandler extension | {icon question} | T280725
| **Expand and collapse (accordion)** | {icon exclamation-triangle color=red} (M) design approved implementation on special pages/Advanced Search | | {icon question} Potential core component || | T280785
| **Empty states** | {icon exclamation-triangle color=red} (S) | {icon minus} not planned | {icon question} Patterns should be documented | {icon question} | {icon question} | T280789
| **Skeleton / Placeholder UI** | {icon exclamation-triangle color=red} (S) | {icon minus} not planned | {icon exclamation-triangle color=red} Core component/mixin. To be implemented || | 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} Potential core component | {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} | {icon question} || | 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 check color=green} [[ https://doc.wikimedia.org/codex/main/components/icon.html | Core component demo ]] | {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
| **Grabber / Handlebar** | {icon exclamation-triangle color=red} Missing (S) | {icon minus} | {icon minus} | {icon minus} |{icon minus} | See {T297805}
| **Animation and transitions** | {icon exclamation-triangle color=red} (XL) | {icon check color=yellow} partly implemented in widgets | {icon question} Partially covered by [[ https://doc.wikimedia.org/codex/main/design-tokens/animation.html | Animation ]] and [[ https://doc.wikimedia.org/codex/main/design-tokens/transition.html | Transition ]] tokens | by Codex/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 | Codex | 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}