Last modified: 2014-10-28 20:35:47 UTC
1. The Post-Edit Feedback popup uses the Unicode × glyph with hover behavior. 2. Recent CentralNotice banners use an "X in a circle" icon with no hover behavior. 3. the Visual Editor Review and Save dialog uses a drawn X icon with different hover behavior. The differences make WMF wikis feel unpolished. Screenshots: 1. https://upload.wikimedia.org/wikipedia/commons/5/56/PEF-1-Cropped.png 2. https://upload.wikimedia.org/wikipedia/commons/3/37/CentralNotice_banner_2013-05-03.png 3. https://commons.wikimedia.org/wiki/File:VE_Submit_Feedback_dialog_2013-05-03.png Code: 1. Extension:PostEdit outputs an <a> tag containing the HTML entity × and styles it. 2. Extension:CentralNotice outputs an img tag showing :$wgNoticeCloseButton which defaults to https://upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png 3. The VE close box is styled with jquery.ui's .ui-dialog .ui-icon-closethick , which gives it the background https://bits.wikimedia.org/static-1.22wmf3/resources/jquery.ui/themes/vector/images/close.png
1. is a design from late 2012. 2. matches https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_Icon_Set#General edits in 2012 which says "Dismiss - an 'X' in a circle." 3. came from jquery.ui work in 2010.
4. The Universal Language Selector extension uses its own chunky X icon with no hover behavior. jquery.uls styles icon-close with background of https://bits.wikimedia.org/static-1.22wmf3/extensions/UniversalLanguageSelector/lib/jquery.uls/images/close.svg 5, 6. The Translate and VisualEditor extensions also have close.svg icons for CSS backgrounds, each slightly different.
Related URL: https://gerrit.wikimedia.org/r/62237 (Gerrit Change I0e1703057e45297d6728cb635c58183aa37103da)
There are also currently 2 close window images in core (besides jQuery UI): 1. https://bits.wikimedia.org/static-1.22wmf3/skins/common/images/closewindow.png 2. https://bits.wikimedia.org/static-1.22wmf3/skins/common/images/closewindow19x19.png I don't think #1 is used anywhere any more (but would be worth checking). I believe #2 is the same image as the one used in CentralNotice and similar to the Agora design. If we want developers to standardize on one close icon it needs to have the following properties: 1. Located in core (probably /skins/common/images/) 2. Works for any background (light, dark, grey, etc.) 3. Available in a large size and a small size 4. Conforms to design guidelines closewindow19x19.png is probably the best bet since it meets 3 of the 4 criteria. All we need to do is create a smaller version for use in small UI elements. Then we can start standardizing everything on that. We can override the jQuery UI close box in resources/jquery.ui/themes/default/.
I checked in a smaller version of the closewindow19x19.png image in change I0e170305.
7. Extension:GuidedTour uses a square [X] icon, no hover, for its .x_button style. <https://bits.wikimedia.org/static-1.22wmf3/extensions/GuidedTour/modules/externals/mediawiki.libs.guiders/mediawiki.libs.guiders.submodule/x_close_button.jpg>
(In reply to comment #4) > 1. Located in core (probably /skins/common/images/) In the past I've tried to use core image resources in CSS files together with @embed without success. I think that desperately needs fixing to go onward with the unification. > 3. Available in a large size and a small size I would consider having SVG version too a must.
8. Besides #2 (an 'X' in a circle), other fund-raising banners use the plain 7px 'x' image donate/Small-black-close.png for their close iocn, e.g. http://meta.wikimedia.org/w/index.php?title=Main_Page&banner=B13_0725_trn_Cntrl_nd_yyYY&force=1
As Jared added the "easy" keyword to this ticket: What is the prefered approach and expected implementation for a potential new code contributor? Which specific 'close' icon to use everywhere? What is the complete list of codebases which are affected? This ticket got a bit messy so I got lost. Summarizing is highly welcome.
(In reply to Andre Klapper from comment #9) > As Jared added the "easy" keyword to this ticket: What is the prefered > approach and expected implementation for a potential new code contributor? > Which specific 'close' icon to use everywhere? > What is the complete list of codebases which are affected? > > This ticket got a bit messy so I got lost. Summarizing is highly welcome. From what I understand, the current guidance is "never ever ever use an icon for workflow functionality", per user testing outcomes. This is why VE switched over to simple words instead ("Done"/"Cancel"/etc.)
James, there are still many many interfaces especially with smaller dialogs (language switching, fundraising banners, etc) which use icons for dismiss, this is true on mobile as well due to space constraints, I'd prefer to get consistency in these places then we can investigate in which interfaces we should expand beyond just an icon. But for places we're CURRENTLY using an icon, that icon should be consistent.
