carbon-design-system
Status Indicators ☂️
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
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
- [ ] https://github.com/carbon-design-system/carbon/issues/16597
- [ ] https://github.com/carbon-design-system/carbon/issues/16690
- [x] [Status indicators] Playback audit findings to PAL and Core
- [ ] https://github.com/carbon-design-system/carbon/issues/16978
- [ ] https://github.com/carbon-design-system/carbon/issues/17116
- [ ] https://github.com/carbon-design-system/carbon/issues/17289
### Shape and Icon indicators
- [ ] https://github.com/carbon-design-system/carbon/issues/17117
- [ ] https://github.com/carbon-design-system/carbon/issues/17417
- [ ] https://github.com/carbon-design-system/carbon-website/issues/4050
- [ ] https://github.com/carbon-design-system/carbon-website/issues/4272
- [ ] https://github.com/carbon-design-system/carbon-design-kit/issues/864
- [ ] https://github.com/carbon-design-system/carbon/issues/17539
- [ ] https://github.com/carbon-design-system/carbon/issues/17540
### Inline status
- [ ] https://github.com/carbon-design-system/carbon/issues/15561
- [ ] [Status indicators] Implement inline status
### Badge indicator
- [ ] https://github.com/carbon-design-system/carbon/issues/17121
- [ ] https://github.com/carbon-design-system/carbon-design-kit/issues/865
- [ ] https://github.com/carbon-design-system/carbon/issues/17538
- [ ] https://github.com/carbon-design-system/carbon/issues/17646
- [ ] https://github.com/carbon-design-system/carbon/issues/17644
- [ ] https://github.com/carbon-design-system/carbon/issues/17647
Tasks for a later date
### Renaming icon assets
- [ ] [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.)
- [ ] https://github.com/carbon-design-system/carbon-website/issues/2539
- [ ] [Status indicators] Playback and review with Conrad, design, and dev? (design)
- [ ] https://github.com/carbon-design-system/carbon/issues/17335
- [ ] [Status indicators] Devs to remove the current support tokens: undefined, caution-major, caution-minor (due to the new status tokens update)
- [ ] [Badge indicator] Consider New (blue) shape indicator as a specific use case
- [ ] [Status indicators]: Add new tokens to website
Example from NS1 (using MUI currently and moving to Carbon)
Tag with status indicator
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/
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.
