Last modified: 2014-04-22 03:08:15 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T58705, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 56705 - Create design pattern library (tracking)
Create design pattern library (tracking)
Status: ASSIGNED
Product: Wikimedia
Classification: Unclassified
General/Unknown (Other open bugs)
wmf-deployment
All All
: High enhancement (vote)
: ---
Assigned To: Jared Zimmerman (WMF)
: design
Depends on: 64221
Blocks:
  Show dependency treegraph
 
Reported: 2013-11-07 05:33 UTC by MZMcBride
Modified: 2014-04-22 03:08 UTC (History)
12 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments

Description MZMcBride 2013-11-07 05:33:14 UTC
This may be a duplicate bug, but it seems that what both the design team and Jon R. seem to want is a design pattern library. This would include high-level categorization of user interface elements (buttons, text inputs, tabs, etc.) and each example in a particular section would include sample PHP code, sample HTML code, and sample CSS (or LESS).
Comment 1 Steven Walling 2013-11-07 05:44:09 UTC
(In reply to comment #0)
> This may be a duplicate bug, but it seems that what both the design team and
> Jon R. seem to want is a design pattern library. This would include
> high-level
> categorization of user interface elements (buttons, text inputs, tabs, etc.)
> and each example in a particular section would include sample PHP code,
> sample
> HTML code, and sample CSS (or LESS).

Yep, that is basically the high level ask. This could perhaps be a tracking bug. 

There are already some semblances of this floating around, in mediawiki.ui, jquery.ui and other places. So it's mostly a lot of standardization work, not just creating new stuff to replace a vacuum. Hence [[mw:UX standardization]]
Comment 2 James Forrester 2014-04-02 16:53:20 UTC
Marking this as "ASSIGNED" as it's not great to say "Assigned to: Nobody - You can work on this!" when it's under development.
Comment 3 spage 2014-04-03 01:27:07 UTC
Update: we use KSS to generate a living style guide from MediaWiki's CSS and LESS files; see http://tools.wmflabs.org/styleguide/

We also use jsduck to generate documentation from MediaWiki's JavaScript that can include live example code; see e.g. 
https://doc.wikimedia.org/mediawiki-core/master/js/#!/api/mw.Message and click 'Live Preview'

We also have bits of HTML in docs/uidesign that are accessible in a simple MW configuration, e.g. https://wikitech.wikimedia.org/w/docs/uidesign/table-layout.html

All these have the limitation that the HTML isn't part of a MediaWiki page, so you can't see how it changes with skin, language, or Beta Features.
=> Someone could develop MediaWiki special page(s) that frame their HTML


For PHP code we have
* Sample code on mediawiki.org , e.g. https://www.mediawiki.org/wiki/HTMLForm#Example_usage
* Various samples in extensions/example

These do support skin/language/Beta Features,
=> Someone could package the samples relevant to design with a TOC.

https://doc.wikimedia.org could become a MediaWiki instance with these features pages enabled.
Comment 4 Matthew Flaschen 2014-04-22 03:08:03 UTC
This is partly completed as the Living Style Guide (https://git.wikimedia.org/tree/mediawiki%2Fcore.git/10c122ac5440782bda87a65a75db7efe7b28a415/docs%2Fkss).

The next step is to get it uploaded to doc.wikimedia.org automatically (bug 64221).

I'll make this bug a tracking bug.  I'm not sure if there's  anything else we want to get done before marking this fixed (e.g. maybe use jsduck Live Preview for any JS controls that are covered by the style guide)

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links