Skip to content

feat(react-badge): add useBadgeBase_unstable hook#35811

Merged
dmytrokirpa merged 4 commits into
masterfrom
feat/react-badge-base-hooks
Mar 23, 2026
Merged

feat(react-badge): add useBadgeBase_unstable hook#35811
dmytrokirpa merged 4 commits into
masterfrom
feat/react-badge-base-hooks

Conversation

@dmytrokirpa

@dmytrokirpa dmytrokirpa commented Mar 3, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR adds base state hooks for the Badge, CounterBadge, and PresenceBadge components as part of the experimental base hooks initiative.

What was implemented

  • useBadgeBase_unstable — base hook for Badge component

    • Props type: BadgeBaseProps (omits appearance, color, shape, size)
    • State type: BadgeBaseState (omits appearance, color, shape, size)
    • Handles: slot structure (root, icon), iconPosition default
  • useCounterBadgeBase_unstable — base hook for CounterBadge component

    • Props type: CounterBadgeBaseProps (omits appearance, color, shape, size)
    • State type: CounterBadgeBaseState (omits appearance, color, shape, size)
    • Handles: counter logic (count, dot, showZero, overflowCount), children text computation
  • usePresenceBadgeBase_unstable — base hook for PresenceBadge component

    • Props type: PresenceBadgeBaseProps (omits size)
    • State type: PresenceBadgeBaseState (omits appearance, color, shape, size)
    • Handles: ARIA labels (aria-label, role="img"), status/outOfOffice state, icon selection (defaults to medium size)

Refactoring

  • useBadge_unstable now calls useBadgeBase_unstable internally and spreads the result
  • useCounterBadge_unstable now calls useCounterBadgeBase_unstable internally

Exports

All new types and hooks are exported from the package index.ts. They are NOT exported from @fluentui/react-components.

🤖 Generated with Claude Code

dmytrokirpa and others added 2 commits March 5, 2026 11:48
…table, and usePresenceBadgeBase_unstable hooks

Implements base state hooks for Badge, CounterBadge, and PresenceBadge components.
Each base hook extracts pure component logic (slot structure, ARIA attributes, functional state)
while omitting design props (appearance, color, shape, size).

- BadgeBaseProps/BadgeBaseState: omits appearance, color, shape, size
- CounterBadgeBaseProps/CounterBadgeBaseState: omits appearance, color, shape, size
- PresenceBadgeBaseProps/PresenceBadgeBaseState: omits size (appearance/color/shape are not exposed)
- useBadge_unstable now calls useBadgeBase_unstable internally
- useCounterBadge_unstable now calls useCounterBadgeBase_unstable internally
- All new types and hooks exported from package index.ts

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
@dmytrokirpa dmytrokirpa force-pushed the feat/react-badge-base-hooks branch from af30d35 to beb6fb4 Compare March 5, 2026 10:48
@dmytrokirpa dmytrokirpa changed the base branch from experimental/component-base-hooks to master March 5, 2026 10:48
@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown

Pull request demo site: URL

@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-avatar
Avatar
48.27 kB
15.312 kB
48.367 kB
15.336 kB
97 B
24 B
react-avatar
AvatarGroupItem
61.511 kB
19.296 kB
61.608 kB
19.326 kB
97 B
30 B
react-badge
Badge
24.194 kB
7.856 kB
24.24 kB
7.879 kB
46 B
23 B
react-badge
CounterBadge
24.974 kB
8.128 kB
24.963 kB
8.135 kB
-11 B
7 B
react-badge
PresenceBadge
24.075 kB
8.771 kB
24.172 kB
8.809 kB
97 B
38 B
react-components
react-components: entire library
1.292 MB
323.336 kB
1.293 MB
323.386 kB
348 B
50 B
react-persona
Persona
55.225 kB
17.245 kB
55.322 kB
17.279 kB
97 B
34 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-avatar
AvatarGroup
17.45 kB
6.995 kB
react-components
react-components: Button, FluentProvider & webLightTheme
70.397 kB
19.96 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.62 kB
68.716 kB
react-components
react-components: FluentProvider & webLightTheme
43.612 kB
14.022 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-table
DataGrid
159.313 kB
44.939 kB
react-table
Table (Primitives only)
40.997 kB
13.172 kB
react-table
Table as DataGrid
130.528 kB
35.943 kB
react-table
Table (Selection only)
68.916 kB
19.309 kB
react-table
Table (Sort only)
67.559 kB
18.924 kB
react-tag-picker
@fluentui/react-tag-picker - package
186.596 kB
55.849 kB
react-tags
InteractionTag
13.666 kB
5.459 kB
react-tags
Tag
29.521 kB
9.389 kB
react-tags
TagGroup
82.211 kB
24.143 kB
react-timepicker-compat
TimePicker
108.174 kB
35.695 kB
react-tree
FlatTree
147.635 kB
42.134 kB
react-tree
PersonaFlatTree
149.463 kB
42.517 kB
react-tree
PersonaTree
145.523 kB
41.338 kB
react-tree
Tree
143.701 kB
40.972 kB
🤖 This report was generated against 55ade976605866015dbc1d8b629513bc7515e1fe

@dmytrokirpa dmytrokirpa force-pushed the feat/react-badge-base-hooks branch from e7e48b9 to a998ad3 Compare March 18, 2026 16:05
@dmytrokirpa dmytrokirpa marked this pull request as ready for review March 18, 2026 19:43
@dmytrokirpa dmytrokirpa requested a review from a team as a code owner March 18, 2026 19:43
@dmytrokirpa dmytrokirpa merged commit 2747bc1 into master Mar 23, 2026
15 checks passed
@dmytrokirpa dmytrokirpa deleted the feat/react-badge-base-hooks branch March 23, 2026 13:35
tudorpopams pushed a commit to tudorpopams/fluentui that referenced this pull request Apr 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants