search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.6k stars 1.76k forks source link

Status Indicators ☂️ #13429

Open sstrubberg opened 1 year ago

sstrubberg commented 1 year ago

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

Carbon Core Guidance

Stakeholders

embrown@us.ibm.com - @embrown jan.christensen@ibm.com - @jan-christensen1

### PAL and Core alignment
- [ ] https://github.com/carbon-design-system/carbon/issues/16597
- [ ] https://github.com/carbon-design-system/carbon/issues/16690
- [ ] [Status indicators] Playback audit findings to PAL and Core (design)
- [ ] [Status indicators] Propose what icon assets and documentation to move to Core (design)
### Renaming icon assets
- [ ] https://github.com/carbon-design-system/carbon/issues/16253
- [ ] https://github.com/carbon-design-system/carbon-website/issues/2539
- [ ] [Status indicators] Audit icon asset names versus pattern naming convention (design)
- [ ] [Status indicators] Propose new icon asset names to match pattern guidance (design) (*Note in issue: Make sure there is no overlap of new names for these icons that already exist for other icons in the system, if so we need to change those names as well.)
- [ ] [Status indicators] Playback and review with Conrad, design, and dev? (design)
- [ ] [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.)
- [ ] [Status indicators] Update Figma (design)
- [ ] [Status indicators] Update Website (design)
### Status indicators and shapes component
- [ ] https://github.com/carbon-design-system/carbon-website/issues/2612
- [ ] [Status indicators] Confirm the sizes of the status shapes paired with text is correct (design)
- [ ] [Status indicators] Explore systematic way to achieve a11y icon inner fill color (design / dev)
- [ ] [Status indicators] Create spec of full list of status indicators and shapes to be added to React (design)
- [ ] [Status indicators] Add status indicators and shapes to React
- [ ] https://github.com/carbon-design-system/carbon-design-kit/issues/751
- [ ] https://github.com/carbon-design-system/carbon-design-kit/issues/732
- [ ] Need to look at icon badging
### Inline status component
- [ ] https://github.com/carbon-design-system/carbon/issues/15561
- [ ] [Status indicators] Add inline status component to Code (dev)
- [ ] [Status indicators] Add inline status component to Figma (design)
- [ ] [Status indicators] Add inline status component to Website (design)
- [ ] https://github.com/carbon-design-system/carbon-website/issues/4050
kingtraceyj commented 8 months ago

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

image Tag with status indicator

laurenmrice commented 6 months ago

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

laurenmrice commented 1 month ago

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?