diff --git a/.changeset/cuddly-cycles-refuse.md b/.changeset/cuddly-cycles-refuse.md new file mode 100644 index 00000000000..6374b65f848 --- /dev/null +++ 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 index c2f85c5d5b9..33a3d43c2e4 100644 --- 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 index 76c9a696d60..6845b32316d 100644 --- 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 index 49441d55c37..2107a948f7e 100644 --- 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 = () => ( + + + + +)