Page MenuHomePhabricator
Create Task
Maniphest T50067

Inconsistent close icon "x" in Wikimedia product interfaces
Closed, ResolvedPublic
Actions

Assigned To
Volker_E
Authored By
• Spage
May 4 2013, 3:37 AM
Tags
Referenced Files
F26525761: image.png
Oct 11 2018, 4:42 PM
F26525706: image.png
Oct 11 2018, 4:42 PM
F10595012: image.png
Nov 3 2017, 10:54 PM
F10319955: image.png
Oct 19 2017, 8:21 PM
F10318266: T178607 Page previews _before - Wikipédia, a szabad enciklopédia - (Private Browsing) 2017-10-19.png
Oct 19 2017, 7:35 PM
F10188673: T50067 close icon GuidedTour _post - Foobar - Wikipedia 2017-10-12.png
Oct 13 2017, 7:45 PM
F10172642: T50067 close icon GuidedTour - Foobar - Wikipedia 2017-10-12.png
Oct 13 2017, 4:30 AM
F7451633: pasted_file
Sep 9 2017, 3:41 AM
View All 17 Files
Subscribers
Aklapper
AndyRussG
Galorefitz
gerritbot
Jdforrester-WMF
McIntireEvan
• MZMcBride
View All 13 Subscribers

Description

The close icon as defined by the WikimediaUI icon principles. OOUI is already featuring the correct icon.

ProductDescriptionCodeScreenshotScreenshot after
OOUIUses the correct icon
T50067 Inconsistent close icons - consistent OOjs UI icon 2017-09-07.png (228×666 px, 29 KB)
Post-Edit Feedback popupUses the Unicode × glyph with hover behaviorExtension:PostEdit outputs CSS generated content × with style rules.
pasted_file (84×264 px, 8 KB)
image.png (75×250 px, 7 KB)
Recent CentralNotice banners"x in a circle" icon, no :hover behaviorExtension:CentralNotice outputs an img tag showing :$wgNoticeCloseButton which defaults to CloseWindow19x19.png
image.png (111×905 px, 48 KB)
-Visual Editor Feedback dialogAs of 2017-09 not an issue any more => converted to OOUI
image.png (720×1 px, 92 KB)
ULSThicker stroke “x” SVG, no :hover behaviorExtension:UniversalLanguageSelector custom .uls-icon-close class
T174237 ULS settings _before - Wikipedia 2017-09-06.png (391×935 px, 89 KB)
image.png (648×1 px, 112 KB)
Extension:GuidedTourdifferent icon with different size.guider_close
Extension:MultimediaViewerbolder, less contrast; Exempt from amending is the main close icon as it would need a full icon redesign. Will be revisited after T177432
image.png (598×1 px, 166 KB)
Extension:GettingStarteddifferent icon with different size and lighter grey.mw-gettingstarted-cta-close
T50067 close icon GuidedTour - Foobar - Wikipedia 2017-10-12.png (424×1 px, 58 KB)
T50067 close icon GuidedTour _post - Foobar - Wikipedia 2017-10-12.png (402×1 px, 57 KB)
Extension:PagePreviewsdifferent icon, bolder and bigger
T178607 Page previews _before - Wikipédia, a szabad enciklopédia - (Private Browsing) 2017-10-19.png (242×453 px, 18 KB)
image.png (216×431 px, 20 KB)
Extension:TranslateSimilar to ULS, different icon though, as it's minimally smaller in layout.grid .tux-message-editor .close
image.png (280×1 px, 75 KB)

The differences make WMF wikis feel unpolished.

Original report:
Version: 1.22.0

Details

Reference
bz48067
SubjectRepoBranchLines +/-
Remove special color treatment of close icon on confirmationmediawiki/extensions/MultimediaViewermaster+6 -12
Use consistent close iconmediawiki/extensions/CentralNoticemaster+4 -4
Use standard close iconmediawiki/extensions/Popupsmaster+17 -4
Use standard close iconmediawiki/extensions/GettingStartedmaster+32 -13
Use standard close iconmediawiki/extensions/GuidedTourmaster+21 -11
postEdit: Use standard close iconmediawiki/coremaster+25 -21
Use standard close iconmediawiki/extensions/Translatemaster+11 -47
Use consistent close iconmediawiki/extensions/UniversalLanguageSelectormaster+9 -6
Customize query in gerrit

Related Objects
Search...

Event Timeline

• bzimport raised the priority of this task from to Low.Nov 22 2014, 1:37 AM
• bzimport added projects: MediaWiki-User-Interface, Design, good first task.
• bzimport set Reference to bz48067.
• bzimport added a subscriber: Unknown Object (MLST).
• Spage created this task.May 4 2013, 3:37 AM
• Spage added a comment.May 4 2013, 3:53 AM
  1. is a design from late 2012.
  1. matches https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_Icon_Set#General edits in 2012 which says "Dismiss - an 'X' in a circle."
  1. came from jquery.ui work in 2010.
• Spage added a comment.May 4 2013, 4:27 AM
  1. 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.

gerritbot added a comment.May 4 2013, 6:48 PM

Related URL: https://gerrit.wikimedia.org/r/62237 (Gerrit Change I0e1703057e45297d6728cb635c58183aa37103da)

kaldari added a comment.May 4 2013, 6:50 PM

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
  1. 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/.

kaldari added a comment.May 4 2013, 6:51 PM

I checked in a smaller version of the closewindow19x19.png image in change I0e170305.

• Spage added a comment.May 10 2013, 11:17 PM
  1. 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
Nikerabbit added a comment.Jul 3 2013, 11:17 AM

(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.

  1. Available in a large size and a small size

I would consider having SVG version too a must.

• Spage added a comment.Aug 12 2013, 10:36 PM
  1. 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
Aklapper added a comment.Oct 26 2014, 5:25 PM

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.

Jdforrester-WMF added a comment.Oct 27 2014, 8:21 PM

(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.)

• Jaredzimmerman-WMF added a comment.Oct 27 2014, 8:24 PM

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.

Pcoombe subscribed.Jan 31 2015, 1:23 PM
Galorefitz added subscribers: Aklapper, Galorefitz.May 14 2015, 8:50 PM

I am new here and was wondering if I could contribute to resolving this ticket.

I went through the conversation and had a few doubts:

  1. Are we to switch from icons to glyphs, everywhere? Or just make the icons consistent, for now?
  2. Already pointed out, but not answered,
In T50067#526717, @Aklapper wrote:

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?

Aklapper added a comment.Jun 30 2015, 2:24 PM

@Galorefitz: Sorry that nobody has replied yet. I've also brought up your question on the mailing list now: https://lists.wikimedia.org/pipermail/design/2015-June/002325.html

• violetto subscribed.Jun 30 2015, 4:35 PM

uniE050 - closeInput.svg586 BDownload

This icon is used for all of these instances mentioned above:

https://upload.wikimedia.org/wikipedia/commons/5/56/PEF-1-Cropped.png
https://upload.wikimedia.org/wikipedia/commons/3/37/CentralNotice_banner_2013-05-03.png
https://upload.wikimedia.org/wikipedia/commons/3/37/CentralNotice_banner_2013-05-03.png

uniE051 - cross.svg603 BDownload

Screenshot 2015-06-30 09.31.30.png (105×576 px, 10 KB)

This icon is used specifically to clear input fields.

I hope this helps. Let me know if I'm not answering any other questions mentioned. I'll provide info around specs soon.

TheDJ added a project: UI-Standardization.Dec 21 2015, 5:07 PM
TheDJ set Security to None.
UltimateSupreme subscribed.Feb 25 2016, 1:41 PM
Danny_B moved this task from Unsorted to Icons standardization on the UI-Standardization board.May 6 2016, 8:10 PM
Restricted Application added a subscriber: TerraCodes. · View Herald TranscriptMay 6 2016, 8:10 PM
McIntireEvan subscribed.Nov 30 2016, 10:51 PM

Just to give an update

https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_icon_set gives a list of places the old icon is used, probably based off of this report, but the page has not been updated for 2 years, so it is likely out of date.

https://doc.wikimedia.org/oojs-ui/master/demos/#icons-apex-ltr gives what I believe to be the most recent icons (using apex). Based on the attached screenshot, that is indeed what Wikipedia uses in the edit feedback

chrome_2016-11-30_17-42-40.png (344×948 px, 29 KB)

If someone could investigate other places and help to figure out to what extent this is still an issue, that'd be great

Volker_E mentioned this in T175295: Fix layout issues on ULS (in Vector) to be closer aligned to WikimediaUI Style Guide.Sep 7 2017, 6:04 PM
Volker_E removed a project: good first task.Sep 7 2017, 6:31 PM
Volker_E updated the task description. (Show Details)
Volker_E edited subscribers, added: RHo; removed: • violetto, • Jaredzimmerman-WMF, • wikibugs-l-list.
gerritbot subscribed.Sep 7 2017, 11:55 PM

Change 376648 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/UniversalLanguageSelector@master] Use consistent close icon

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

gerritbot added a project: Patch-For-Review.Sep 7 2017, 11:55 PM
gerritbot added a comment.Sep 8 2017, 7:55 AM

Change 376648 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Use consistent close icon

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

gerritbot added a comment.Sep 8 2017, 10:51 PM

Change 376851 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/CentralNotice@master] Use consistent close icon

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

Volker_E updated the task description. (Show Details)Sep 9 2017, 12:36 AM
Volker_E updated the task description. (Show Details)Sep 9 2017, 2:08 AM
gerritbot added a comment.Sep 9 2017, 2:21 AM

Change 376869 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Translate@master] Use standard close icon

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

Volker_E renamed this task from inconsistent close icon "X" in MediaWiki interfaces to Inconsistent close icon "x" in MediaWiki interfaces.Sep 9 2017, 3:41 AM
Volker_E updated the task description. (Show Details)
gerritbot added a comment.Sep 9 2017, 5:54 AM

Change 376873 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] postEdit: Use standard close icon

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

gerritbot added a comment.Sep 9 2017, 2:18 PM

Change 376869 merged by jenkins-bot:
[mediawiki/extensions/Translate@master] Use standard close icon

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

Volker_E updated the task description. (Show Details)Sep 9 2017, 5:51 PM
Volker_E updated the task description. (Show Details)
gerritbot added a comment.Sep 12 2017, 10:14 PM

Change 376873 merged by jenkins-bot:
[mediawiki/core@master] postEdit: Use standard close icon

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

Jdforrester-WMF updated the task description. (Show Details)Sep 12 2017, 10:15 PM
kaldari unsubscribed.Sep 13 2017, 12:12 AM
AndyRussG subscribed.Sep 28 2017, 5:11 PM
Volker_E subscribed.Oct 12 2017, 10:22 PM

Possible regression: T178111: [1.31.0-wmf.3 - regression ] Guided tour- "guider_close" displayed as a triangle

Volker_E updated the task description. (Show Details)Oct 12 2017, 10:34 PM
Volker_E updated the task description. (Show Details)Oct 13 2017, 4:30 AM
gerritbot added a comment.Oct 13 2017, 7:36 PM

Change 384094 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/GettingStarted@master] Use standard close icon

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

Volker_E updated the task description. (Show Details)Oct 13 2017, 7:45 PM
gerritbot added a comment.Oct 14 2017, 12:09 AM

Change 384191 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/GuidedTour@master] Use standard close icon

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

gerritbot added a comment.Oct 14 2017, 12:30 AM

Change 384191 merged by jenkins-bot:
[mediawiki/extensions/GuidedTour@master] Use standard close icon

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

Jdforrester-WMF updated the task description. (Show Details)Oct 14 2017, 12:49 AM
gerritbot added a comment.Oct 14 2017, 12:50 AM

Change 384094 merged by jenkins-bot:
[mediawiki/extensions/GettingStarted@master] Use standard close icon

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

ReleaseTaggerBot added a project: MW-1.31-release-notes (WMF-deploy-2017-10-17 (1.31.0-wmf.4)).Oct 14 2017, 1:00 AM
Pcoombe unsubscribed.Oct 14 2017, 1:16 PM
Volker_E updated the task description. (Show Details)Oct 19 2017, 7:35 PM
Volker_E updated the task description. (Show Details)Oct 19 2017, 7:41 PM
Volker_E updated the task description. (Show Details)Oct 19 2017, 8:07 PM
gerritbot added a comment.Oct 19 2017, 8:21 PM

Change 385250 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Popups@master] Use standard close icon

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

Volker_E updated the task description. (Show Details)Oct 19 2017, 8:21 PM
gerritbot added a comment.Nov 1 2017, 5:02 PM

Change 385250 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Use standard close icon

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

ReleaseTaggerBot edited projects, added MW-1.31-release-notes (WMF-deploy-2017-11-07 (1.31.0-wmf.7)); removed MW-1.31-release-notes (WMF-deploy-2017-10-17 (1.31.0-wmf.4)).Nov 1 2017, 6:00 PM
Volker_E updated the task description. (Show Details)Nov 2 2017, 3:02 AM
Volker_E added a project: UI-Standardization-Kanban.Nov 3 2017, 1:35 AM
Volker_E updated the task description. (Show Details)Nov 3 2017, 10:54 PM
Volker_E updated the task description. (Show Details)Nov 6 2017, 6:47 PM
gerritbot added a comment.Nov 6 2017, 7:18 PM

Change 389542 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/MultimediaViewer@master] Remove special color treatment of close icon on confirmation

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

Nikerabbit updated the task description. (Show Details)Nov 7 2017, 7:37 AM
gerritbot added a comment.Nov 30 2017, 5:01 PM

Change 394076 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/core@master] mw.postEdit: Use mw.notify to display message

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

gerritbot added a comment.Jan 30 2018, 12:22 AM

Change 376851 merged by jenkins-bot:
[mediawiki/extensions/CentralNotice@master] Use consistent close icon

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

Volker_E renamed this task from Inconsistent close icon "x" in MediaWiki interfaces to Inconsistent close icon "x" in Wikimedia product interfaces.Jan 30 2018, 1:36 AM
Volker_E closed this task as Resolved.
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)
Volker_E mentioned this in T185978: Inconsistent close icon “x” in some remaining CentralNotice banners.Jan 30 2018, 3:31 AM
Volker_E added a comment.Jan 30 2018, 6:41 PM

OH from @RHo: “We can finally close the close icon”

gerritbot added a comment.Feb 6 2018, 7:54 PM

Change 389542 merged by jenkins-bot:
[mediawiki/extensions/MultimediaViewer@master] Remove special color treatment of close icon on confirmation

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

ReleaseTaggerBot edited projects, added MW-1.31-release-notes (WMF-deploy-2018-02-13 (1.31.0-wmf.21)); removed MW-1.31-release-notes (WMF-deploy-2017-11-07 (1.31.0-wmf.7)).Feb 6 2018, 8:00 PM
Esanders updated the task description. (Show Details)Oct 11 2018, 4:42 PM
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