Page MenuHomePhabricator
Create Mock
Pholio M101

WikimediaUI
ClosedPublic
Actions

Maniphest Tasks
T86003: MediaWiki theme: Checkboxes and radios size (original design looks oversized on desktop)
Authored By
• violetto, Oct 12 2015
Tags
Referenced Files
F26224221: WikimediaUI M101 Overview 2018-09-27.png
Sep 28 2018, 1:59 AM
F7998972: WikimediaUI M101 2017-05-09.png
May 9 2017, 5:48 PM
F5289921: WikimediaUI M101 2017-01-15.png
Jan 15 2017, 11:28 PM
F4820195: WikimediaUI M101 2016-11-21.png
Nov 21 2016, 11:35 PM
F4696869: WikimediaUI M101 2016-11-04.png
Nov 4 2016, 10:06 PM
F4604958: M101 2016-10-14.png
Oct 15 2016, 2:40 AM
F4470813: Artboard M101 2016-09-15 WikimediaUI.png
Sep 15 2016, 9:12 AM
F4440909: Artboard M101 2016-09-07.png
Sep 7 2016, 8:24 PM
View All 21 Files
Subscribers
Charlie_WMDE
cmadeo
Danny_B
• iamjessklein
Jan_Dittrich
Jdforrester-WMF
Jdlrobson
View All 22 Subscribers
Tokens
"Mountain of Wealth" token, awarded by RandomDSdevel."Barnstar" token, awarded by Jan_Dittrich."Yellow Medal" token, awarded by Volker_E.

Mock History

Current Revision

Mock Description

Update 2019-11-07

This mock has been closed in favor of up-to-date Sketch overview file and its SVG copy/companion of the “Resources” section of Design Style Guide.
Instead of keeping this up-to-date, please subscribe to or fork the GitHub repository.

This mockup provides the overview of widgets as template for our interface implementation. The widgets are sharing consistent “WikimediaUI Base stylesheet” design properties and interaction patterns.

Find the source Sketch file for designers in resources folder of Design Style Guide, together with an SVG and PNG export

Please report design shortcomings or bugs in T136371: Design shortcomings of WikimediaUI widgets overview (M101) (tracking)

More details on individual component Pholio mockups:
(Notice that those might be outdated, M101 is featuring the latest changes)

See also the Design Style Guides color palette as mock residing at

  • M82 Color palette (Wikimedia Design Style Guide/WikimediaUI)
    17
    • .

    M101 is based on an em based grid (translated to 8px as .5em) and uses Sketch symbols for instant adaption to changes across widgets.

    Event Timeline

    There are a very large number of changes, so older changes are hidden. Show Older Changes
    Volker_E edited images, added: Artboard M101 160629.png; removed: Artboard M101 160605.pngJun 29 2016, 2:00 PM
    • JGirault mentioned this in T140213: <maplink> and/or <mapframe>: Image size is not fitted to the width of the marker tool tip window.Aug 2 2016, 3:57 PM
    • Nikita13311331 added a task: T142288: Consolidate, remove, and/or downsize Beta Cluster instances to help with [[wikitech:Purge_2016]].Aug 9 2016, 5:03 AM
    Krenair removed a task: T142288: Consolidate, remove, and/or downsize Beta Cluster instances to help with [[wikitech:Purge_2016]].Aug 9 2016, 5:23 AM
    • JGirault mentioned this in T143833: Override leaflet style to match wikimedia style.Aug 24 2016, 9:40 PM
    Volker_E edited images, added: Artboard M101 20160826.png; removed: Artboard M101 160629.pngAug 27 2016, 7:34 AM
    Volker_E edited images, added: Artboard M101 2016-09-07.png; removed: Artboard M101 20160826.pngSep 7 2016, 8:24 PM
    Volker_E added subscribers: Charlie_WMDE, Jan_Dittrich.Sep 7 2016, 9:57 PM
    Jan_Dittrich awarded a token.Sep 8 2016, 8:10 AM
    Volker_E renamed this mock from Mediawiki UI to WikimediaUI.Sep 15 2016, 9:12 AM
    Volker_E updated the mock's description. (Show Details)
    Volker_E edited images, added: Artboard M101 2016-09-15 WikimediaUI.png; removed: Artboard M101 2016-09-07.png
    Volker_E updated an image's (Artboard M101 2016-09-15 WikimediaUI.png) description. (Show Details)
    Volker_E updated an image's (Artboard M101 2016-09-15 WikimediaUI.png) description. (Show Details)Sep 15 2016, 9:16 AM
    Volker_E mentioned this in T145894: WikimediaUI Base: Align colors to overhauled color palette.Sep 16 2016, 8:28 PM
    SamanthaNguyen added a comment.EditedSep 18 2016, 5:11 PM

    Just curious, are any of you WMF designers planning to introduce a design for tabs and breadcrumb navigation?

    SamanthaNguyen mentioned this in M31: Buttons.Sep 18 2016, 8:18 PM
    Volker_E updated the mock's description. (Show Details)Sep 19 2016, 6:53 AM
    Volker_E added a comment.Sep 19 2016, 7:05 AM

    @SamanthaNguyen As for the tabs, there are plans to add them anytime soon. There is also an implementation of tabs in our UI library OOjs UI, you can find in the demos under “Indexed dialog (tab navigation)”. It didn't go through full design process, therefore it's not yet included here.

    Breadcrumbs are currently not a core functionality of our products, therefore there's no plan to add those.
    Please feel free to file a ticket & share your use case if you think that it is a needed addition.

    SamanthaNguyen added a comment.Sep 23 2016, 11:34 PM

    @Volker_E Will do! (I'll probably set a reminder to do it during the weekend), thanks for the info :)

    SamanthaNguyen mentioned this in T146603: Feature request: Consistent snackbar design in Wikimedia UI.Sep 26 2016, 1:20 AM
    Volker_E mentioned this in T146823: Button colors differ in mediawiki.UI from design templates and OOjs UI.Sep 27 2016, 9:26 PM
    Volker_E added a subscriber: ovasileva.Sep 29 2016, 2:32 AM
    Volker_E mentioned this in T146923: Replace usages of mw-ui-primary and mw-ui-constructive with mw-ui-progressive.Sep 29 2016, 10:28 PM
    Jdrewniak mentioned this in T144834: Wikipedia.org Portal: update logo for new branding guidelines.Oct 11 2016, 10:46 AM
    Volker_E mentioned this in T86003: MediaWiki theme: Checkboxes and radios size (original design looks oversized on desktop).Oct 12 2016, 9:50 AM
    Volker_E mentioned this in T148000: Challenging `text-shadow` on disabled elements.Oct 13 2016, 2:41 AM
    jrbs subscribed.Oct 13 2016, 11:56 PM
    Volker_E added a task: T86003: MediaWiki theme: Checkboxes and radios size (original design looks oversized on desktop).Oct 14 2016, 9:35 PM
    Volker_E mentioned this in T148256: Add `has-label` CSS class or similar to fieldLayout.Oct 14 2016, 11:42 PM
    Volker_E updated the mock's description. (Show Details)Oct 15 2016, 2:40 AM
    Volker_E edited images, added: M101 2016-10-14.png; removed: Artboard M101 2016-09-15 WikimediaUI.png
    SamanthaNguyen mentioned this in T148267: WikimediaUI ButtonWidget uses a color for border that's unlisted from the color palette.Oct 15 2016, 4:39 AM
    SamanthaNguyen mentioned this in T148286: WikimediaUI text highlights colors should be listed on the color palette.Oct 15 2016, 3:21 PM
    Volker_E mentioned this in T148579: Define and implement DropdownWidget font-weight consistently.Oct 18 2016, 7:56 PM
    Volker_E mentioned this in T148601: WikimediaUI theme: DropdownWidget is not following disabled pattern.Oct 19 2016, 1:42 AM
    Volker_E mentioned this in T111889: OOUI PopupWidgets don't have drop shadows in the MediaWiki theme.Oct 20 2016, 5:20 AM
    Volker_E mentioned this in T149270: mw.widgets.DateInputWidget does not match the design of other widgets in MediaWiki theme.Oct 28 2016, 2:50 AM
    • JGirault mentioned this in T149836: Improve map popup style.Nov 2 2016, 7:25 PM
    Volker_E edited images, added: WikimediaUI M101 2016-11-04.png; removed: M101 2016-10-14.pngNov 4 2016, 10:06 PM
    Volker_E edited images, added: WikimediaUI M101 2016-11-21.png; removed: WikimediaUI M101 2016-11-04.pngNov 21 2016, 11:35 PM
    Volker_E added a subscriber: cmadeo.
    Volker_E mentioned this in T149435: Build user interface for the Filter Search Bar.Nov 25 2016, 11:33 PM
    Jdlrobson mentioned this in T148108: Update Navigation Drawer color scheme .Nov 30 2016, 10:26 PM
    Volker_E mentioned this in T153477: Remove panel box-shadow from fieldsets.Dec 16 2016, 5:20 PM
    Volker_E mentioned this in T153486: Replace abandoned colors in VisualEditor.Dec 16 2016, 7:27 PM
    Volker_E mentioned this in T154921: Add Page previews pattern to M101.Jan 9 2017, 6:51 PM
    Volker_E mentioned this in T155335: Remove 3D box-shadow for flat element PanelLayout and harmonize inner padding.Jan 15 2017, 6:15 AM
    Volker_E edited images, added: WikimediaUI M101 2017-01-15.png; removed: WikimediaUI M101 2016-11-21.pngJan 15 2017, 11:28 PM
    Volker_E added a subscriber: • Jseddon.
    Volker_E mentioned this in T155383: Align `box-shadow` with WikimediaUI guidelines.Jan 15 2017, 11:33 PM
    Volker_E mentioned this in T119591: OOUI MediaWiki theme: Some shadows are solid, some are fading.Jan 15 2017, 11:46 PM
    stjn subscribed.Jan 16 2017, 7:54 PM
    Volker_E mentioned this in T157217: ContentTranslation: Сontribution's dropdown menu features non-standard layout.Feb 6 2017, 10:11 PM
    Volker_E mentioned this in T111550: MediaWiki Theme: Replace the down, up, next, previous indicators with chevrons.Feb 9 2017, 4:49 AM
    Xaosflux subscribed.Feb 20 2017, 7:27 PM
    RandomDSdevel awarded a token.Feb 21 2017, 2:12 AM
    Volker_E mentioned this in T158410: Adjust the visual style for cards.Mar 3 2017, 12:54 AM
    • Prtksxna mentioned this in T158400: Streamline & improve tag component TagMultiselectWidget (former CapsuleMultiselectWidget).Mar 13 2017, 9:30 AM
    Jdrewniak mentioned this in T153417: Align the style for lists of pages.Mar 16 2017, 9:57 AM
    Jdrewniak mentioned this in T160704: Design better typographic scale for the portal.Mar 27 2017, 11:19 AM
    Volker_E mentioned this in T123359: Provide WikimediaUI Base's tokens in Wikimedia Design Style Guide following skins.Apr 5 2017, 9:04 PM
    Volker_E mentioned this in T163094: Frameless buttons should have same click target minimum size as framed buttons.Apr 17 2017, 4:09 AM
    Volker_E mentioned this in T163189: Make build process with automatic SVG creation out of resources.Apr 18 2017, 8:15 AM
    Volker_E edited images, added: WikimediaUI M101 2017-05-09.png; removed: WikimediaUI M101 2017-01-15.pngMay 9 2017, 5:48 PM
    Volker_E mentioned this in T163919: Design review for CodeMirror extension.May 11 2017, 5:43 PM
    Volker_E mentioned this in T165645: User perception of radio buttons sufficiently understandable?.May 18 2017, 11:52 PM
    Volker_E mentioned this in T116082: Checkbox widget is broken in living style guide.May 21 2017, 2:43 PM
    Volker_E mentioned this in T167190: Color section: Make images and swatches clearer.Jun 15 2017, 7:19 PM
    Pginer-WMF mentioned this in T172402: [Regression pre-wmf.13] WikimediaUI theme for disabled buttons uses the wrong colour for the border.Aug 3 2017, 2:44 PM
    Volker_E mentioned this in T152099: Create OOUI mockup shapes for use in Open Source diagramming application.Aug 15 2017, 9:42 PM
    Volker_E added a subscriber: • PDrouin-WMF.Oct 5 2017, 10:14 PM
    Schnark subscribed.Oct 10 2017, 9:06 AM
    Volker_E mentioned this in T180726: PHP DropdownInputWidget layout is broken.Nov 16 2017, 6:50 PM
    Volker_E mentioned this in T184253: Implement refined WikimediaUI icon set in non-code places.Jan 5 2018, 5:02 AM
    Volker_E mentioned this in T184526: Multi-line checkbox/radio labels should be aligned to the top, not middle.Jan 19 2018, 1:00 AM
    abian mentioned this in T192235: Apply the colors in the Wikimedia Design Style Guide to the Wikidata Query GUI.Apr 15 2018, 4:42 PM
    Volker_E updated the mock's description. (Show Details)Sep 28 2018, 1:59 AM
    Volker_E edited images, added: WikimediaUI M101 Overview 2018-09-27.png; removed: WikimediaUI M101 2017-05-09.png
    Volker_E added a subscriber: • iamjessklein.Oct 26 2018, 3:34 AM
    abian mentioned this in T178745: Highlight statement(s) when using "#P" in URL.Feb 10 2019, 7:29 PM
    abian mentioned this in T218450: Exception when accessing to a Phabricator mock: "Attempting to add more metadata after metadata has been locked.".Mar 15 2019, 10:10 PM
    Volker_E mentioned this in T118925: [GOAL] Style Guide - Guide on how/when to use components.Jul 30 2019, 2:15 PM
    Volker_E added a comment.Nov 8 2019, 10:39 PM

    With the latest updates of the Design Style Guide repository, I'll close this mock.
    The Sketch overview file of the “Resources” section is the source of truth together with its SVG copy/companion.
    Instead of keeping this up-to-date, please subscribe to the GitHub repository.

    Volker_E closed this mock.Nov 8 2019, 10:39 PM
    Volker_E updated the mock's description. (Show Details)Nov 9 2019, 12:02 AM
    Volker_E updated the mock's description. (Show Details)
    Omar_sansi subscribed.Jul 19 2022, 4:44 PM
    Mayakp.wiki mentioned this in T336715: Investigate relation of UA deprecation to increase in automated traffic and reduction in unique devices.May 16 2023, 12:16 AM
    Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL