From 391193e1b48dfa065394a86d6b2a0f879ce2d4e4 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Mon, 3 Aug 2026 11:02:24 -0700 Subject: [PATCH 1/4] update AvatarStack so that it doesnt reserve space when collapsed --- packages/react/src/AvatarStack/AvatarStack.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 3eedffd65da..86ccbf8fd06 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -241,7 +241,7 @@ } &:nth-child(n + 6) { - visibility: hidden; + display: none; opacity: 0; } } @@ -253,6 +253,7 @@ .AvatarItem { --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */ + display: flex; margin-inline-start: var(--base-size-4); visibility: visible; opacity: 1; From 3f6d9218d3510bf4e71193c14e206702dd78cfd1 Mon Sep 17 00:00:00 2001 From: "Brittany L. Houtz" <55068883+llastflowers@users.noreply.github.com> Date: Mon, 3 Aug 2026 11:17:24 -0700 Subject: [PATCH 2/4] Create fresh-ideas-worry.md --- .changeset/fresh-ideas-worry.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fresh-ideas-worry.md diff --git a/.changeset/fresh-ideas-worry.md b/.changeset/fresh-ideas-worry.md new file mode 100644 index 00000000000..978ad0f3640 --- /dev/null +++ b/.changeset/fresh-ideas-worry.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Update `AvatarStack` to not reserve space when collapsed From 2d6e28e17e14d14953fcce1688db8cd47196e257 Mon Sep 17 00:00:00 2001 From: llastflowers Date: Mon, 3 Aug 2026 12:29:26 -0700 Subject: [PATCH 3/4] change implementation to add position: absolute and keep visibility: hidden --- packages/react/src/AvatarStack/AvatarStack.module.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 86ccbf8fd06..353b99da440 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -241,7 +241,8 @@ } &:nth-child(n + 6) { - display: none; + position: absolute; + visibility: hidden; opacity: 0; } } @@ -253,7 +254,7 @@ .AvatarItem { --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */ - display: flex; + position: relative; margin-inline-start: var(--base-size-4); visibility: visible; opacity: 1; From 154cbc48bfcbbd692149a5a06bcc3ce31e2f1936 Mon Sep 17 00:00:00 2001 From: "Brittany L. Houtz" <55068883+llastflowers@users.noreply.github.com> Date: Mon, 3 Aug 2026 12:32:59 -0700 Subject: [PATCH 4/4] unrelated typo fix Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- packages/react/src/AvatarStack/AvatarStack.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css index 353b99da440..b14542b02ab 100644 --- a/packages/react/src/AvatarStack/AvatarStack.module.css +++ b/packages/react/src/AvatarStack/AvatarStack.module.css @@ -252,7 +252,7 @@ width: auto; .AvatarItem { - --mask-size: 100%; /* reset size of the mask to prevent unintentially clipping due to the additional size created by the border width */ + --mask-size: 100%; /* reset size of the mask to prevent unintentionally clipping due to the additional size created by the border width */ position: relative; margin-inline-start: var(--base-size-4);