From ef31fd988d52391317cc8982caf06ef45732ca70 Mon Sep 17 00:00:00 2001 From: Josh Bowden <31220082+JoshBowdenConcepts@users.noreply.github.com> Date: Wed, 7 Sep 2022 14:07:12 -0400 Subject: [PATCH] 479-user-pics-misaligned-in-issues-assignment-view (#2242) * 479-user-pics-misaligned-in-issues-assignment-view * Update avatar-stack.scss - Not last child means that each stacking avatar would remove the border-right which is necessary to stack correctly. The presentational order is right to left not left to right. * Create smooth-crabs-protect.md * Update avatar-stack.scss - Fixed pointer to the anchor element * Update .changeset/smooth-crabs-protect.md - removed branch name from changeset Co-authored-by: Jon Rohan Co-authored-by: Jon Rohan --- .changeset/smooth-crabs-protect.md | 5 +++++ src/avatars/avatar-stack.scss | 8 ++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 .changeset/smooth-crabs-protect.md diff --git a/.changeset/smooth-crabs-protect.md b/.changeset/smooth-crabs-protect.md new file mode 100644 index 0000000000..60bdb1d01e --- /dev/null +++ b/.changeset/smooth-crabs-protect.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +This border change was made to ensure that assignee avatars would stack next to one another correctly. diff --git a/src/avatars/avatar-stack.scss b/src/avatars/avatar-stack.scss index c7c7b1e209..5b189a3809 100644 --- a/src/avatars/avatar-stack.scss +++ b/src/avatars/avatar-stack.scss @@ -56,7 +56,7 @@ // stylelint-enable selector-max-type // Account for 4+ avatars - &:nth-child(n+4) { + &:nth-child(n + 4) { display: none; opacity: 0; } @@ -68,7 +68,7 @@ margin-right: 3px; } - .avatar:nth-child(n+4) { + .avatar:nth-child(n + 4) { display: flex; opacity: 1; } @@ -118,6 +118,10 @@ // stylelint-disable-next-line primer/spacing margin-left: 3px; } + + .avatar:not(:last-child) { + border-left: 0; + } } .avatar.avatar-more {