[Status Indicator] General discussion around it

[Kritvi-bhatia17]

The problem

1. New status indicator icons are available in the Figma kit, but they are not present in our documentation or code.

2. The padding differs between the two icons. Why wasn't the size reduced instead of altering the design?

---

To be discussed

1. Existence in Code: These don't exist in code (beyond the icons that should all be in our icons package). Carbon for IBM Products has a component, its definitely come up before about either creating or moving to core.

2. Guidance for Icons (for dev): The status indicators were contributed to Figma, and users can use the guidance to configure the icons themselves in code.

3. Icon Design and Sizing: The shape indicator pulls icons from the icon library without altering the size or design. It might be worth revisiting some of the icon designs to standardize the sizing and SVG naming convention.

---

Ref:

• Discussion thread
• Figma kit

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[Kritvi-bhatia17]

Hey @Shobhith-sridhar! Following our last discussion, I've talked with the team and we've had several conversations since then. Just wanted to keep you in the loop and you can keep an eye on this issue for further updates.

[Shobhith-sridhar]

@Kritvi-bhatia17 Can you please tag me in this issue?

[Kritvi-bhatia17]

Related issue

[Shobhith-sridhar]

I have a few more questions @Kritvi-bhatia17 : So these are some status icons (1st picture) one of our dev teams is using in their deployment environment. We are currently changing these to comply with Carbon colors.

I want to make sure these icons (2nd picture) (except the icon in this issue, incomplete) are available for the developers to use (ASAP?).

[Shobhith-sridhar]

If these are available (2nd picture above), then I can use this icon (screenshot below) instead of the one currently in issue (incomplete)

Alternatively I could also use these two (bottom screenshot) to represent Paired and Unpaired, but I'm not sure if we can change the color from yellow to green? and if this icon is available for the devs to use right now.

[aubrey-oneal]

A few more resources:

• Naming convention audit
• Docs on how to use status indicators vs shapes
• Carbon for products guidance (note we want to have a workstream to clean up the confusion between the two)

[Kritvi-bhatia17]

Hey @Shobhith-sridhar, thanks for bringing this up. Developers can use status shapes and icons them via SVG for now. Here are the steps:

1. Download the the SVG you need if it isn't already in your code
2. Add the color tokens documented here and read the usage guidance as needed
3. Reach out if you have any questions!

We have an item on our roadmap to code these up as full components and fix some confusion, but this is probably coming in Q3. As for understanding the disparity between status indicators and shapes, as mentioned by @aubrey.oneal, you can find more details over here.

[Kritvi-bhatia17]

1. If these are available (2nd picture above), then I can use this icon (screenshot below) instead of the one currently in issue (incomplete)

2. Alternatively I could also use these two (bottom screenshot) to represent Paired and Unpaired, but I'm not sure if we can change the color from yellow to green? and if this icon is available for the devs to use right now.

Hi @Shobhith-sridhar! In response to your questions:

1. I noticed that the gray-colored icon used here doesn't seem to align with the standard, as typically gray indicates draft or disabled status.

   

2. It's crucial to opt for colors that closely adhere to the recommended usage guidelines. Therefore, it's advisable to refrain from introducing new color and shape combinations not specified here.

Moreover, you can join our office hours session if you'd like to discuss and review your designs with input from multiple designers!

[Shobhith-sridhar]

@aubrey-oneal @Kritvi-bhatia17 Thank you so much for your inputs. I'll talk to our devs to decide the best plan of action.

Please keep me posted if any update is being made to this issue 💫

[alexandrutatarciuc]

In my team, there's an ongoing confusion regarding status indicators, more precisely the "Caution minor" status indicator. As we can see in the Figma file, the fill of the icon is $support-warning, whereas the inner path is "hardcoded" to black.

Some people consider this hardcoding to be done on purpose, while others believe that this is an inconsistency since this "black" color should be a token instead (for example, $support-warning-complimentary). This issue seems to be outlined here #13429.

but we have been telling [developers] they need to hardcode it for now.

We are unsure if this is intentional or an inconsistency. It would be very helpful if someone could clarify this for us :)

[Kritvi-bhatia17]

Hi @alexandrutatarciuc! The inner fills are hardcoded to black or white for accessibility reasons, ensuring optimal contrast across different themes. Currently, there isn't a color token available to achieve this, but we'll explore options for addressing this.

[alexandrutatarciuc]

@Kritvi-bhatia17 Thanks for the prompt reply! It makes sense why it is black or white. I hope there'll be a solution that would align better with the rest of CDS' design practices. Thanks for considering my feedback!