Page MenuHomePhabricator
Create Task
Maniphest T339839

Add QR icon in Codex and OOUI
Closed, ResolvedPublic2 Estimated Story Points
Actions

Assigned To
MusikAnimal
Authored By
bmartinezcalvo
Jun 19 2023, 8:59 AM
Tags
Referenced Files
F37109352: QR-icon.svg
Jun 19 2023, 11:35 AM
F37109351: QR-icon.svg
Jun 19 2023, 11:33 AM
F37109348: Captura de pantalla 2023-06-19 a las 13.32.14.png
Jun 19 2023, 11:33 AM
F37109346: Captura de pantalla 2023-06-19 a las 13.31.12.png
Jun 19 2023, 11:33 AM
F37109177: Captura de pantalla 2023-06-19 a las 10.57.43.png
Jun 19 2023, 8:59 AM
Subscribers
Aklapper
bmartinezcalvo
Catrope
JSengupta-WMF
MusikAnimal

Description

Background & Goal

In T242467 we are implementing the QR code generator and we need to add this icon in our system in order to use it in this project.

Captura de pantalla 2023-06-19 a las 13.31.12.png (916×1 px, 155 KB)

User stories

  • As a user I need to use the QR code icon.

Considerations (Optional)

Open questions (Optional)

  • RTL version is needed? - It's not necessary to mirror a QR code in RTL

Proposal

Captura de pantalla 2023-06-19 a las 13.32.14.png (698×664 px, 20 KB)

Design spec

Figma exploration file

SVG icon

QR-icon.svg353 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 (if needed) - Not needed in this case
  • 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 library, and the library has been published

Code

  • Add icon in Codex
  • Add icon in OOUI

Documentation

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Update OOUI to v0.47.3mediawiki/coremaster+433 -145
extension.json: add qrCode icon to overflow.iconsmediawiki/skins/MinervaNeuemaster+1 -0
Update Codex from v0.13.0 to v0.14.0mediawiki/coremaster+526 -522
Icons: add QR code icondesign/codexmain+10 -0
icons: Add 'qrCode' icon to 'content' packoojs/uimaster+13 -0
Customize query in gerrit

Related Objects

Event Timeline

bmartinezcalvo created this task.Jun 19 2023, 8:59 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 19 2023, 8:59 AM
bmartinezcalvo updated the task description. (Show Details)Jun 19 2023, 11:33 AM
bmartinezcalvo added a comment.EditedJun 19 2023, 11:35 AM

@MusikAnimal I've exported the SVG icon and included it in the task, so it's ready to be added in Codex and OOUI.

QR-icon.svg353 BDownload

One question, is the QR code something that will be mirrored when RTL? If yes, we will need the RTL version of the icon.

CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.Jun 20 2023, 3:17 PM
MusikAnimal claimed this task.Jun 20 2023, 5:23 PM
MusikAnimal added a project: Community-Tech (CommTech-Kanban).
In T339839#8946337, @bmartinezcalvo wrote:

One question, is the QR code something that will be mirrored when RTL? If yes, we will need the RTL version of the icon.

As far as I know, there's no technical requirement for QR codes to be mirrored for RTL users; a scanner will scan it even if it's upside down etc. But from a design point of view, you may or may not it flipped, where the usual three squares are in the bottom/top left and top right, then the rest the encoding bits. So I think it's a design call. Personally if I see it flipped, I still see a QR code, so I don't personally think an RTL version is necessary.

MusikAnimal moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Kanban) board.Jun 20 2023, 5:23 PM
gerritbot added a comment.Jun 20 2023, 6:06 PM

Change 931671 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[design/codex@main] Icons: add QR code icon

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

gerritbot added a project: Patch-For-Review.Jun 20 2023, 6:06 PM
gerritbot added a comment.Jun 20 2023, 8:03 PM

Change 931686 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[oojs/ui@master] icons: Add 'qrCode' icon to 'content' pack

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

MusikAnimal moved this task from In Development 💻 to Review/Feedback 💬 on the Community-Tech (CommTech-Kanban) board.Jun 20 2023, 8:03 PM
MusikAnimal set the point value for this task to 2.Jun 20 2023, 8:19 PM
MusikAnimal added a comment.Jun 20 2023, 8:24 PM

FYI, changes I made to the icon due to the codex test failures:

  • Color is now black, not #202122, thus removed the fill attribute
  • Removed clip-rule="evenodd", though kept fill-rule:"evenodd" as that seemed necessary (?)
  • Add a <title>QR code</title>

To me, everything looks the same as the SVG in the task description, except it being black instead of dark gray.

Catrope updated the task description. (Show Details)Jun 20 2023, 8:24 PM
Catrope subscribed.Jun 20 2023, 8:27 PM

Thank you @MusikAnimal! The icon being black instead of dark gray is intended. In practice, it's going to be displayed as dark gray in most contexts, but in order to be able to set the color depending on the context (for example, when used in a button the icon might need to be blue, or red, or white against a blue/red/gray background) we need to not have hard-coded colors in the SVG file.

gerritbot added a comment.Jun 20 2023, 8:33 PM

Change 931671 merged by jenkins-bot:

[design/codex@main] Icons: add QR code icon

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

gerritbot added a comment.Jun 20 2023, 8:33 PM

Change 931686 merged by jenkins-bot:

[oojs/ui@master] icons: Add 'qrCode' icon to 'content' pack

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

Maintenance_bot removed a project: Patch-For-Review.Jun 20 2023, 9:10 PM
bmartinezcalvo updated the task description. (Show Details)Jun 21 2023, 10:05 AM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)Jun 21 2023, 10:09 AM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo updated the task description. (Show Details)Jun 21 2023, 10:19 AM
bmartinezcalvo updated the task description. (Show Details)
MusikAnimal moved this task from Review/Feedback 💬 to Done 🏁 on the Community-Tech (CommTech-Kanban) board.Jun 21 2023, 6:13 PM
gerritbot added a comment.Jul 5 2023, 6:20 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 project: Patch-For-Review.Jul 5 2023, 6:20 PM
gerritbot added a comment.Jul 5 2023, 6:37 PM

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

[mediawiki/core@master] Update Codex from v0.13.0 to v0.14.0

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

PatchDemoBot added a comment.Jul 5 2023, 7:11 PM

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/64dc3126c0/w

gerritbot added a comment.Jul 5 2023, 7:32 PM

Change 935794 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.13.0 to v0.14.0

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

gerritbot added a comment.Jul 6 2023, 5:30 AM

Change 935833 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/skins/MinervaNeue@master] extension.json: add qrCode icon to overflow.icons

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

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

Catrope closed this task as Resolved.Jul 6 2023, 8:22 PM
ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.17; 2023-07-11).Jul 6 2023, 9:00 PM
gerritbot added a comment.Jul 7 2023, 7:02 PM

Change 935833 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] extension.json: add qrCode icon to overflow.icons

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

Maintenance_bot removed a project: Patch-For-Review.Jul 7 2023, 7:10 PM
PatchDemoBot added a comment.Aug 16 2023, 6:45 PM

Test wiki on Patch demo by ATomasevich (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/64dc3126c0/w/

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