[IDL] Iconography > App icons > Gallery

[DianaStanciulescu]

Create a new Gallery tab in the App icons page:

from Peter Garvin: master here: https://github.ibm.com/brand/App-icons/raw/master/App_Icon_Master.ai all icons SVG and uploaded to the repo here: https://github.ibm.com/brand/App-icons/tree/master/svg

sketch file here: https://ibm.box.com/s/yoni7ot52baszyczgouoe7sp5s86xrtu

[vpicone]

MVP for this would be replicating the pictogram and icon library functionality. However, these aren't distributed by Carbon so don't have the associated metadata which would need to be provided (linking the icons to their group/category)

If we add the dark mode it would need to be for all the pages (icon, pictogram, and app icons), not just one. @laurenmrice were you able to find anything related to dark mode/themes in the original spec for the pictogram/icon library work?

[DianaStanciulescu]

@vpicone I need your help or somebody's from your team to code this. I left a bunch of notes on the side of the mockup, and other than that just wanted to make sure this is clear? please tell us what you need from us. thanks!

[DianaStanciulescu]

@mjabbink @peter-garvin tagging you so you are aware of the conversation. thanks!

[vpicone]

@DianaStanciulescu We don't have a carbon library for these icons, so it's not as easy as duplicating the icon/pictogram pages (which both have carbon libraries and metadata). It'll require a totally different approach to loading the assets. We can't take on the grouping/categorization piece, that's something your team would need to do.

@mjabbink We have 3 devs working on brand projects at the moment, so not sure when we'll have time to look at this.

[DianaStanciulescu]

@vpicone , Peter already did the naming/exporting of svgs, we can categorize them , but the code needs to order icons by file name, and then we need to fill in in some document what friendly name to display for each, and add in all the tags/aliases. We can do that with your guidance.

Prioritization is not up to me, of course, I know you are super busy, and the project is indeed not that simple. Thanks!

[vpicone]

@DianaStanciulescu yeah getting the data together is the easy part. Even offering guidance requires a lot of research/time.

Are they ordered by icon name or by group? @conradennis might be able to help you with getting the metadata together. Should be the same as icons/pictograms.

[DianaStanciulescu]

@vpicone we were thinking they are grouped in 3 separate categories (stroke icons, fill, and ibm plex), and then ordered by file name, and that we will name them with any group denominator in front to keep groups together (for example, there are 3 icons named A, G, and X, and to keep them together we will name them Maximo-A, Maximo-G, Maximo-X)

[vpicone]

@DianaStanciulescu That could work, I’d use an underscore so if the company name has two words you can use a hyphen there.

But yeah, organizing and grouping the assets is the easy part. We aren’t suited to do it because we don’t know how you intend on an audience going through them. I’d look at the icon and pictogram library pages for reference.

[mjabbink]

@DianaStanciulescu We need to lighten Vince}s load for a few weeks. Too many think going that we need Vince to take care of. This can back burner or you can go for it in markdown. If too complicated for you no problem we’ll pick it up in a few weeks on the dev side when we can.

[DianaStanciulescu]

Hi! I think coding this is a bit too difficult for me, but until Vince & team have time to take this on, I can coordinate with Pete to see what preparation work we need to do. Thanks!

[mjabbink]

@DianaStanciulescu What else can you do in the meantime on this?

[DianaStanciulescu]

@mjabbink I am preparing the yml files with the metadata. I talked to pete, conrad, lori, josh black. it's WIP

[DianaStanciulescu]

hi @mjabbink , @vpicone , we put together the drafts for the yml files : https://ibm.box.com/s/wxn4zx99wn4yx8q0iyrcxslgcg0v0u3c

all icons SVG and uploaded to the repo here: https://github.ibm.com/brand/App-icons/tree/master/svg

sketch file here: https://ibm.box.com/s/yoni7ot52baszyczgouoe7sp5s86xrtu

this should be ok to go to dev when there is an opening.

thanks!

[mjabbink]

Thanks @DianaStanciulescu. One small detail in the Sketch file is the tabs are not the correct height. I believe they are 48px.

[DianaStanciulescu]

@mjabbink right! cleaned-up file: https://ibm.box.com/s/4ul152s12lm8g6fkdj2bgvseelo21s0c

[mjabbink]

@peter-garvin Does @DianaStanciulescu have your latest app icon master? Who will be making the individual assets for the library?

[peter-garvin]

Ive made the assets already, but havent gotten in the most recent handful. Before we publish, let me review the files - there are some added, and some of the unassigned ones that have been assigned. Current assets are here: https://github.ibm.com/brand/App-icons/tree/master/svg

[mjabbink]

@peter-garvin I fee like there are 4–5 more since you last posted above.

[peter-garvin]

yes theres maybe 20–30 more that I'll need to package up. they just keep coming

[mjabbink]

@vpicone @sstrubberg. Please make this a priority for the next sprint.

[peter-garvin]

@DianaStanciulescu I've uploaded a new batch of icons that need metadata as well. Here is a spreadsheet of new icons and icons that have been assigned and renamed. Anything that doesnt have an entry in the Old Name field is a net new icon

New app icons.xlsx

[peter-garvin]

theyre labelled light theme but the same info applies to the dark theme version as well

@mjabbink that was 55 new icons!

[LMapes]

@peter-garvin I see these.

[pbenson322]

@peter-garvin @LMapes I see them, too.

[LMapes]

@DianaStanciulescu is it possible to get another Word file so we can add the metadata?

[DianaStanciulescu]

hi @LMapes ! these were the latest word files that you and peggy worked on, the light version and the identical dark one : https://ibm.box.com/s/wxn4zx99wn4yx8q0iyrcxslgcg0v0u3c

[LMapes]

@peter-garvin @DianaStanciulescu @pbenson322 has the files now to make edits.

[vpicone]

@DianaStanciulescu @peter-garvin Do we know when the metadata will be ready? Also, some clarifying questions:

1. Is https://github.ibm.com/brand/App-icons/tree/master/svg still the location of the latest files?

2. Does every icon have a light and a dark version?

3. Is the filename always identical to the name? Can we get rid of the non-latin characters?

4. We need a metadata property for Stroke/Fill/Text (category) those aren't the same thing as aliases.

5. Aliases should probably be renamed to keywords, it seems it's just become buckets of searchable terms not aliases for the individual icons

6. I think Text might fit with the other categories instead of IBM Plex. I don't think we need to put app icons at the end of each category either (since they're all app icons).

[peter-garvin]

@vpicone

1. yes the latest files are there
2. yes
3. not always identical, i'll leave out some words like 'for' or 'and', maybe abbreviations for products that use abbreviation themselves. Is there anything currently that is non-latin? I know some have a ~ in order to put unassigned icons at the bottom of the list alphabetically. Open to suggestions
4. @DianaStanciulescu may know more about this, 5 and 6, I havent touched the metadata

@vpicone @conradennis What is the best way to continue to add icons to this? I'm not sure how its done for UI icons but I'd like to get a process nailed down that is easy to update

[vpicone]

@peter-garvin this is the one that stood out as non-latin: app-icon-light-新视界.svg.

In regards to the tilde, _ is a more standard prefix for distinguishing internal/unused files. However, using it would, would move them to the top of the list when sorted (not sure if that's an issue?). I have an idea though: what if instead, we named them then used an unused: true piece of metadata to track that? Then we could distinguish/filter unused icons on the website and avoid folks fat-fingering the file name when the icon changes to being used.

It'd be best if the file names were exactly the name, otherwise we'll need a separate metadata property with the exact file name (so we can loop over the metadata and pull in the corresponding files). I think it's easier to just keep them the same.

Would you be okay with a PR to remove app-icon-light and app-icon-dark from the name/filename? That way we just have to change the directory we're pulling the image from. If the filename is the same between light and dark, then we only need one metadata file. This will reduce human errors caused from trying to keep the light and dark yamls in sync.

[peter-garvin]

ahhh ok i forgot about that one, I can change that. I agree with your suggestions

[LMapes]

@DianaStanciulescu Here is the metadata file you seek. https://ibm.box.com/s/k3gd5gpdxyrpepnfuoycvkom7m0qb105

[vpicone]

@DianaStanciulescu any updates on the metadata just yet?

[DianaStanciulescu]

@vpicone I just started working on it, and realized that the new icons are missing aliases & category, so I am now going through all of them adding this and making the changes we discussed.

I am working in here: https://github.com/carbon-design-system/design-language-website/pull/719

I hope to have it done by the end of the day today or tomorrow

[DianaStanciulescu]

@vpicone done! there should be another round of cleanup but I think this version can work as a v1. I still need to figure out where to place the dark/light switcher for the entire page, I will work on that next.

[vpicone]

@DianaStanciulescu great thanks!

[DianaStanciulescu]

@peter-garvin @sadekbazaraa, we discussed with Vince the placement of the dark/light tabs on the page, and it would be simpler for a user to have a single set of tabs for the entire page; this way, searching or going for one category to the next will not affect the displayed bg color. This is a solution I was thinking of, do you think the search bar remains too small? Should we remove the dropdown and leave the search + tabs only (since there are only 3 categories)?

[sadekbazaraa]

@DianaStanciulescu I think this solution could work as well. I wonder if it breaks the patterns that we're using anywhere else for similar functionality? I think some of these considerations came up for the new data vis color section on the Carbon site which I don't think is live just yet.

[DianaStanciulescu]

@sadekbazaraa this is the reason I initially removed the tabs from the top bar; however, the experience would be worse, and the page has extra functionality vs the UI icon and pictos page, so I am thinking it is ok to break that pattern.

[mjabbink]

@DianaStanciulescu I think the tabs/dropdown can align on the app icon grid. Worth a try but maybe the containers will be too small?

[mjabbink]

an I do think it’s worth effecting the whole page between dark/light icons

[DianaStanciulescu]

Yes, the dropdown&tabs can and should align to the grid. This is the updated mockup, the sketch file is here: https://ibm.box.com/s/yoni7ot52baszyczgouoe7sp5s86xrtu

[peter-garvin]

could also look at dropdown like carbon demos, might make it more unified with the section dropdown

[DianaStanciulescu]

might be a good idea, especially if we want to add monochrome at some point in the future or other variant

[mjabbink]

Agree

[DianaStanciulescu]

@peter-garvin @mjabbink @sadekbazaraa is this ok? ( I made that divider line grey 50..but I know it is in discussion or being updated... )

[mjabbink]

:+1:

[mjabbink]

Looking forward to seeing this page on the glass.

[peter-garvin]

i might recommend trying gray 20 for vertical dividers between dropdowns, and I dont know that you need the labels above here

[DianaStanciulescu]

@peter-garvin agreed; @vpicone sketch file is here: , this should be ready to go. please tell me if you need any changes to metadata or design.