Fix box shadow on AvatarPair

[josepmartins]

Summary

Fixing a box-shadow bug in the AvatarPair children. The shadow was relatively positioned using offset-x and offset-y values (-2px). This PR uses a spread-radius of 2px instead, the same styles we use on the Avatar box-shadow here. This works both for non-square and square variants.

Before

After

List of notable changes:

• updated AvatarPair box shadow properties

Steps to test:

1. Open https://primer.style/react/AvatarPair#examples
2. Check the avatar pair children has an off box-shadow
3. Change values in dev tools
4. Verify that # behaves as described in the pull request description

Contributor checklist:

• All new and existing CI checks pass
• Tests prove that the feature works and covers both happy and unhappy paths
• Any drop in coverage, breaking changes or regressions have been documented above
• All developer debugging and non-functional logging has been removed
• Related issues have been referenced in the PR description

Reviewer checklist:

• Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
• Check that tests prove the feature works and covers both happy and unhappy paths
• Check that there aren't other open Pull Requests for the same update/change
• Verify the design tokens changed in this PR are expected using the diffing results in this PR

[changeset-bot]

🦋 Changeset detected

Latest commit: 19d262d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Variables changed

--- base/dist/scss/colors/_dark.scss	2023-02-17 10:30:53.971995925 +0000
+++ dist/scss/colors/_dark.scss	2023-02-17 10:29:47.896537184 +0000
@@ -159,3 +159,3 @@
     --color-avatar-stack-fade-more: #21262d;
-    --color-avatar-child-shadow: -2px -2px 0 #0d1117;
+    --color-avatar-child-shadow: 0 0 0 2px #0d1117;
     --color-topic-tag-border: rgba(0,0,0,0);
--- base/dist/scss/colors/_dark_colorblind.scss	2023-02-17 10:30:53.987995793 +0000
+++ dist/scss/colors/_dark_colorblind.scss	2023-02-17 10:29:47.912537056 +0000
@@ -159,3 +159,3 @@
     --color-avatar-stack-fade-more: #21262d;
-    --color-avatar-child-shadow: -2px -2px 0 #0d1117;
+    --color-avatar-child-shadow: 0 0 0 2px #0d1117;
     --color-topic-tag-border: rgba(0,0,0,0);
--- base/dist/scss/colors/_dark_dimmed.scss	2023-02-17 10:30:53.975995892 +0000
+++ dist/scss/colors/_dark_dimmed.scss	2023-02-17 10:29:47.904537120 +0000
@@ -159,3 +159,3 @@
     --color-avatar-stack-fade-more: #373e47;
-    --color-avatar-child-shadow: -2px -2px 0 #22272e;
+    --color-avatar-child-shadow: 0 0 0 2px #22272e;
     --color-topic-tag-border: rgba(0,0,0,0);
--- base/dist/scss/colors/_dark_high_contrast.scss	2023-02-17 10:30:53.983995826 +0000
+++ dist/scss/colors/_dark_high_contrast.scss	2023-02-17 10:29:47.908537088 +0000
@@ -159,3 +159,3 @@
     --color-avatar-stack-fade-more: #272b33;
-    --color-avatar-child-shadow: -2px -2px 0 #0a0c10;
+    --color-avatar-child-shadow: 0 0 0 2px #0a0c10;
     --color-topic-tag-border: #409eff;
--- base/dist/scss/colors/_dark_tritanopia.scss	2023-02-17 10:30:53.991995760 +0000
+++ dist/scss/colors/_dark_tritanopia.scss	2023-02-17 10:29:47.916537024 +0000
@@ -159,3 +159,3 @@
     --color-avatar-stack-fade-more: #21262d;
-    --color-avatar-child-shadow: -2px -2px 0 #0d1117;
+    --color-avatar-child-shadow: 0 0 0 2px #0d1117;
     --color-topic-tag-border: rgba(0,0,0,0);
--- base/dist/scss/colors/_light.scss	2023-02-17 10:30:53.947996123 +0000
+++ dist/scss/colors/_light.scss	2023-02-17 10:29:47.868537408 +0000
@@ -159,3 +159,3 @@
     --color-avatar-stack-fade-more: #d0d7de;
-    --color-avatar-child-shadow: -2px -2px 0 rgba(255,255,255,0.8);
+    --color-avatar-child-shadow: 0 0 0 2px rgba(255,255,255,0.8);
     --color-topic-tag-border: rgba(0,0,0,0);
--- base/dist/scss/colors/_light_colorblind.scss	2023-02-17 10:30:53.959996024 +0000
+++ dist/scss/colors/_light_colorblind.scss	2023-02-17 10:29:47.892537216 +0000
@@ -159,3 +159,3 @@
     --color-avatar-stack-fade-more: #d0d7de;
-    --color-avatar-child-shadow: -2px -2px 0 rgba(255,255,255,0.8);
+    --color-avatar-child-shadow: 0 0 0 2px rgba(255,255,255,0.8);
     --color-topic-tag-border: rgba(0,0,0,0);
--- base/dist/scss/colors/_light_high_contrast.scss	2023-02-17 10:30:53.955996057 +0000
+++ dist/scss/colors/_light_high_contrast.scss	2023-02-17 10:29:47.884537280 +0000
@@ -159,3 +159,3 @@
     --color-avatar-stack-fade-more: #ced5dc;
-    --color-avatar-child-shadow: -2px -2px 0 rgba(255,255,255,0.8);
+    --color-avatar-child-shadow: 0 0 0 2px rgba(255,255,255,0.8);
     --color-topic-tag-border: #0349b4;
--- base/dist/scss/colors/_light_tritanopia.scss	2023-02-17 10:30:53.967995958 +0000
+++ dist/scss/colors/_light_tritanopia.scss	2023-02-17 10:29:47.896537184 +0000
@@ -159,3 +159,3 @@
     --color-avatar-stack-fade-more: #d0d7de;
-    --color-avatar-child-shadow: -2px -2px 0 rgba(255,255,255,0.8);
+    --color-avatar-child-shadow: 0 0 0 2px rgba(255,255,255,0.8);
     --color-topic-tag-border: rgba(0,0,0,0);

[github-actions]

🟢 No design token changes found

[lukasoppermann]

Great spotting this. 👍