feat(icon-indicator): new component

[ariellalgilmore]

Closes #17539

worked on with @preetibansalui and @2nikhiltom! 🎉

New Icon indicator component

Changelog

New

• new Icon indicator component, stories, tests, readme for react and web components
• new icon indicator styles
• new status tokens in themes packags

Changes

• update data-table dynamic story to include the icon-indicator component in the status column

Testing / Reviewing

confirm icon indicators look good in react and web component storybooks
confirm tests and coverage are passing

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	2951971
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/677c058cffdf49000832f744
😎 Deploy Preview	https://deploy-preview-18191--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	2951971
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/677c058cdc76f500086a857e
😎 Deploy Preview	https://deploy-preview-18191--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	2951971
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/677c058ca87a590008f926e5
😎 Deploy Preview	https://deploy-preview-18191--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

Attention: Patch coverage is 95.23810% with 1 line in your changes missing coverage. Please review.

Project coverage is 84.16%. Comparing base (b7906ad) to head (2951971).
Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
...kages/react/src/components/IconIndicator/index.tsx	91.66%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #18191      +/-   ##
==========================================
+ Coverage   84.15%   84.16%   +0.01%     
==========================================
  Files         406      408       +2     
  Lines       14407    14428      +21     
  Branches     4690     4688       -2     
==========================================
+ Hits        12124    12144      +20     
- Misses       2118     2119       +1     
  Partials      165      165              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[tay1orjones]

This looks awesome! Two main points to call out, plus a few addl things in comments

• The react component needs to be exported from the entrypoint packages/react/src/index.js and packages/react/src/index.ts
  • The exports should be marked unstable/experimental for now so we have space to get feedback and alter the API if necessary
  • export { IconIndicator as unstable__IconIndicator } from './components/IconIndicator';
• Could the story be updated to align the icons into two uniform columns?

[tay1orjones]

Could put an example of these in the custom-theme example if you'd like, alongside the button override.

carbon/examples/custom-theme/src/index.scss

Lines 16 to 19 in acead26

	// override a component token
	@use '@carbon/react/scss/components/button/tokens' as button-tokens with (
	$button-primary: #3f51b5
	);

[ariellalgilmore]

i added it to this PR, but since the styles/component hasn't been released yet it's causing the build to fail. I will remove for now and make a PR once this is in the next release.

[tay1orjones]

Overall I think this is in good shape for a visual review @thyhmdo 👍

[thyhmdo]

@ariellalgilmore This looks great! There's only one thing and this is on my that I didn't check on the name update. But these two status icons' names need tobe updated:

Error --> Failed
Information --> Informative

[thyhmdo]

Looks great!

[tay1orjones]

LGTM!