Page MenuHomePhabricator
Create Task
Maniphest T326557

Design and use a new Success icon
Closed, ResolvedPublic
Actions

Assigned To
Volker_E
Authored By
bmartinezcalvo
Jan 9 2023, 2:09 PM
Tags
Referenced Files
F36555996: image.png
Jan 30 2023, 3:46 PM
F36555992: image.png
Jan 30 2023, 3:46 PM
F36555990: image.png
Jan 30 2023, 3:46 PM
F36555987: image.png
Jan 30 2023, 3:46 PM
F36122281: IconSuccess.svg
Jan 11 2023, 3:25 PM
F36122274: Captura de Pantalla 2023-01-11 a las 16.24.10.png
Jan 11 2023, 3:25 PM
F36122199: IconSuccess.svg
Jan 11 2023, 3:23 PM
F36076702: Captura de Pantalla 2023-01-09 a las 15.25.32.png
Jan 9 2023, 2:26 PM
View All 12 Files
Subscribers
Aklapper
AnneT
bmartinezcalvo
Catrope
• DAbad
Eazeeee
• JKieserman
View All 10 Subscribers

Description

Background & Goal

  • Description: the current success icon is not visible enough and is different from the rest of feedback (warning, error and notice) icons since it doesn't have a solid shape.
    Captura de Pantalla 2023-01-09 a las 14.59.54.png (874×1 px, 365 KB)
  • History: describe or link to prior discussions related to this icon
  • Considerations: list any known challenges or blockers, or any other important information
  • Known use case(s):
Captura de Pantalla 2023-01-09 a las 15.00.41.png (226×1 px, 77 KB)
Captura de Pantalla 2023-01-09 a las 15.01.08.png (208×530 px, 46 KB)
Message componentInfo Chip T323524

User stories

  • As a user I need success icon to be visible enough on any background and component.
  • As a user I need warning, error, success and notice icons to be visually similar.

Considerations (Optional)

  • We will create a new IconSuccess and we will keep IconCheck for other use cases.

Open questions (Optional)

Proposal

We will create a new success icon within a circle.

Captura de Pantalla 2023-01-09 a las 15.25.32.png (370×1 px, 159 KB)

Design spec

Design exploration file

SVG icon

IconSuccess.svg327 BDownload

Acceptance criteria for Done

Design

  • The design of the new icon is ready, and it follows our icon system guidelines
  • The new icon has been reviewed with help from the DST
  • An RTL icon has been created (not needed)
  • The icon is recognizable on low DPI resolutions
  • The icon has been exported as an optimized SVG and added to this task’s description
  • The new icon has been included in our Icon System Figma file, and the library has been published
  • The new icon has been replaced in Message component in the library

Code

  • Add icon in Codex
  • Use new icon in success message, blocked and inline
  • Add icon in OOUI
  • Use new icon in success message, blocked and inline

Documentation

NOTE: the current check icon in the success message will need to be replaced with this new success icon.

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Update OOUI to v0.47.3mediawiki/coremaster+433 -145
MessageWidget.php: Replace 'check' with 'success' iconoojs/uimaster+1 -1
Update Codex from v0.4.3 to v0.5.0mediawiki/coremaster+1 K -1 K
Update OOUI to v0.46.2mediawiki/coremaster+351 -90
Message: Replace 'check' with 'success' icon on success type messagesdesign/codexmain+7 -5
MessageWidget: Replace 'check' with 'success' iconoojs/uimaster+5 -2
icons: Add 'success' to the alerts icon packoojs/uimaster+13 -0
icons: Add 'success'design/codexmain+10 -0
Customize query in gerrit

Related Objects
Search...

Event Timeline

bmartinezcalvo created this task.Jan 9 2023, 2:09 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 9 2023, 2:09 PM
bmartinezcalvo updated the task description. (Show Details)Jan 9 2023, 2:26 PM
bmartinezcalvo mentioned this in T323524: Design and build InfoChip component (MVP).Jan 9 2023, 2:48 PM
Volker_E added a subscriber: • JKieserman.Jan 9 2023, 6:05 PM
ldelench_wmf triaged this task as High priority.Jan 9 2023, 6:05 PM
ldelench_wmf edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.
AnneT subscribed.Jan 9 2023, 6:06 PM
ldelench_wmf added a parent task: T323524: Design and build InfoChip component (MVP).Jan 9 2023, 6:07 PM
Volker_E updated the task description. (Show Details)Jan 10 2023, 12:41 AM
bmartinezcalvo claimed this task.Jan 11 2023, 3:15 PM
bmartinezcalvo moved this task from Committed to In Design on the Design-System-Team (Design-System-Sprint) board.
bmartinezcalvo updated the task description. (Show Details)Jan 11 2023, 3:23 PM
bmartinezcalvo moved this task from In Design to Ready for Development on the Design-System-Team (Design-System-Sprint) board.

@Volker_E I've designed the new success icon to be aligned with the rest of our feedback icons (warning, error and notice).

Captura de Pantalla 2023-01-11 a las 16.24.10.png (1×1 px, 349 KB)

You can check the Figma spec sheet and the SVG icon.

IconSuccess.svg327 BDownload

bmartinezcalvo reassigned this task from bmartinezcalvo to Volker_E.Jan 11 2023, 3:26 PM
bmartinezcalvo updated the task description. (Show Details)
gerritbot added a comment.Jan 12 2023, 6:51 AM

Change 879180 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] icons: Add 'success'

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

gerritbot added a project: Patch-For-Review.Jan 12 2023, 6:51 AM
gerritbot added a comment.Jan 12 2023, 3:52 PM

Change 879180 merged by jenkins-bot:

[design/codex@main] icons: Add 'success'

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

gerritbot added a comment.Jan 13 2023, 5:39 AM

Change 879697 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] icons: Add 'success'

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

gerritbot added a comment.Jan 13 2023, 4:12 PM

Change 879697 merged by jenkins-bot:

[oojs/ui@master] icons: Add 'success' to the alerts icon pack

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

Maintenance_bot removed a project: Patch-For-Review.Jan 13 2023, 4:31 PM
Volker_E renamed this task from Design a new Success icon to Design and use a new Success icon.Jan 13 2023, 10:40 PM
Volker_E changed the task status from Open to In Progress.
Volker_E moved this task from Ready for Development to In Development on the Design-System-Team (Design-System-Sprint) board.
gerritbot added a comment.Jan 14 2023, 4:32 AM

Change 879913 had a related patch set uploaded (by VolkerE; author: VolkerE):

[design/codex@main] Message: Replace 'check' with 'success' icon on success type messages

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

gerritbot added a project: Patch-For-Review.Jan 14 2023, 4:32 AM
gerritbot added a comment.Jan 15 2023, 4:45 AM

Change 879936 had a related patch set uploaded (by VolkerE; author: VolkerE):

[oojs/ui@master] MessageWidget: Replace 'check' with 'success' icon

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

gerritbot added a comment.Jan 16 2023, 7:16 PM

Change 879936 merged by jenkins-bot:

[oojs/ui@master] MessageWidget: Replace 'check' with 'success' icon

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

Volker_E reassigned this task from Volker_E to bmartinezcalvo.Jan 17 2023, 4:52 AM
Volker_E moved this task from In Development to Design Sign-Off on the Design-System-Team (Design-System-Sprint) board.
Volker_E updated the task description. (Show Details)Jan 17 2023, 5:37 AM
gerritbot added a comment.Jan 17 2023, 3:32 PM

Change 879913 merged by jenkins-bot:

[design/codex@main] Message: Replace 'check' with 'success' icon on success type messages

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

Maintenance_bot removed a project: Patch-For-Review.Jan 17 2023, 4:31 PM
gerritbot added a comment.Jan 17 2023, 7:12 PM

Change 880992 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] Update OOUI to v0.46.2

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

gerritbot added a project: Patch-For-Review.Jan 17 2023, 7:12 PM
gerritbot added a comment.Jan 17 2023, 7:48 PM

Change 880992 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.46.2

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

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.20; 2023-01-23).Jan 17 2023, 8:00 PM
bmartinezcalvo updated the task description. (Show Details)Jan 18 2023, 10:12 AM
bmartinezcalvo moved this task from Design Sign-Off to QTE Sign-off on the Design-System-Team (Design-System-Sprint) board.
Maintenance_bot removed a project: Patch-For-Review.Jan 18 2023, 10:31 AM
bmartinezcalvo removed bmartinezcalvo as the assignee of this task.Jan 18 2023, 10:59 AM
ldelench_wmf assigned this task to • Jrbranaa.Jan 23 2023, 5:58 PM
Eazeeee subscribed.Jan 30 2023, 3:46 PM

Hi @Jrbranaa

This implementation looks good in the following browsers on the Docs site: Chrome v109, Safari v16.2, Firefox v108.

image.png (490×1 px, 63 KB)
image.png (662×1 px, 173 KB)
image.png (458×1 px, 73 KB)
image.png (454×1 px, 73 KB)

I believe this can be signed off.

• Jrbranaa added a comment.Jan 30 2023, 9:34 PM

Thanks @Eazeeee. I concur.

• Jrbranaa reassigned this task from • Jrbranaa to • DAbad.Jan 30 2023, 9:35 PM
• Jrbranaa moved this task from QTE Sign-off to Product Sign-Off on the Design-System-Team (Design-System-Sprint) board.
• Jrbranaa subscribed.
gerritbot added a comment.Jan 31 2023, 11:42 PM

Change 869852 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

gerritbot added a project: Patch-For-Review.Jan 31 2023, 11:42 PM
gerritbot added a comment.Feb 1 2023, 2:16 AM

Change 885450 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

gerritbot added a comment.Feb 1 2023, 4:13 AM

Change 885450 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.4.3 to v0.5.0

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

Catrope subscribed.Feb 1 2023, 5:07 PM

This task is now almost done, all that remains is updating T141801: WikimediaUI theme (Codex/OOUI) icon inventory (tracking)

Volker_E closed this task as Resolved.Feb 2 2023, 12:13 AM
Volker_E claimed this task.
Volker_E removed a project: Patch-For-Review.
Volker_E updated the task description. (Show Details)
Volker_E added a subscriber: • DAbad.

Last bit done.

Daimona mentioned this in T338832: type=success MessageWidget uses a different icon in PHP than in JS.Jun 12 2023, 5:51 PM
gerritbot added a comment.Jun 20 2023, 1:36 PM

Change 931616 had a related patch set uploaded (by Daimona Eaytoy; author: Daimona Eaytoy):

[oojs/ui@master] MessageWidget.php: Replace 'check' with 'success' icon

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

gerritbot added a project: Patch-For-Review.Jun 20 2023, 1:36 PM
gerritbot added a comment.Jun 20 2023, 1:46 PM

Change 931616 merged by jenkins-bot:

[oojs/ui@master] MessageWidget.php: Replace 'check' with 'success' icon

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

gerritbot added a comment.Jul 5 2023, 6:21 PM

Change 935793 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update OOUI to v0.47.2

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

gerritbot added a comment.Jul 6 2023, 8:20 PM

Change 935793 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.47.3

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

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 · Credits