From 1c040b55d43ae3e7c1a0bd8c08d23399f002c445 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 5 Sep 2023 13:39:14 -0400
Subject: [PATCH 1/2] disables transitions on .pc-AvatarItem when disableExpand
 is passed

---
 src/AvatarStack/AvatarStack.tsx                       | 11 ++++++-----
 src/__tests__/__snapshots__/AvatarStack.test.tsx.snap |  8 ++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/AvatarStack/AvatarStack.tsx b/src/AvatarStack/AvatarStack.tsx
index 1fd0e6321ed..e712a90ed98 100644
--- a/src/AvatarStack/AvatarStack.tsx
+++ b/src/AvatarStack/AvatarStack.tsx
@@ -49,11 +49,6 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     box-shadow: 0 0 0 var(--avatar-border-width) ${get('colors.canvas.default')};
     position: relative;
     overflow: hidden;
-    transition:
-      margin 0.2s ease-in-out,
-      opacity 0.2s ease-in-out,
-      visibility 0.2s ease-in-out,
-      box-shadow 0.1s ease-in-out;
 
     &:first-child {
       margin-left: 0;
@@ -142,6 +137,12 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
       opacity: 100%;
       visibility: visible;
       box-shadow: 0 0 0 4px ${get('colors.canvas.default')};
+      transition:
+        margin 0.2s ease-in-out,
+        opacity 0.2s ease-in-out,
+        visibility 0.2s ease-in-out,
+        box-shadow 0.1s ease-in-out;
+
       &:first-child {
         margin-left: 0;
       }
diff --git a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
index 91e02e8e91c..a6da88bd8c9 100644
--- a/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
@@ -35,8 +35,6 @@ exports[`Avatar renders consistently 1`] = `
   box-shadow: 0 0 0 var(--avatar-border-width) #ffffff;
   position: relative;
   overflow: hidden;
-  -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
-  transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
 }
 
 .c0 .pc-AvatarItem:first-child {
@@ -125,6 +123,8 @@ exports[`Avatar renders consistently 1`] = `
   opacity: 100%;
   visibility: visible;
   box-shadow: 0 0 0 4px #ffffff;
+  -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
+  transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
 }
 
 .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child {
@@ -197,8 +197,6 @@ exports[`Avatar respects alignRight props 1`] = `
   box-shadow: 0 0 0 var(--avatar-border-width) #ffffff;
   position: relative;
   overflow: hidden;
-  -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
-  transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
 }
 
 .c0 .pc-AvatarItem:first-child {
@@ -287,6 +285,8 @@ exports[`Avatar respects alignRight props 1`] = `
   opacity: 100%;
   visibility: visible;
   box-shadow: 0 0 0 4px #ffffff;
+  -webkit-transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
+  transition: margin 0.2s ease-in-out,opacity 0.2s ease-in-out,visibility 0.2s ease-in-out,box-shadow 0.1s ease-in-out;
 }
 
 .c0 .pc-AvatarStackBody:not(.pc-AvatarStack--disableExpand):hover .pc-AvatarItem:first-child {

From d0e05c947d17ea68b610c58c79749dc96dbd65ac Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Tue, 5 Sep 2023 13:53:44 -0400
Subject: [PATCH 2/2] adds changeset

---
 .changeset/breezy-insects-work.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/breezy-insects-work.md

diff --git a/.changeset/breezy-insects-work.md b/.changeset/breezy-insects-work.md
new file mode 100644
index 00000000000..f5fc407548e
--- /dev/null
+++ b/.changeset/breezy-insects-work.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Fixes a bug where children of AvatarStack would still show a transition when the component re-renders with a different number of children. Fixes https://github.com/primer/react/issues/3688
+
+<!-- Changed components: AvatarStack -->