Skip to content

Carbon icon mapping improvements#3767

Open
zamoore wants to merge 5 commits intomainfrom
zamoore/hds-6112/flight-icons-figma-file-ssot
Open

Carbon icon mapping improvements#3767
zamoore wants to merge 5 commits intomainfrom
zamoore/hds-6112/flight-icons-figma-file-ssot

Conversation

@zamoore
Copy link
Copy Markdown
Contributor

@zamoore zamoore commented Mar 31, 2026

📌 Summary

If merged, this PR will change the source of the flight to carbon icon mapping from the hds-carbon-icon-map.json file (now deleted) to a single source of truth, the catalog.json file.

Also updates incorrect icons to correct ones (icons added and deleted).

🔗 External links

Jira ticket: HDS-6112

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 31, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hds-showcase Ready Ready Preview Apr 7, 2026 5:13pm
hds-website Ready Ready Preview Apr 7, 2026 5:13pm

Request Review

@didoo
Copy link
Copy Markdown
Contributor

didoo commented Apr 1, 2026

@zamoore I see these errors when I run pnpm build in packages/flight-icons, is it expected?
screenshot_6092

@zamoore
Copy link
Copy Markdown
Contributor Author

zamoore commented Apr 1, 2026

@didoo - Yes, those warnings are intentional. sparkle is intentionally skipped do the Do not use in the mapping string. If that's too noisy, we can hide those.

For the other 3, I need to discuss with Jory. Seems like the mapping might be slightly off. There are some icons that aren't present in the carbon package at the 32px size (or any specific size), and some that just aren't present in the package at all. I'm not certain why that is.

Copy link
Copy Markdown
Contributor

@didoo didoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

left a few comments

const carbonName = mapping[baseName];

if (carbonName && !registry[baseName].carbon) {
const carbonMatch = mapping?.match(/Maps to: (.+)/);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[thought] @zamoore @jorytindall I am bit worried that this format may lead to people manually editing the description field

Image

What if we instead make it more machine-readable and make people more wary about editing it? In the end, I don't think consumers will ever use this in any way.

Copy link
Copy Markdown
Contributor

@jorytindall jorytindall Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

manually editing the description field

Can you clarify what you mean by this? As in, people from our team manually editing this field? Personally I think that's pretty low risk since we all more or less know what is going on with this library. However, part of the purpose of including something in the description was the make sure that the coverage was 100%, so if we deem this not valuable for consumers then I'm fine stripping it out or including something more machine-oriented.

Copy link
Copy Markdown
Contributor

@didoo didoo Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's say we have a new icon or something, and someone adds manually the description field using Map to: *** or Mapping to: *** instead of Maps to: *** because a typo or because they forgot what is the right™ format to use, the script would miss that entry. if it was something more machine oriented like [carbon:***] maybe it would be more obvious that it's meant for a machine, is not just human-readable text.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think updating to something like that makes sense at this point in the process 👍

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I discussed with @jorytindall and we opted for [carbon:icon-name] when available, and ``[carbon:]` when not

Copy link
Copy Markdown
Contributor

@jorytindall jorytindall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a bit out of my depth here, but cursory examination looks good to me. Left a small point to discuss on the generated catalog, but it's not a blocker, I'm fine either way.

@@ -10,7 +10,7 @@
"fileName": "loading-24",
"iconName": "loading",
"description": "loading, loader, spinner, animated",
"mapping": "No Carbon equivalent.\nTBD",
"mapping": "",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not the one to make the decision on this, but just confirming that it's better/easier to have an empty string compared to being explicit with a fallback for icons that aren't mapped. I don't have a strong opinion, but if this field is empty in the catalog should it be excluded?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants