Bug fix: ButtonGroup hover causes wiggly buttons (#2933)

* remove border size state changes * snaps * Create .changeset/cuddly-cycles-refuse.md
primer · Feb 24, 2023 · 81ed540 · 81ed540
1 parent 533f0b4
commit 81ed540
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 22 deletions.
diff --git a/.changeset/cuddly-cycles-refuse.md b/.changeset/cuddly-cycles-refuse.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: ButtonGroup hover state causes buttons to shift horizontally
diff --git a/src/ButtonGroup.tsx b/src/ButtonGroup.tsx
@@ -30,15 +30,6 @@ const ButtonGroup = styled.div`
       border-bottom-right-radius: ${get('radii.2')};
     }
 
-    :focus,
-    :active,
-    :hover {
-      border-right-width: 1px;
-      + * {
-        border-left-width: 0;
-      }
-    }
-
     :focus,
     :active {
       z-index: 1;

diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -315,18 +315,6 @@ exports[`ButtonGroup renders consistently 1`] = `
   border-bottom-right-radius: 6px;
 }
 
-.c0.c0 > *:focus,
-.c0.c0 > *:active,
-.c0.c0 > *:hover {
-  border-right-width: 1px;
-}
-
-.c0.c0 > *:focus + *,
-.c0.c0 > *:active + *,
-.c0.c0 > *:hover + * {
-  border-left-width: 0;
-}
-
 .c0.c0 > *:focus,
 .c0.c0 > *:active {
   z-index: 1;

diff --git a/src/stories/ButtonGroup.stories.tsx b/src/stories/ButtonGroup.stories.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
 import {Story, Meta} from '@storybook/react'
 import ButtonGroup from '../ButtonGroup'
-import {Button, ButtonProps} from '../Button'
+import {Button, ButtonProps, IconButton} from '../Button'
+import {PlusIcon, DashIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/ButtonGroup',
@@ -47,3 +48,10 @@ Playground.argTypes = {
     },
   },
 }
+
+export const IconButtons = () => (
+  <ButtonGroup>
+    <IconButton icon={PlusIcon} aria-label="Add" />
+    <IconButton icon={DashIcon} aria-label="Subtract" />
+  </ButtonGroup>
+)