Page MenuHomePhabricator

Iconography specification page layout
Closed, InvalidPublic

Event Timeline

violetto assigned this task to werdna.
violetto raised the priority of this task from to Needs Triage.
violetto updated the task description. (Show Details)
violetto changed Security from none to None.
violetto subscribed.

I love the mock.

In the style guide the .svg filename for each icon is not particularly important if developers will be using OOjs UI.The information the style guide needs to convey for for each icon is:

  • a visual description ("closed eyelid")
  • the intended semantics ("hide action, or hidden state")
  • the icon's name in OOjs UI, code point in WikiFont, whether it's an emblem/badge, etc.

Without describing semantics this page is just a picture book that doesn't tell people when to use what icon. I created a blocking task T89200 for storing this information.

Will this LSG page use the ResourceLoaderImageModule? It could demonstrate the rasterized .png fallback.

The OOjs UI demos > Icons page (currently on https://tools.wmflabs.org/oojs-ui/oojs-ui/demos/#icons-mediawiki-vector-ltr ) has a similar page of all the icons (and indicators) in its MediaWiki theme. It doesn't show the progressive/constructive/destructive intention colors nor does it explain their usage.

A screenshot:

2015-03-12_OOjs_UI_demos_Icons.png (981×802 px, 67 KB)

Change 199221 had a related patch set uploaded (by Werdna):
[WIP] Add <ooui-icons/> tag for iconography LSG page

https://gerrit.wikimedia.org/r/199221

Okay, I have a patch for this. Quite a lot of caveats:

  1. There is currently no style for a selected frameless ButtonOption in a ButtonSelect in OOUI. So I had to add a frame around the view switch icons.
  2. This is currently just pulling data from MediaWiki.org. That should change in the future.
  3. The data source itself has its own problems, documented on T89200. Among these problems: many icons missing, most uncategorised, none have correct unicode codepoints.
  4. OOUI currently shows icons as SVGs, not using WikiFont. This means that it's not possible to show them in different colours.
  5. Search doesn't work, but it's not planned to yet.
  6. I don't have assets for the view switch icons, so I just used something that looked vaguely close. Those will need to be replaced first.

Wahoo!... but I couldn't figure out how to do it locally. I'll wait for the updated Icons, Indicators, and Labels on l-s-g labs.

  1. This is currently just pulling data from MediaWiki.org. That should change in the future.

You mean https://www.mediawiki.org/wiki/Data:Json:Wikicon ? Jon Robson's proposal was to keep the icon info in a separate repo that could be a submodule of OOUIPlayground, mobile's WikiFont generation, the OOjs UI build process, etc.

  1. The data source itself has its own problems, documented on T89200.

I responded there. May's spreadsheet has more info than the .json file, but I based the.json on what OOjs UI actually has. There ought to be one authoritative file...

  1. OOUI currently shows icons as SVGs, not using WikiFont. This means that it's not possible to show them in different colours.

? The oojs-ui grunt build step colorizeSvg somehow crafts colored icon variants, e.g. check-constructive.svg, and then svg2png creates e.g. check-constructive.png. oojs-ui's own icon spec file themes/mediawiki/images.json drives this with lines like

"check": { "file": "check.svg", "variants": [ "constructive", "progressive" ] }

Hope this helps, James Forrester and matmarex actually understand it.

Okay, this is more or less done now.

Code, Live demo.

The remaining issues are basically to do with the data itself. Will need to update the data to a canonical representation.

This looks great!!!

Questions for @werdna or @Spage, is the label to each section of icons going to stay that way? Can we remove the icons- prefix and the semicolon after every label?

I think the labelling is totally wrong right now. I just don't have any information about grouping other than which OOjs-UI icon pack they are in, so I just used that for now.

Volker_E lowered the priority of this task from High to Low.Mar 23 2018, 9:11 PM
Volker_E moved this task from v1.1 (Goal) to Backlog on the Wikimedia Design Style Guide board.
Volker_E subscribed.

The current setup is to have the Design Style Guide's icons page layout the icon principals and to continue the OOUI demos portion as in-production realisation of the icons together with certain components which will feature a distinct icon, like for example the SearchInputWidget.
Given the original task description requests partly fulfilled, partly outdated the current situation, setting this task to “invalid”.