feat(react-badge): Add animated number transitions to CounterBadge

[leddie24]

Previous Behavior

New Behavior

This PR adds support for animated digit transitions in CounterBadge via a new isAnimated prop. When enabled, digits smoothly slide in/out as the count value changes — sliding up when increasing and down when decreasing.

New Features

• isAnimated prop: Opt-in animation for CounterBadge count transitions
• AnimatedNumber component: Internal component that handles per-digit slot animations
• Direction-aware animation: Digits slide up when count increases, down when count decreases

Implementation Details

• Each digit animates independently, only affected digits transition when the value changes
• Uses CSS transforms and opacity with custom easing curves for smooth motion
• Leverages targetWindow from useFluent for proper iframe/portal support
• Animation timing: 75ms exit + 150ms enter with deceleration easing

number-badge.mp4

Related Issue(s)

• Fixes #

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-badge CounterBadge	24.974 kB 8.128 kB	28.261 kB 9.271 kB	3.287 kB 1.143 kB
react-components react-components: entire library	1.291 MB 323.086 kB	1.295 MB 324.11 kB	3.111 kB 1.024 kB

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar Avatar	48.27 kB 15.312 kB
react-avatar AvatarGroup	17.45 kB 6.995 kB
react-avatar AvatarGroupItem	61.511 kB 19.296 kB
react-badge Badge	24.194 kB 7.856 kB
react-badge PresenceBadge	24.075 kB 8.771 kB
react-components react-components: Button, FluentProvider & webLightTheme	70.397 kB 19.96 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.306 kB 68.52 kB
react-components react-components: FluentProvider & webLightTheme	43.612 kB 14.022 kB
react-persona Persona	55.225 kB 17.245 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.534 kB 55.845 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.15 kB 35.693 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 75fd73137fdf2f00e679c23568cad3d876a00799}

[github-actions]

Pull request demo site: URL

[github-actions]

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/CalendarCompat 4 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png	1203	Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png	1088	Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png	485	Changed
vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png	479	Changed

vr-tests-react-components/Charts-DonutChart 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png	5581	Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png	5570	Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	507	Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png	139	Changed

vr-tests-react-components/Skeleton converged 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with square - Dark Mode.default.chromium.png	2	Changed

vr-tests-react-components/TagPicker 4 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png	658	Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png	1319	Changed
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png	635	Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png	677	Changed

There were 5 duplicate changes discarded. Check the build logs for more information.

[dmytrokirpa]

Hey @leddie24, thanks for sending this in! Quick question - could you please clarify where this feature request came from? Was there an open issue or maybe a chat with someone on our team? We’ll might need to sync up with PM/Design teams before moving forward, since we’re trying not to add custom stuff to the core unless most partners need it. This could be a great fit for a community extension instead!

[leddie24]

@dmytrokirpa , thanks for the comment here. Closing this for now, originally thought this would be an added feature for Fluent UI when working with Casey Baker, but he's saying it's likely to be a custom instead of a PR for Fluent UI here.