Bug fix: ButtonGroup borders (#3198)

* fix hover borders * Create wicked-knives-sparkle.md * snaps * why so many snaps? * revert? * test(vrt): update snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Apr 20, 2023 · a273748 · a273748
1 parent 14c00e7
commit a273748
Show file tree

Hide file tree

Showing 12 changed files with 11 additions and 18 deletions.
diff --git a/.changeset/wicked-knives-sparkle.md b/.changeset/wicked-knives-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: `ButtonGroup` borders show incorrectly on hover
diff --git a/...uttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png b/...uttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-colorblind-linux.png
diff --git a/...ts/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png b/...ts/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-dimmed-linux.png
diff --git a/...onGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-high-contrast-linux.png b/...onGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-high-contrast-linux.png
diff --git a/...omponents/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png b/...omponents/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-linux.png
diff --git a/...uttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png b/...uttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-dark-tritanopia-linux.png
diff --git a/...ttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png b/...ttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-colorblind-linux.png
diff --git a/...nGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-high-contrast-linux.png b/...nGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-high-contrast-linux.png
diff --git a/...mponents/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png b/...mponents/ButtonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-linux.png
diff --git a/...ttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png b/...ttonGroup.test.ts-snapshots/ButtonGroup-Icon-Buttons-light-tritanopia-linux.png
diff --git a/src/ButtonGroup/ButtonGroup.tsx b/src/ButtonGroup/ButtonGroup.tsx
@@ -9,29 +9,23 @@ const ButtonGroup = styled.div`
   isolation: isolate;
 
   && > * {
+    margin-inline-end: -1px;
     position: relative;
-    border-right-width: 0;
     border-radius: 0;
 
     :first-child {
       border-top-left-radius: ${get('radii.2')};
       border-bottom-left-radius: ${get('radii.2')};
-      margin-right: 0;
-    }
-
-    :not(:first-child) {
-      margin-left: 0;
-      margin-right: 0;
     }
 
     :last-child {
-      border-right-width: 1px;
       border-top-right-radius: ${get('radii.2')};
       border-bottom-right-radius: ${get('radii.2')};
     }
 
     :focus,
-    :active {
+    :active,
+    :hover {
       z-index: 1;
     }
   }

diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -293,30 +293,24 @@ exports[`ButtonGroup renders consistently 1`] = `
 }
 
 .c0.c0 > * {
+  margin-inline-end: -1px;
   position: relative;
-  border-right-width: 0;
   border-radius: 0;
 }
 
 .c0.c0 > *:first-child {
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
-  margin-right: 0;
-}
-
-.c0.c0 > *:not(:first-child) {
-  margin-left: 0;
-  margin-right: 0;
 }
 
 .c0.c0 > *:last-child {
-  border-right-width: 1px;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
 }
 
 .c0.c0 > *:focus,
-.c0.c0 > *:active {
+.c0.c0 > *:active,
+.c0.c0 > *:hover {
   z-index: 1;
 }