Merge branch 'main' into 2841-use-githubaxe-config-as-config-for-axe

Author: agreenberry

.changeset/cuddly-cycles-refuse.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: ButtonGroup hover state causes buttons to shift horizontally

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;

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;

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>
+)