Disables transition on AvatarStack children that are added after init…

…ial render (#3709)

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

* adds changeset

.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 -->

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;
       }

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 {