feat(react-headless-components-preview): add CounterBadge and PresenceBadge - #36674
Open
Dmytro Kirpa (dmytrokirpa) wants to merge 1 commit into
Open
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: e2f35405-d3b7-404c-853d-cd79e34a0d2d
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
Dmytro Kirpa (dmytrokirpa)
marked this pull request as ready for review
September 1, 2026 13:29
Dmytro Kirpa (dmytrokirpa)
requested review from
Victor Genaev (mainframev)
and
a balanced review from Copilot
September 1, 2026 13:29
Copilot started reviewing on behalf of
Dmytro Kirpa (dmytrokirpa)
September 1, 2026 14:43
View session
Contributor
There was a problem hiding this comment.
Pull request overview
Adds headless CounterBadge and PresenceBadge primitives alongside the reorganized Badge family.
Changes:
- Adds components, state attributes, exports, API documentation, and tests.
- Adds Storybook examples and styling.
- Reorganizes Badge under a nested family structure.
Merge confidence: 70/100
Reviewed changes
Copilot reviewed 29 out of 34 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
stories/src/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx |
Adds out-of-office examples. |
stories/src/PresenceBadge/PresenceBadgeDescription.md |
Documents PresenceBadge usage. |
stories/src/PresenceBadge/PresenceBadgeDefault.stories.tsx |
Adds status examples. |
stories/src/PresenceBadge/presence-badge.module.css |
Styles presence states. |
stories/src/PresenceBadge/index.stories.tsx |
Registers PresenceBadge stories. |
stories/src/CounterBadge/index.stories.tsx |
Registers CounterBadge stories. |
stories/src/CounterBadge/CounterBadgeDescription.md |
Documents CounterBadge behavior. |
stories/src/CounterBadge/CounterBadgeDefault.stories.tsx |
Adds counter examples. |
stories/src/CounterBadge/counter-badge.module.css |
Styles counter states. |
stories/src/Badge/index.stories.tsx |
Reorganizes Badge stories. |
stories/src/Badge/BadgeDescription.md |
Clarifies Badge semantics. |
stories/src/Badge/BadgeDefault.stories.tsx |
Updates story formatting. |
stories/src/Badge/badge.module.css |
Tokenizes and refines styles. |
library/src/components/Badge/PresenceBadge/usePresenceBadge.ts |
Adds presence state attributes. |
library/src/components/Badge/PresenceBadge/renderPresenceBadge.ts |
Exposes the renderer. |
library/src/components/Badge/PresenceBadge/PresenceBadge.types.ts |
Defines public state types. |
library/src/components/Badge/PresenceBadge/PresenceBadge.tsx |
Implements PresenceBadge. |
library/src/components/Badge/PresenceBadge/PresenceBadge.test.tsx |
Tests presence behavior. |
library/src/components/Badge/PresenceBadge/index.ts |
Exports PresenceBadge APIs. |
library/src/components/Badge/CounterBadge/useCounterBadge.ts |
Adds counter state attributes. |
library/src/components/Badge/CounterBadge/renderCounterBadge.ts |
Exposes the renderer. |
library/src/components/Badge/CounterBadge/index.ts |
Exports CounterBadge APIs. |
library/src/components/Badge/CounterBadge/CounterBadge.types.ts |
Defines public state types. |
library/src/components/Badge/CounterBadge/CounterBadge.tsx |
Implements CounterBadge. |
library/src/components/Badge/CounterBadge/CounterBadge.test.tsx |
Tests counter behavior. |
library/src/components/Badge/Badge/useBadge.ts |
Preserves Badge state behavior. |
library/src/components/Badge/Badge/renderBadge.tsx |
Re-exports Badge rendering. |
library/src/components/Badge/Badge/index.ts |
Exports Badge APIs. |
library/src/components/Badge/Badge/Badge.types.ts |
Defines Badge state attributes. |
library/src/components/Badge/Badge/Badge.tsx |
Relocates Badge implementation. |
library/src/components/Badge/Badge/Badge.test.tsx |
Updates relocated tests. |
library/src/badge.ts |
Expands the badge subpath API. |
library/etc/badge.api.md |
Records the expanded API surface. |
change/@fluentui-react-headless-components-preview-3f13119d-36b2-4af8-8dd6-bdfac92e2d2a.json |
Adds release metadata. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| @@ -0,0 +1,7 @@ | |||
| { | |||
| "type": "patch", | |||
| ...state.root, | ||
| 'data-count': String(state.count), | ||
| 'data-dot': state.dot ? '' : undefined, | ||
| 'data-hidden': !state.root.children && !state.dot ? '' : undefined, |
Comment on lines
+8
to
+12
| <CounterBadge className={styles.counterBadge} count={4} aria-label="4 notifications" /> | ||
| <CounterBadge className={styles.counterBadge} count={100} aria-label="More than 99 notifications" /> | ||
| <CounterBadge className={styles.counterBadge} count={0} showZero aria-label="No notifications" /> | ||
| <CounterBadge className={styles.counterBadge} dot aria-label="New activity" /> | ||
| <CounterBadge className={styles.counterBadge} count={0} aria-label="Hidden empty counter" /> |
| border-radius: var(--radius-pill); | ||
| background: var(--brand); | ||
| color: var(--text-on-accent); | ||
| font-weight: 600; |
| 'data-count': String(state.count), | ||
| 'data-dot': state.dot ? '' : undefined, | ||
| 'data-hidden': !state.root.children && !state.dot ? '' : undefined, | ||
| 'data-overflowed': state.count > overflowCount ? '' : undefined, |
Contributor
There was a problem hiding this comment.
aren't we using the toDataAttributeValue util anymore?
Victor Genaev (mainframev)
approved these changes
Sep 2, 2026
| root: { | ||
| ...state.root, | ||
| 'data-status': state.status, | ||
| 'data-out-of-office': state.outOfOffice ? '' : undefined, |
Contributor
There was a problem hiding this comment.
Suggested change
| 'data-out-of-office': state.outOfOffice ? '' : undefined, | |
| 'data-out-of-office': toDataAttributeValue(state.outOfOffice), |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Previous Behavior
The headless Badge subpath exported only the base Badge primitive. CounterBadge and PresenceBadge behavior was available only through the styled react-badge package.
New Behavior
./badgesubpath.Related Issue(s)
None.