Skip to content

Fix box shadow on AvatarPair - #499

Merged
josepmartins merged 2 commits into
mainfrom
josepmartins/fix-avatarpair-shadow
Feb 17, 2023
Merged

josepmartins merged 2 commits into
mainfrom
josepmartins/fix-avatarpair-shadow

Conversation

@josepmartins

@josepmartins josepmartins commented Feb 17, 2023 •

Copy link
Copy Markdown
Contributor

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
Screenshot 2023-02-17 at 10 48 22

After
Screenshot 2023-02-17 at 11 13 40

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

@josepmartins
josepmartins requested a review from a team as a code owner February 17, 2023 10:16
@changeset-bot

changeset-bot Bot commented Feb 17, 2023 •

Copy link
Copy Markdown

πŸ¦‹ 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

github-actions Bot commented Feb 17, 2023 •

Copy link
Copy Markdown
Contributor
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

github-actions Bot commented Feb 17, 2023 •

Copy link
Copy Markdown
Contributor

🟒 No design token changes found

@josepmartins josepmartins changed the title Fix border shadow on AvatarPair Fix box shadow on AvatarPair Feb 17, 2023
@josepmartins
josepmartins temporarily deployed to github-pages February 17, 2023 10:21 — with GitHub Actions Inactive
@github-actions
github-actions Bot temporarily deployed to storybook-preview February 17, 2023 10:21 Inactive
@github-actions
github-actions Bot temporarily deployed to storybook-preview February 17, 2023 10:35 Inactive

@lukasoppermann lukasoppermann left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great spotting this. πŸ‘

@josepmartins
josepmartins merged commit f731161 into main Feb 17, 2023
@josepmartins
josepmartins deleted the josepmartins/fix-avatarpair-shadow branch February 17, 2023 11:09
@primer-css primer-css mentioned this pull request Feb 17, 2023

This branch was previously deployed

2 inactive deployments
storybook-preview β€” 19d262d3 Deployed Feb 17, 2023 by github-actions[bot]
github-pages β€” 19d262d3 Deployed Feb 17, 2023 by josepmartins
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants