fix(popover): update caret styles to offset ::after element (#3204)

Co-authored-by: joshblack <[email protected]>
primer · Nov 21, 2024 · f24feab · f24feab
1 parent a91aa93
commit f24feab
Show file tree

Hide file tree

Showing 10 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/strong-donuts-flash.md b/.changeset/strong-donuts-flash.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Update caret styles for Popover to correctly position caret in different orientations
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/beta/popover/bottom_left/default.png b/...enshots/snapshots.test.ts-snapshots/primer/beta/popover/bottom_left/default.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/beta/popover/bottom_left/focused.png b/...enshots/snapshots.test.ts-snapshots/primer/beta/popover/bottom_left/focused.png
diff --git a/...nshots/snapshots.test.ts-snapshots/primer/beta/popover/bottom_right/default.png b/...nshots/snapshots.test.ts-snapshots/primer/beta/popover/bottom_right/default.png
diff --git a/...nshots/snapshots.test.ts-snapshots/primer/beta/popover/bottom_right/focused.png b/...nshots/snapshots.test.ts-snapshots/primer/beta/popover/bottom_right/focused.png
diff --git a/...creenshots/snapshots.test.ts-snapshots/primer/beta/popover/top_left/default.png b/...creenshots/snapshots.test.ts-snapshots/primer/beta/popover/top_left/default.png
diff --git a/...creenshots/snapshots.test.ts-snapshots/primer/beta/popover/top_left/focused.png b/...creenshots/snapshots.test.ts-snapshots/primer/beta/popover/top_left/focused.png
diff --git a/...reenshots/snapshots.test.ts-snapshots/primer/beta/popover/top_right/default.png b/...reenshots/snapshots.test.ts-snapshots/primer/beta/popover/top_right/default.png
diff --git a/...reenshots/snapshots.test.ts-snapshots/primer/beta/popover/top_right/focused.png b/...reenshots/snapshots.test.ts-snapshots/primer/beta/popover/top_right/focused.png
diff --git a/app/components/primer/beta/popover.pcss b/app/components/primer/beta/popover.pcss
@@ -94,6 +94,7 @@
 
   &::after {
     right: var(--base-size-20);
+    margin-right: 1px;
   }
 }
 
@@ -111,6 +112,7 @@
 
   &::after {
     left: var(--base-size-24);
+    margin-left: 1px;
   }
 }
 
@@ -165,6 +167,7 @@
 
   &::after {
     left: -14px;
+    margin-bottom: 1px;
     /* stylelint-disable-next-line primer/colors */
     border-right-color: var(--overlay-bgColor);
   }
@@ -193,6 +196,7 @@
 
   &::after {
     bottom: var(--base-size-16);
+    margin-bottom: 1px;
   }
 }