[WIP/Draft] Number badge motion

[leddie24]

Previous Behavior

New Behavior

WIP, adding later

Related Issue(s)

• Fixes #

[github-actions]

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

vr-tests-react-components/Avatar Converged 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png	6	Changed
vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png	5	Changed

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

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

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png	621	Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	17	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.disabled input hover.chromium.png	1319	Changed
vr-tests-react-components/TagPicker.disabled - RTL.chromium.png	635	Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png	677	Changed

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

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-badge CounterBadge	25.847 kB 8.444 kB	27.769 kB 9.112 kB	1.922 kB 668 B
react-components react-components: entire library	1.286 MB 322.184 kB	1.288 MB 322.895 kB	1.915 kB 711 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar Avatar	48.532 kB 15.449 kB
react-avatar AvatarGroup	18.323 kB 7.316 kB
react-avatar AvatarGroupItem	61.784 kB 19.45 kB
react-badge Badge	25.067 kB 8.17 kB
react-badge PresenceBadge	24.948 kB 9.083 kB
react-components react-components: Button, FluentProvider & webLightTheme	70.309 kB 20.074 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.447 kB 68.609 kB
react-components react-components: FluentProvider & webLightTheme	43.608 kB 14.165 kB
react-persona Persona	55.423 kB 17.327 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-table DataGrid	160.182 kB 45.256 kB
react-table Table (Primitives only)	41.87 kB 13.485 kB
react-table Table as DataGrid	131.397 kB 36.257 kB
react-table Table (Selection only)	69.785 kB 19.62 kB
react-table Table (Sort only)	68.428 kB 19.236 kB
react-tag-picker @fluentui/react-tag-picker - package	187.407 kB 56.165 kB
react-tags InteractionTag	14.539 kB 5.779 kB
react-tags Tag	30.394 kB 9.712 kB
react-tags TagGroup	83.084 kB 24.483 kB
react-timepicker-compat TimePicker	109.023 kB 36.011 kB
react-tree FlatTree	148.508 kB 42.451 kB
react-tree PersonaFlatTree	150.334 kB 42.836 kB
react-tree PersonaTree	146.394 kB 41.664 kB
react-tree Tree	144.574 kB 41.291 kB

_{🤖 This report was generated against b0c43c75abb8cacaa802f8e14e3ab9e1947794fe}

[github-actions]

Pull request demo site: URL