feat(badge-indicators): new component

[ariellalgilmore]

Closes #

{{short description}}

Changelog

New

• {{new thing}}

Changed

• {{change thing}}

Removed

• {{removed thing}}

Testing / Reviewing

{{ Add descriptions, steps or a checklist for how reviewers can verify this PR works or not }}

[netlify]

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

Name	Link
🔨 Latest commit	bcfa94c
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/6785b8b414fc94000817f0d0
😎 Deploy Preview	https://deploy-preview-18342--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	bcfa94c
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6785b8b4aec4fd0009d37e6e
😎 Deploy Preview	https://deploy-preview-18342--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	bcfa94c
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6785b8b4450a2d0008ce5187
😎 Deploy Preview	https://deploy-preview-18342--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.

[netlify]

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

Name	Link
🔨 Latest commit	8483138
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67977aa5da8b410008a8771f
😎 Deploy Preview	https://deploy-preview-18342--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	8483138
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67977aa58899550008985304
😎 Deploy Preview	https://deploy-preview-18342--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!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	8483138
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67977aa53e415a00085cd0e9
😎 Deploy Preview	https://deploy-preview-18342--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

All modified and coverable lines are covered by tests ✅

Project coverage is 84.18%. Comparing base (8acd725) to head (8483138).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #18342      +/-   ##
==========================================
+ Coverage   84.16%   84.18%   +0.01%     
==========================================
  Files         408      409       +1     
  Lines       14446    14459      +13     
  Branches     4664     4650      -14     
==========================================
+ Hits        12159    12172      +13     
- Misses       2122     2123       +1     
+ Partials      165      164       -1     

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

[tay1orjones]

Today we decided to pivot on the following:

Based on the guidance from the open PR, the badge indicator is intended to only be used on a Button/IconButton. That supports:

1. Not exporting BadgeIndicator
2. Baking BadgeIndicator into Button/IconButton directly, exposing control through a badgeCount (or similar) number prop
3. Removing experimental/BadgeIndicator stories and instead just have a "with badge indicator" story for both Button and IconButton.
   • This would essentially be the same story you already have, just splitting it into two different locations (Button using hasIconOnly and IconButton)
   • If/when we determine additional uses for BadgeIndicator outside of Button/IconButton we can explore exporting it and if it should have it's own stories.

It feels to me like this should live under packages/react/src/components because it renders elements to the DOM and has styles associated with it. The components currently in packages/react/src/internal don't render any UI and don't have any styles associated with them.

[tay1orjones]

Another requirement we talked about - the badge indicator should only show on icon-only buttons that have size="lg" and kind="ghost". This is our understanding of the intent from design @thyhmdo.

Rather than doing a bunch of conditional types, we'll just mention it in the prop description for badgeCount.

  /**
   * Display a badge on the button. An empty/dot badge if 0, a numbered badge if >0.
   * Must be used with size=lg and kind=ghost
   */
  badgeCount?: number;

We can also provide a dev-only console warning if badgeCount is configured and size or kind are wrong.

The IconButton badgeCount prop must be used with size="lg" and kind="ghost". This requirement is documented in the design specification: https://carbondesignsystem.com/patterns/status-indicator-pattern/#badge-indicator