Adding Avatar activity badge

[sophialee0416]

Platforms Impacted

• iOS
• macOS

Description of changes

Binary change:

File	Before	After	Delta
libFluentUI.a	28,908,720 bytes	28,977,656 bytes	+68,936 bytes
Avatar	661,536 bytes	590,176 bytes	-71,360 bytes
AvatarModifiers	36,352 bytes	41,688 bytes	+5,336 bytes
AvatarTokenSet	120,768 bytes	136,816 bytes	+16,048 bytes
AvatarGroup	362,344 bytes	362,520 bytes	+176 bytes
ShapeCutout	36,448 bytes	39,280 bytes	+2832 bytes

• AvatarDemoController: Added toggle for displaying circle and square activity badges
• AvatarDemoController_SwiftUI: Added Picker for MSFAvatarActivityStyles and a toggle to add a custom image
• Avatar: Added new activityStyle and activityImage property in the Avatar state, removed unused PresenceCutout
• AvatarModifiers: Added new modifier to create an activity badge
• AvatarTokenSet: Moved a few existing tokens to constant, added new tokens for activity badge
• ShapeCutout: Renamed from CircleCutout to give more shape creation versatility
• AvatarGroup: Updated CircleCutout usage to ShapeCutout

Note: Activity is only displayed in .size40 and .size56, and in the .default style with image/initials.

Verification

LTR	RTL

Presence (no change)

Before	After

TableViewCell (no change)

Before	After

AvatarGroup (no change)

Pull request checklist

This PR has considered:

• Light and Dark appearances
• iOS supported versions (all major versions greater than or equal current target deployment version)
• VoiceOver and Keyboard Accessibility
• Internationalization and Right to Left layouts
• Different resolutions (1x, 2x, 3x)
• Size classes and window sizes (iPhone vs iPad, notched devices, multitasking, different window sizes, etc)
• iPad Pointer interaction
• SwiftUI consumption (validation or new demo scenarios needed)
• Objective-C exposure (provide it only if needed)

Microsoft Reviewers: Open in CodeFlow

[edjamesmsft]

There is a fair amount of binary size increase unaccounted for - do you know where the rest might be coming from?

[harrieshin]

avatargroup animation verification?

[edjamesmsft]

I notice on the dark background screenshots, the cutout color isn't the same color as the background of the image. Is that expected? I assume that's just an icon issue and outside the scope of this PR?

[sophialee0416]

I notice on the dark background screenshots, the cutout color isn't the same color as the background of the image. Is that expected? I assume that's just an icon issue and outside the scope of this PR?

Not an icon issue, intentional & by design

[edjamesmsft]

I notice on the dark background screenshots, the cutout color isn't the same color as the background of the image. Is that expected? I assume that's just an icon issue and outside the scope of this PR?

Not an icon issue, intentional & by design

Ah I see the background of the icon is customizable. For the purposes of making that clear, I might choose a more different background color, so it looks more intentional. At the moment the colors are close enough that it looks potentially accidental. But not a blocker.

[sophialee0416]

I notice on the dark background screenshots, the cutout color isn't the same color as the background of the image. Is that expected? I assume that's just an icon issue and outside the scope of this PR?

Not an icon issue, intentional & by design

Ah I see the background of the icon is customizable. For the purposes of making that clear, I might choose a more different background color, so it looks more intentional. At the moment the colors are close enough that it looks potentially accidental. But not a blocker.

This is also default by design. On the demo controller you can choose to use an alternate background if you'd like to see the border.

[harrieshin]

make sure the avatar rings are fine too for both avatargroup and just avatar please!