fix: Make border around Avatar's badge transparent, not a solid color

change/@fluentui-react-avatar-e8c58b22-266b-4609-9169-1a26cdef500c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Make border around badge transparent, not a solid color",
+  "packageName": "@fluentui/react-avatar",
+  "email": "behowell@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx

@@ -88,7 +88,7 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElemen
 
   const badge: AvatarState['badge'] = resolveShorthand(props.badge, {
     defaultProps: {
-      size: getBadgeSize(size),
+      size: getBadgeSize(size).name,
       id: baseId + '__badge',
     },
   });
@@ -152,19 +152,19 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElemen
   };
 };
 
-const getBadgeSize = (size: AvatarState['size']) => {
+export const getBadgeSize = (size: AvatarState['size']) => {
   if (size >= 96) {
-    return 'extra-large';
+    return { name: 'extra-large', value: 28 } as const;
   } else if (size >= 64) {
-    return 'large';
+    return { name: 'large', value: 20 } as const;
   } else if (size >= 56) {
-    return 'medium';
+    return { name: 'medium', value: 16 } as const;
   } else if (size >= 40) {
-    return 'small';
+    return { name: 'small', value: 12 } as const;
   } else if (size >= 28) {
-    return 'extra-small';
+    return { name: 'extra-small', value: 10 } as const;
   } else {
-    return 'tiny';
+    return { name: 'tiny', value: 6 } as const;
   }
 };
 

packages/react-components/react-avatar/src/components/Avatar/useAvatarStyles.ts

@@ -1,7 +1,8 @@
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { AvatarSlots, AvatarState } from './Avatar.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import type { AvatarSize, AvatarSlots, AvatarState } from './Avatar.types';
+import { getBadgeSize } from './useAvatar';
 
 export const avatarClassNames: SlotClassNames<AvatarSlots> = {
   root: 'fui-Avatar',
@@ -23,6 +24,24 @@ const animations = {
   nullEasing: tokens.curveLinear,
 };
 
+const badgeBorderClip = (size: AvatarSize) => {
+  const radius = getBadgeSize(size).value / 2;
+  const width = size >= 64 ? /*tokens.strokeWidthThick =*/ 2 : /*tokens.strokeWidthThin =*/ 1;
+
+  // This path will clip out ONLY the outline around the badge.
+  // It is a large square with a donut punched out that surrounds the badge.
+  return (
+    'path("' +
+    // A box that has a {size} margin around the avatar. The margin is to avoid clipping the ring and/or shadow.
+    `M -${size},-${size} H ${2 * size} V ${2 * size} H -${size} V -${size} ` +
+    // A circle that is the size of the badge.
+    `M ${size},${size - radius} a ${radius} ${radius} 0 1 0 0,0.1 ` +
+    // A circle that is bigger than the badge by the width of the line.
+    `m ${width},0 a ${radius + width} ${radius + width} 0 1 0 0,0.1 ` +
+    'Z")'
+  );
+};
+
 const useRootClassName = makeResetStyles({
   display: 'inline-block',
   flexShrink: 0,
@@ -174,15 +193,25 @@ const useStyles = makeStyles({
     },
   },
 
+  'badgeBorderClip-16': { clipPath: badgeBorderClip(16) },
+  'badgeBorderClip-20': { clipPath: badgeBorderClip(20) },
+  'badgeBorderClip-24': { clipPath: badgeBorderClip(24) },
+  'badgeBorderClip-28': { clipPath: badgeBorderClip(28) },
+  'badgeBorderClip-32': { clipPath: badgeBorderClip(32) },
+  'badgeBorderClip-36': { clipPath: badgeBorderClip(36) },
+  'badgeBorderClip-40': { clipPath: badgeBorderClip(40) },
+  'badgeBorderClip-48': { clipPath: badgeBorderClip(48) },
+  'badgeBorderClip-56': { clipPath: badgeBorderClip(56) },
+  'badgeBorderClip-64': { clipPath: badgeBorderClip(64) },
+  'badgeBorderClip-72': { clipPath: badgeBorderClip(72) },
+  'badgeBorderClip-96': { clipPath: badgeBorderClip(96) },
+  'badgeBorderClip-120': { clipPath: badgeBorderClip(120) },
+  'badgeBorderClip-128': { clipPath: badgeBorderClip(128) },
+
   badge: {
     position: 'absolute',
     bottom: 0,
     right: 0,
-    boxShadow: `0 0 0 ${tokens.strokeWidthThin} ${tokens.colorNeutralBackground1}`,
-  },
-
-  badgeLarge: {
-    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground1}`,
   },
 
   icon12: { fontSize: '12px' },
@@ -446,15 +475,14 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {
     }
   }
 
+  if (state.badge) {
+    rootClasses.push(styles[`badgeBorderClip-${size}`]);
+  }
+
   state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
 
   if (state.badge) {
-    state.badge.className = mergeClasses(
-      avatarClassNames.badge,
-      styles.badge,
-      size >= 64 && styles.badgeLarge,
-      state.badge.className,
-    );
+    state.badge.className = mergeClasses(avatarClassNames.badge, styles.badge, state.badge.className);
   }
 
   if (state.image) {