Adjust css for when link wrapper occurs

primer · Nov 19, 2024 · 5ba219d · 5ba219d
1 parent b1ce61b
commit 5ba219d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/packages/react/src/AvatarStack/AvatarStack.module.css b/packages/react/src/AvatarStack/AvatarStack.module.css
@@ -76,7 +76,7 @@
     justify-content: flex-end;
 
     .AvatarItem {
-      margin-left: 0;
+      margin-left: 0 !important;
 
       &:first-child {
         margin-right: 0;
@@ -99,11 +99,11 @@
       &:not([data-disable-expand]):hover,
       &:not([data-disable-expand]):focus-within {
         .AvatarItem {
-          margin-right: var(--base-size-4);
-          margin-left: 0;
+          margin-right: var(--base-size-4) !important;
+          margin-left: 0 !important;
 
           &:first-child {
-            margin-right: 0;
+            margin-right: 0 !important;
           }
         }
       }
@@ -124,12 +124,16 @@
   --avatarSize-regular: var(--avatar-stack-size);
 
   position: relative;
+  display: flex;
   width: var(--avatar-stack-size);
   height: var(--avatar-stack-size);
   overflow: hidden;
   flex-shrink: 0;
-  /* stylelint-disable-next-line primer/box-shadow */
-  box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default);
+
+  &:is(img) {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: 0 0 0 var(--avatar-border-width) var(--bgColor-default);
+  }
 
   &:first-child {
     z-index: 10;

diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx
@@ -49,10 +49,14 @@ const AvatarStackWrapper = toggleStyledComponent(
       flex-shrink: 0;
       height: var(--avatar-stack-size);
       width: var(--avatar-stack-size);
-      box-shadow: 0 0 0 var(--avatar-border-width)
-        ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))};
       position: relative;
       overflow: hidden;
+      display: flex;
+
+      &:is(img) {
+        box-shadow: 0 0 0 var(--avatar-border-width)
+          ${props => (props.count === 1 ? get('colors.avatar.border') : get('colors.canvas.default'))};
+      }
 
       &:first-child {
         margin-left: 0;