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	bff899b
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/6764870fff664c0008d5e656
😎 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	bff899b
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6764870fc4ae31000892650d
😎 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	bff899b
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/676487109a68dd00080bb7dc
😎 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.33%. Comparing base (d56c885) to head (bff899b).

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.31%   84.33%   +0.01%     
==========================================
  Files         404      406       +2     
  Lines       14359    14380      +21     
  Branches     4606     4608       +2     
==========================================
+ Hits        12107    12127      +20     
- Misses       2090     2091       +1     
  Partials      162      162              

☔ 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 👍