This pholio mockup provides the overview of widgets as template for our interface implementation. The widgets are sharing consistent “[[ https://phabricator.wikimedia.org/diffusion/WMUI/ | WikimediaUI base ]]” design properties and interaction patterns.
Find the source Sketch file for designers [[ https://www.dropbox.com/s/plr3y62o4yz2pi0/WikimediaUI.sketch?dl=0 | to use on Dropbox ]]
Please report design shortcomings or bugs in {T136371}
More details on individual component pholio mockups:
(Notice that those might be outdated, M101 is featuring the latest changes)
{M82}
[[ https://phabricator.wikimedia.org/M31 | Buttons ]]
[[ https://phabricator.wikimedia.org/M30 | Checkbox ]]
[[ https://phabricator.wikimedia.org/M29 | Radio buttons ]]
[[ https://phabricator.wikimedia.org/M33 | Text field ]]
[[ https://phabricator.wikimedia.org/M61 | Toggle switch ]]
[[ https://phabricator.wikimedia.org/M55 | Dropdown ]]
[[ https://phabricator.wikimedia.org/M54 | Combo box ]]
[[ https://phabricator.wikimedia.org/M53 | Date picker ]]
[[ https://phabricator.wikimedia.org/M44 | Stepper control ]]
[[ https://phabricator.wikimedia.org/M34 | Secondary toolbar ]]
M101 is based on an `em` based grid (translated to `8px` as `.5em`) and uses Sketch symbols for instant adaption to changes across widgets.