Add subtle border to the avatar to match the CSS implementation (#2206)

* Add subtle border to the avatar to match the CSS implementation * Use the correct `avatar.border` instead. * Add changelog * Update some snapshot tests * Update snapshot * rm useAnchoredPosition test update Co-authored-by: Mike Perrotti <mperrotti@github.com>
primer · Sep 7, 2022 · 3a38e6e · 3a38e6e
1 parent 679e699
commit 3a38e6e
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/.changeset/twelve-fireants-approve.md b/.changeset/twelve-fireants-approve.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add missing border on avatars
diff --git a/src/Avatar.tsx b/src/Avatar.tsx
@@ -31,9 +31,9 @@ const Avatar = styled.img.attrs<StyledAvatarProps>(props => ({
   line-height: ${get('lineHeights.condensedUltra')};
   vertical-align: middle;
   border-radius: ${props => getBorderRadius(props)};
+  box-shadow: 0 0 0 1px ${get('colors.avatar.border')};
   ${sx}
 `
-
 Avatar.defaultProps = {
   size: 20,
   alt: '',

diff --git a/src/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Avatar renders consistently 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
 }
 
 <img

diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -223,6 +224,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -431,6 +433,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -639,6 +642,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -847,6 +851,7 @@ exports[`Token components AvatarToken renders all sizes 5`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -1138,6 +1143,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -1265,6 +1271,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }