Wrap AvatarStack avatars in isolation: isolate to create a new st…

…acking context (#5705) * Wrap `AvatarStack` avatars in `isolation: isolate` * Create strange-pets-stare.md * Snap!
primer · Feb 26, 2025 · 2857a8e · 2857a8e
1 parent 0ecc07f
commit 2857a8e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 0 deletions.
diff --git a/.changeset/strange-pets-stare.md b/.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
diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/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) {

diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/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;

diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/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;
 }