Wrap AvatarStack avatars in isolation: isolate to create a new stacking context (#5705)

* Wrap `AvatarStack` avatars in `isolation: isolate`

* Create strange-pets-stare.md

* Snap!

Author: iansan5653

.changeset/strange-pets-stare.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Fix `AvatarStack` stacking `z-index` bugs by creating a new stacking context around the component

packages/react/src/AvatarStack/AvatarStack.module.css

@@ -9,6 +9,7 @@
   display: flex;
   min-width: var(--avatar-stack-size);
   height: var(--avatar-stack-size);
+  isolation: isolate;
 
   &:where([data-responsive]) {
     @media screen and (--viewportRange-narrow) {

packages/react/src/AvatarStack/AvatarStack.tsx

@@ -36,6 +36,7 @@ const AvatarStackWrapper = toggleStyledComponent(
     position: relative;
     height: var(--avatar-stack-size);
     min-width: var(--avatar-stack-size);
+    isolation: isolate;
 
     .pc-AvatarStackBody {
       display: flex;

packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`Avatar respects alignRight props 1`] = `
   position: relative;
   height: var(--avatar-stack-size);
   min-width: var(--avatar-stack-size);
+  isolation: isolate;
   --avatar-stack-size: 20px;
 }