From edc0168ea0a9747d7cbe06f0f2973a8f10937db5 Mon Sep 17 00:00:00 2001
From: Mike Perrotti <mperrotti@github.com>
Date: Wed, 6 Sep 2023 10:19:41 -0400
Subject: [PATCH] Disables transition on AvatarStack children that are added
 after initial render (#3709)

* disables transitions on .pc-AvatarItem when disableExpand is passed

* adds changeset
---
 .changeset/breezy-insects-work.md                     |  7 +++++++
 src/AvatarStack/AvatarStack.tsx                       | 11 ++++++-----
 src/__tests__/__snapshots__/AvatarStack.test.tsx.snap |  8 ++++----
 3 files changed, 17 insertions(+), 9 deletions(-)
 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 -->
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 {