Status Indicators ☂️

[sstrubberg]

Devs have been asking how to achieve the designs for the icon indicator guidance we provide in the pattern (most of the time asking about the indicators that have fills and strokes or inner paths), but we have been telling them they need to hardcode it for now.

IBM Products has a subset of the icon indicators we mention in our pattern, probably for PAL specific usage, but some of the names and iconography they use are inconsistent with what we have in our guidance. It would make sense for us to offer the full set of the icon indicators so people can reuse and leverage them.

C4IBMP guidance

• This link does not work anymore, does anyone know where the link new is?
• React storybook
• Status icons Pattern

Carbon Core guidance

• Status indicators pattern

Stakeholders

• Eric Brown (email: [email protected]) (slack: @embrown)
• Jan Christensen (email: [email protected] ) (slack: @jan-christensen1)

Carbon PAL contacts

Note: We are deprecating the statuses page on PAL sites. Having documentation provided to users on what our unified status perspective is. Could be developed for v12

• Olivia Flory
• Aubrey O'Neal

Tasks for a later date

Renaming icon assets

• [Status indicators] Updating the naming convention of the status icons and shapes carbon-website#2539
• [Status indicators] Playback and review with Conrad, design, and dev? (design)
• [Feature Request]: Update status Icon to align with Carbon's latest guidelines #17335
• [Status indicators] Devs to remove the current support tokens: undefined, caution-major, caution-minor (due to the new status tokens update) Check https://carbon-elements.netlify.app/themes/examples/preview/
• [Badge indicator] Consider New (blue) shape indicator as a specific use case

[kingtraceyj]

Example from NS1 (using MUI currently and moving to Carbon)

Tag with status indicator

[laurenmrice]

Related: Status indicators: Updating the naming convention and the visual

[laurenmrice]

Listing here, but we will be de-prioritizing the Cloud PAL work for Carbon for IBM Products

C4IBMC Guidance (de-prioritize)

Which one is the most updated?

• https://pages.github.ibm.com/cdai-design/cloud-pal/components/resource-status-indicator/usage/
• https://pages.github.ibm.com/cdai-design/cloud-pal/components/status/usage/

[sstrubberg]

REF #17335

[thyhmdo]

Note

This issue has the implementation of bade indicator on the Icon button.

The Icon button in the UI Shell header is pulled directly from the Icon button. By default, it has a 16px icon inside it. The use case doesn't include the badge indicator with 16px icon in the button yet. But we'll observe to see if people would use it anywhere or be confused about it.