479-user-pics-misaligned-in-issues-assignment-view (#2242)

JoshBowdenConcepts · jonrohan · web-flow · commit ef31fd988d52 · 2022-09-07T15:07:12.000-03:00
* 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 &lt;yes@jonrohan.codes&gt;

Co-authored-by: Jon Rohan &lt;yes@jonrohan.codes&gt;
diff --git a/.changeset/smooth-crabs-protect.md 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
@@ -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 {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/css": patch
 +---
++
 +This border change was made to ensure that assignee avatars would stack next to one another correctly.
Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@`
`56`	`56`	`// stylelint-enable selector-max-type`
`57`	`57`
`58`	`58`	`// Account for 4+ avatars`
`59`		`- &:nth-child(n+4) {`
	`59`	`+ &:nth-child(n + 4) {`
`60`	`60`	`display: none;`
`61`	`61`	`opacity: 0;`
`62`	`62`	`}`
`@@ -68,7 +68,7 @@`
`68`	`68`	`margin-right: 3px;`
`69`	`69`	`}`
`70`	`70`
`71`		`- .avatar:nth-child(n+4) {`
	`71`	`+ .avatar:nth-child(n + 4) {`
`72`	`72`	`display: flex;`
`73`	`73`	`opacity: 1;`
`74`	`74`	`}`
`@@ -118,6 +118,10 @@`
`118`	`118`	`// stylelint-disable-next-line primer/spacing`
`119`	`119`	`margin-left: 3px;`
`120`	`120`	`}`
	`121`	`+`
	`122`	`+ .avatar:not(:last-child) {`
	`123`	`+ border-left: 0;`
	`124`	`+ }`
`121`	`125`	`}`
`122`	`126`
`123`	`127`	`.avatar.avatar-more {`