Since the we have a thicker stroke width now we might want to consider using some gray instead of the black when the icon is being used for the help popup.

In T311382#8028163, @Prtksxna wrote:

Since the we have a thicker stroke width now we might want to consider using some gray instead of the black when the icon is being used for the help popup.

@Prtksxna you could use one of the following color tokens for the info icon:

• color-base #202122: this is the color used for default text and icons.
• color-subtle #54595D: you can use this color token if you want the icon to be more subtle.

Thanks @bmartinezcalvo. I've updated the new usage examples to use these colors.

This usage example is probably basically-the-same as what you have currently as "IP Info (Help)", but VisualEditor's dialogs make fairly extensive use of the help-popup mode:

I figure it's worth mentioning because it has different alignments to the existing example.

Thanks @DLynch! More usage examples are always helpful and welcome

Sharing here for common visibility:

• One concern – several years back when discussing this icon last time – resulted in using a serif "i" over sans-serif was the simpler recognition at the info icon's size specifically on non-retina displays.
• Another one, that @bmartinezcalvo might be better able to talk to, is that Spanish also features the inverted exclamation mark "¡".

That said, the environment might have changed with the rise of HiDPI displays and maybe bigger commonality/universality of the icon, similar to the hamburger menu. Current Firefox info icon in comparison:
{F35313782}

In T311382#8068464, @Volker_E wrote:

Sharing here for common visibility:

• One concern – several years back when discussing this icon last time – resulted in using a serif "i" over sans-serif was the simpler recognition at the info icon's size specifically on non-retina displays.
• Another one, that @bmartinezcalvo might be better able to talk to, is that Spanish also features the inverted exclamation mark "¡".

@Volker_E it's true the serif one was the most recognizable icon for the info concept in the past, but I from some years to now the sans-serif info icon is as recognizable as the old one, since it's the simplified version of the old info icon with serif font.

Some reasons to use the sans-serif icon instead the serif one:

• The simplified shapes of the sans-serif icon helps with the readability of the icon (I think that the robust shapes and the excess of detail in the serif icon doesn't help the icon to be better understood).
• Its simple shapes make it integrate much better next to Regular texts or other form elements since the sans-serif icon doesn't weigh as much as the serif one.

• Although the "i" could remind the "¡" (exclamation symbol in Spanish language) we don't usually associate this symbol with an exclamation since we usually use the "!" one (with the point down) for exclamation/warning/dangerous symbols, being the "i" one (with the point up) usually used for info icons.

Alright, let's give the (lo-DPI optimized) sans-serif icon a shot then. Waiting for an SVG file or source to start the library updates @Prtksxna.

In T311382#8068464, @Volker_E wrote:

• One concern – several years back when discussing this icon last time – resulted in using a serif "i" over sans-serif was the simpler recognition at the info icon's size specifically on non-retina displays.

That is fair! We discussed this during design review too. To add to what Bárbara said, I had made serif variations too that you can see on Figma, and in the new size and stroke requirement it looks a bit too blocky and bold. Other variations have sub-pixel issues.

Definitely an important point for the long-run (if we decide to continue using Latin alphabets in our icon system).

{F35313782}

I'm unable to see this file, could you check the visibility permissions on it?

In T311382#8071917, @Volker_E wrote:

Alright, let's give the (lo-DPI optimized) sans-serif icon a shot then. Waiting for an SVG file or source to start the library updates @Prtksxna.

Hey @Volker_E! Since this icon is used as the help popup, we'd need to make sure that it fits well with that use case. I've added some screenshots based on @bmartinezcalvo's color recommendations here T280677: Revise and extend the info / help tooltip pop-up in our design component library. Could you please take a look at that too?

I've added the the SVG file in the description of the task. And here is the link to the correct Figma artboard.

@Volker_E can you check if its correctly formatted? Is there a particular way I should save this file?
@bmartinezcalvo Do we update this in Figma after its been added to OOUI? Is there anything else you'd need for that?

In T311382#8130215, @Prtksxna wrote:

I've added the the SVG file in the description of the task. And here is the link to the correct Figma artboard.

@Volker_E can you check if its correctly formatted? Is there a particular way I should save this file?
@bmartinezcalvo Do we update this in Figma after its been added to OOUI? Is there anything else you'd need for that?

@Prtksxna I've reviewed the icon and it's all right about the pixels, the only thing I've updated in Figma is the Union selection (you need to group all icon shapes in one single shape), we need to apply this Union selection and name it "Union" so all icons have the same name in Figma since Figma is so sensible with the names of the frames and items).

What we need to do now is replacing the current info icon in our icon system Figma fila with this new icon you created. As this current info icon is being used as instances in many designs (it's being used 841 different instances) if you simply replace the shape inside the icon box with the new icon, the overrides applied in any of these instance could be removed (review what will happen with the overrides applied in instances in the video bellow).

So, to avoid breaking the main component that is being used as instances in many designs with different color styles applied, we need to be careful updating the main component containing the info icon and the best solution for this (the solution I currently know) is to use the Master plugin that helps you to replace and update main components without breaking them. I've create it this time using the Master plugin, you can review it in this branch. When the icon has been added in OOUI and Codex, we can merge it with the main library and the new icon will be visible in all instances where it was being used.

@Prtksxna by the way, I've updated the SVG with the info icon in the task because it needed to be exported with all shapes united (with the Union selection added).

Thanks Bárbara! I've reviewed the branch now. I'm not sure I completely understand what the Master plugin is going to do at this point. If there is anything else that I need to do to move this forward we might need to setup a pairing session for me to learn.

In T311382#8136825, @bmartinezcalvo wrote:

@Prtksxna by the way, I've updated the SVG with the info icon in the task because it needed to be exported with all shapes united (with the Union selection added).

Great! I noticed that you've removed the title and the xml tags, is that ok to put in OOUI? @Volker_E, let me know if I should add those back in (like in F35393432).

@Prtksxna the Figma branch with the new Info icon have been merged with the main Icon System file so you can now find the new Info icon there.

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

[design/codex@main] icons: Update 'info' icon to newest design

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

Application in Codex:

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

[oojs/ui@master] icons: Update 'info' icon to newest design

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

Change 823682 merged by jenkins-bot:

[design/codex@main] icons: Update 'info' icon to newest design

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

Change 823725 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.1.0-alpha.9 to v0.1.0-alpha.10

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

Change 823725 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.1.0-alpha.9 to v0.1.0-alpha.10

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

Change 823685 merged by jenkins-bot:

[oojs/ui@master] icons: Update 'info' icon to newest design

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

@Volker_E as the icon was already updated in both OOUI and Codex, can you confirm me that we could solve this task?

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

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

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

Change 824279 merged by jenkins-bot:

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

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