Odd Borders on `IconButtons` in `ButtonGroup`

[mattcosta7]

Description

Screen.Recording.2023-04-14.at.3.58.56.PM.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 #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

[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!