[Badge indicators] Implement React badge indicator

[thyhmdo]

---

Storybook implementation

---

Badge indicator spec

[tay1orjones]

Dev implementation discussion

2024/10/02

Component details

• This will be a new component, tentative/initial name of Badge
• Composable in nature, to be used as a child of other components
• Initial delivery will focus exclusively on Button support, but ultimately this component will likely be used across other components
• We'd like to avoid adding a badge prop/slot to components
• Rough API notes
  • 'Default' behavior is just the dot, without any text.
  • count prop of type number, because the text should be limited to a number
  • no support for children needed
• Initial support will be buttons only - @thyhmdo a few questions on this:
  • Is this limited to ghost buttons for now, or all button variants?
  • How would it work on a danger button?
  • From a usage standpoint will we have guidance from day 1 that encompasses best practices applicable to all(ish) components beyond button?

Styling

• @carbon/styles will have a new style file/module for Badge
• Styles in this file should ideally be focused on globally-applicable styles and avoid button-specific selectors.
  • padding is an example of anticipated "global" style that would be broadly applicable to any component we eventually add support for
• If/when we later expand support to other components and spec them out, we'd like to keep component-specific styles to a minimum.
  • Undecided if component-specific styles should live in badge scss file or component scss file.
• Indicator should be CSS based
  • Probably a pseudo element
  • border-radius 50%
  • The number will need to be directly in the dom because you can't set pseudoelement content from js and content isn't included in the accessibility tree (won't be read by screenreaders)
  • Truncation w/ + will need to happen in js because text-overflow: <string> browser support is too slim to take a css approach.

A11y concerns

• How should this be surfaced or read by screenreaders?
• What treatment do we need to apply to the badge and/or the button when there is no text?
  • Does the approach need to change when there is number text?

Plan for parity between @carbon/react and @carbon/web-components

• An experienced WC dev and experienced React dev will pair up on this
• Start with React first
  • Web components usually extends the styles package, so it makes sense to build it in react first and then WC
  • further, 20% of component styles are selectors that do not exist in light DOM and won't apply to react
  • Start WC once the styles are set - we don't have to wait for react to fully finish
• Intent is to deliver both at the same time - some options:
  • Use a feature branch or a draft PR to do both at the same time and merge all at once.
  • Or fully deliver it to react first with no export or storybook docs. Once WC is done, turn on both exports and storybooks at the same time
• Do a unified announcement of general availability of the feature in both packages

[kennylam]

Estimate is for the creation of the indicator component only. Implementation in other components (notification, treeview, etc) can be tracked in separate issues for those efforts.

[thyhmdo]

Initial support will be buttons only? It should only apply to Ghost icon button.