Glyphs/Icons - Replacements, Additions and Naming research spike

[KrooshalUX]

I would like to investigate the following:

• How are EUI glyps/icons currently implemented
• What is required from the UX team for delivery of glyps/icons for new or replacements, and are there any differences in the process
• Is it a breaking change to introduce new glyphs/icons / and/or how does including new icons impact older versions, if at all
• Are there alternative implementation strategies we should consider
• Is it possible for a glyph or icon to have more than one name? For example, there is a venn diagram icon that is utilized across several interfaces, however it was originally designed for a function of KQL. While it is necessary for the KQL glyph to exist (separate topic - we will update that to DQL) it is especially difficult to recall that its KQL and not also vennDiagram. Another example is arrowDown - depending on your design background, this might be a down arrow, a caret, or logical or. Duplicating the glyphs or figuring out a way to have multiple names would increase efficiency.
• Is it possible to identify all instances of a given glyph or icon within the code?
• Is there any low/no-risk way for UX team to replace icons in the application without dependencies on eng or as part of a dot release

[kaddy645]

I just found this useful doc! & Here are few things I have noticed.

• Both glyph and icons are implemented using svg's
• Yes, there is possibility of duplicate icons with diff names
• It is possible to identify all instances of a given glyph or icon within the code , finding duplicate icons would be little tricky (as we have to make sure each svg path is unique)
• Replacing icon can be breaking, as we would need to make sure all instances are working find in OSD. few checks can be
  Check against all themes for compatibility in both light and dark modes
  Check in mobile/tab view
  Check in other browsers like Firefox, Safari

[kgcreative]

@kaddy645 the doc link was broken for me, but I found the related wiki in the OUI repo: https://github.com/opensearch-project/oui/blob/main/wiki/creating-icons.md

[kaddy645]

@kaddy645 the doc link was broken for me, but I found the related wiki in the OUI repo: https://github.com/opensearch-project/oui/blob/main/wiki/creating-icons.md

Thanks! updated. by mistake I posted from my repo.

[bandinib-amzn]

Q. How are EUI glyps/icons currently implemented

Ans: Creating icons wiki has the information on how icons are currently implemented.

Q. What is required from the UX team for delivery of glyps/icons for new or replacements, and are there any differences in the process

Ans: We will need glpyhs/icon adhering to this guideline. If it new icon, then more information such as title, what action this icon represents etc. If it is replacement, then which icon needs to replaced.

There is difference in process for new and replacement. For new icons we need to follow additional steps.

Q. Is it a breaking change to introduce new glyphs/icons / and/or how does including new icons impact older versions, if at all

Ans: Yes. It can introduce breaking changes. We can prepare checklist to include in PR and ensure all the required checks has been passed before merging code.

Q. Are there alternative implementation strategies we should consider.

Ans: I think for now we can follow wiki. Going forward we can improve our process and wiki.

Q. Is it possible for a glyph or icon to have more than one name? For example, there is a venn diagram icon that is utilized across several interfaces, however it was originally designed for a function of KQL. While it is necessary for the KQL glyph to exist (separate topic - we will update that to DQL) it is especially difficult to recall that its KQL and not also vennDiagram. Another example is arrowDown - depending on your design background, this might be a down arrow, a caret, or logical or. Duplicating the glyphs or figuring out a way to have multiple names would increase efficiency.

Ans: It is possible for a glyph or icon to have more than one name. It is just we will have multiple versions of the same glyph.

Q. Is it possible to identify all instances of a given glyph or icon within the code?

Ans. Yes it is possible. It can be tricky sometime, but not impossible.

Q. Is there any low/no-risk way for UX team to replace icons in the application without dependencies on eng or as part of a dot release

Ans. Given we have proper checklist and good documentation, I would say why not.

[kavilla]

Moving to the backlog to focus on hosting the site

[KrooshalUX]

thanks @bandinib-amzn and @kaddy645 for all the useful information here. Closing as these answers complete the research spike.