Odd Borders on `IconButtons` in `ButtonGroup`

[mattcosta7]

Description

https://user-images.githubusercontent.com/8616962/232143686-d040c5e8-5cb3-459d-a98e-b7fbfbb16985.mov

In a button group, IconButtons seem to have the wrong borders on focus/hover

Steps to reproduce

         <ButtonGroup>
                <IconButton aria-label="" icon={GearIcon} />
                <IconButton aria-label="" icon={SortAscIcon} />
                <IconButton aria-label="" icon={SortAscIcon} />
              </ButtonGroup>

checkout hover borders

Version

latest

Browser

No response

[broccolinisoup]

Hi 👋 I think this issue might be related to https://github.com/primer/react/pull/2933? As far as I understand this behaviour was intentional, at least it was a tradeoff between the wiggly buttons vs border style https://github.com/primer/react/pull/2933 cc @langermank

[mattcosta7]

Hi 👋 I think this issue might be related to #2933? As far as I understand this behaviour was intentional, at least it was a tradeoff between the wiggly buttons vs border style #2933 cc @langermank

Interesting. It definitely looks broken now, especially in dark mode.

Maybe we could set the border-left's color to the non-hover color when it's not the first button, so at least the left and right borders are balanced on 'central' buttons?

Something like -

instead of

Or potentailly something with display: inline-table and border-collapse? (not that I have tried it or thoughts on what that would break - just considering alternatives if possible)

[mattcosta7]

^ the left border fix suggested above would also help out with this case where the focus outline and hover border on separately elements show, and it looks a little off (at least to me)

[lesliecdubs]

@langermank assigning you to this since you were mentioned above, but give a shout if you need some support!