fix(react-avatar): Remove gaps between AvatarGroupItem/OveflowButton and its outline

change/@fluentui-react-avatar-63cc4116-6a81-4306-9fee-0415db150eae.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Removing gaps between ::after pseudo-element and AvatarGroupItem/AvatarGroupPopover.\"",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItemStyles.ts

@@ -59,84 +59,14 @@ const useOverflowLabelStyles = makeStyles({
  * Styles for the stack layout
  */
 const useStackStyles = makeStyles({
-  base: {
-    '&::after': {
-      content: "''",
-      position: 'absolute',
-      display: 'inline-flex',
-      // Border is used instead of outline due to a bug in webkit browsers where border-radius is ignored in outline.
-      ...shorthands.borderColor(tokens.colorNeutralBackground2),
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
-      ...shorthands.borderStyle('solid'),
-
-      '@media (forced-colors: active)': {
-        forcedColorAdjust: 'none',
-      },
-    },
-  },
-  overflowButton: {
-    '&:focus::after': {
-      ...shorthands.borderColor('transparent'),
-    },
-  },
   thick: {
-    '&::after': {
-      width: '100%',
-      height: '100%',
-      left: `calc(-1 * ${tokens.strokeWidthThick})`,
-      top: `calc(-1 * ${tokens.strokeWidthThick})`,
-      ...shorthands.borderWidth(tokens.strokeWidthThick),
-    },
+    boxShadow: `0 0 0 ${tokens.strokeWidthThick} ${tokens.colorNeutralBackground2}`,
   },
   thicker: {
-    '&::after': {
-      width: '100%',
-      height: '100%',
-      left: `calc(-1 * ${tokens.strokeWidthThicker})`,
-      top: `calc(-1 * ${tokens.strokeWidthThicker})`,
-      ...shorthands.borderWidth(tokens.strokeWidthThicker),
-    },
+    boxShadow: `0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorNeutralBackground2}`,
   },
   thickest: {
-    '&::after': {
-      width: '100%',
-      height: '100%',
-      left: `calc(-1 * ${tokens.strokeWidthThickest})`,
-      top: `calc(-1 * ${tokens.strokeWidthThickest})`,
-      ...shorthands.borderWidth(tokens.strokeWidthThickest),
-    },
-  },
-  borderThin: {
-    '&::after': {
-      width: `calc(100% + ${tokens.strokeWidthThin} * 2)`,
-      height: `calc(100% + ${tokens.strokeWidthThin} * 2)`,
-      left: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,
-      top: `calc(-1 * (${tokens.strokeWidthThick} + ${tokens.strokeWidthThin}))`,
-    },
-  },
-  borderThick: {
-    '&::after': {
-      width: `calc(100% + ${tokens.strokeWidthThick} * 2)`,
-      height: `calc(100% + ${tokens.strokeWidthThick} * 2)`,
-      left: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,
-      top: `calc(-1 * ${tokens.strokeWidthThick} * 2)`,
-    },
-  },
-  borderThicker: {
-    '&::after': {
-      width: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,
-      height: `calc(100% + ${tokens.strokeWidthThicker} * 2)`,
-      left: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,
-      top: `calc(-1 * ${tokens.strokeWidthThicker} * 2)`,
-    },
-  },
-  borderThickest: {
-    '&::after': {
-      width: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,
-      height: `calc(100% + ${tokens.strokeWidthThickest} * 2)`,
-      left: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,
-      top: `calc(-1 * ${tokens.strokeWidthThickest} * 2)`,
-    },
+    boxShadow: `0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorNeutralBackground2}`,
   },
   xxs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXXS})` } },
   xs: { '&:not(:first-child)': { marginLeft: `calc(-1 * ${tokens.spacingHorizontalXS})` } },
@@ -265,19 +195,13 @@ export const useAvatarGroupItemStyles_unstable = (state: AvatarGroupItemState):
  * Hook for getting the className for the children of AvatarGroup. This hook will provide the spacing and outlines
  * needed for each layout.
  */
-export const useGroupChildClassName = (
-  layout: AvatarGroupProps['layout'],
-  size: AvatarSizes,
-  isOverflowButton?: boolean,
-): string => {
+export const useGroupChildClassName = (layout: AvatarGroupProps['layout'], size: AvatarSizes): string => {
   const stackStyles = useStackStyles();
   const spreadStyles = useSpreadStyles();
   const layoutClasses = [];
 
   if (size) {
     if (layout === 'stack') {
-      layoutClasses.push(stackStyles.base);
-
       if (size < 56) {
         layoutClasses.push(stackStyles.thick);
       } else if (size < 72) {
@@ -286,22 +210,6 @@ export const useGroupChildClassName = (
         layoutClasses.push(stackStyles.thickest);
       }
 
-      // When the child is an overflowButton, we have to calculate the overflowButton's border + width + outline width
-      // since the ::after pseudo-element doesn't take the overflowButton's border for its size.
-      if (isOverflowButton) {
-        layoutClasses.push(stackStyles.overflowButton);
-
-        if (size < 36) {
-          layoutClasses.push(stackStyles.borderThin);
-        } else if (size < 56) {
-          layoutClasses.push(stackStyles.borderThick);
-        } else if (size < 72) {
-          layoutClasses.push(stackStyles.borderThicker);
-        } else {
-          layoutClasses.push(stackStyles.borderThickest);
-        }
-      }
-
       if (size < 24) {
         layoutClasses.push(stackStyles.xxs);
       } else if (size < 48) {

packages/react-components/react-avatar/src/components/AvatarGroupPopover/useAvatarGroupPopoverStyles.ts

@@ -118,7 +118,7 @@ export const useAvatarGroupPopoverStyles_unstable = (state: AvatarGroupPopoverSt
   const triggerButtonStyles = useTriggerButtonStyles();
   const contentStyles = useContentStyles();
   const popoverSurfaceStyles = usePopoverSurfaceStyles();
-  const groupChildClassName = useGroupChildClassName(layout, size, true);
+  const groupChildClassName = useGroupChildClassName(layout, size);
 
   const triggerButtonClasses = [];