From 58fd7d6010a545777e9aeef0cb880311cff1d0f9 Mon Sep 17 00:00:00 2001 From: Ian Sanders Date: Tue, 18 Feb 2025 16:35:42 +0000 Subject: [PATCH 1/3] Wrap `AvatarStack` avatars in `isolation: isolate` --- packages/react/src/AvatarStack/AvatarStack.module.css | 1 + packages/react/src/AvatarStack/AvatarStack.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index ea13c99ecae..e04fd0e51ce 100644 --- 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 index 8ce999b34ca..3034b1a022c 100644 --- 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; From 9f25af1040de973606c748aaf0357dae4f91d9b4 Mon Sep 17 00:00:00 2001 From: Ian Sanders Date: Tue, 18 Feb 2025 11:43:12 -0500 Subject: [PATCH 2/3] Create strange-pets-stare.md --- .changeset/strange-pets-stare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/strange-pets-stare.md diff --git a/.changeset/strange-pets-stare.md b/.changeset/strange-pets-stare.md new file mode 100644 index 00000000000..7470f76a8a1 --- /dev/null +++ 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 From 03da6299ea00c01bdd99d4ff36080e4a18b9da7d Mon Sep 17 00:00:00 2001 From: Ian Sanders Date: Tue, 18 Feb 2025 19:10:30 +0000 Subject: [PATCH 3/3] Snap! --- .../react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap index 8b0b980e5d3..dfd6620cea5 100644 --- 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; }