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

PAL and Core alignment

Preview Give feedback

1. [Status indicators] Get telemetry for IBM Products status indicators in React #16597
   role: design ✏️ +1
   
2. [Status indicators] Audit PAL and Core icon assets and documentation #16690
   role: design ✏️ +1
   
3. [Status indicators] Playback audit findings to PAL and Core
4. [Status indicators] Document what icon assets and documentation to move to Core #16978
   role: design ✏️ +1
   
5. [Status indicators] Playback to stakeholders and finalize icon assets #17116
   role: design ✏️ +1
   
6. [Status indicators] Playback with PAL and Core to align #17289
   role: design ✏️ +1
   

Shape and Icon indicators

Preview Give feedback

1. [Status indicators] Explore color tokens for status icons and shapes #17117
   role: design ✏️ type: enhancement 💡 +2
   
2. [Status indicators] Need to update/confirm the Orange color on the Status palette #17417
   role: design ✏️ type: enhancement 💡 type: pattern 💠 +3
   
3. [Status indicators] Update Pattern guidance website docs carbon-website#4050
   role: design ✏️ type: docs 📖 type: enhancement 💡 type: pattern 💠 +4
   
4. [Status indicators] Create a PR to update pattern website docs carbon-website#4272
   role: design ✏️ type: docs 📖 type: enhancement 💡 type: pattern 💠 +4
   
5. [Status indicators] Update Status and Icon in Figma carbon-design-kit#864
   kit: figma role: design ✏️ type: enhancement 💡 +3
   
6. [Status indicators] Implement Icon indicator #17539
   package: @carbon/react package: @carbon/web-components package: styles role: dev 🤖 +4
   

   
7. [Status indicators] Implement Shape indicator #17540
   role: dev 🤖 status: blocked 🙅‍♀️ +2

Inline status

Preview Give feedback

1. [Status indicators] Create design spec for inline status #15561
   role: design ✏️ type: enhancement 💡 +2
   
2. [Status indicators] Implement inline status

Badge indicator

Preview Give feedback

1. [Badge indicators] Create specs for dot and number badges, pairing with icons #17121
   role: design ✏️ type: enhancement 💡 +2
   
2. [Status indicators] Add badge indicator to Figma carbon-design-kit#865
   kit: figma role: design ✏️ status: blocked 🙅‍♀️ +3
   
3. [Badge indicators] Implement React badge indicator #17538
   package: @carbon/react role: dev 🤖 +2
4. [badge indicator]: implement in existing React components #17646
   package: @carbon/react role: dev 🤖 status: blocked 🙅‍♀️ +3
5. [badge indicator] Implement web-components badge indicator #17644
   package: @carbon/web-components role: dev 🤖 status: blocked 🙅‍♀️ +3
6. [badge indicator]: implement in existing web components #17647
   package: @carbon/web-components role: dev 🤖 status: blocked 🙅‍♀️ +3

Tasks for a later date

Renaming icon assets

Preview Give feedback

1. [Status indicators] Update icon assets in code package to reflect new names (dev) (*Note in issue: Make sure this is also updated on the Carbon and IDL Icon pages.)
2. [Status indicators] Updating the naming convention of the status icons and shapes carbon-website#2539
   0 of 2
   adopter: PAL role: design ✏️ role: dev 🤖 type: docs 📖 type: pattern 💠 version: 11 +6
3. [Status indicators] Playback and review with Conrad, design, and dev? (design)
4. [Feature Request]: Update status Icon to align with Carbon's latest guidelines #17335
   status: needs triage 🕵️‍♀️ +1
5. [Status indicators] Devs to remove the current support tokens: undefined, caution-major, caution-minor (due to the new status tokens update)
6. [Badge indicator] Consider New (blue) shape indicator as a specific use case
7. [Status indicators]: Add new tokens to website

[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