ButtonGroup component: fix hover/focus styles

[bluefuton]

Proposed Changes

When using a Calypso ButtonGroup, the left border of a button does not match when hovering/focusing it:

This is particularly noticeable on a 'scary' button, which has a red border.

This PR fixes the focus and hover styles for buttons within a button group so that the entire border of the current button is the same color:

Testing Instructions

Head to http://calypso.localhost:3000/devdocs/design/button-group and try hovering over/interacting with a button. Ensure that the hovered/focused button has a continuous border in the same color.

To try this component in a real world situation, take a look at http://calypso.localhost:3000/comments/all/ and try to bulk edit comments. The spam and trash buttons here should also now show a continuous border.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-60579

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-60579&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~1 bytes removed 📉 [gzipped])

name                          parsed_size           gzip_size
async-load-design-playground        +14 B  (+0.0%)       -1 B  (-0.0%)
async-load-design                   +14 B  (+0.0%)       -1 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[flootr]

Looks good to me 👍🏻

There's just one glitch which I'm not sure is even relevant but when clicking on an un-scary button so it is active and then hovering over the item next to it still has the missing left border (see video below; you don't see the click unfortunately).

Screen.Recording.2023-03-29.at.15.40.23.mov

[bluefuton]

There's just one glitch which I'm not sure is even relevant but when clicking on an un-scary button so it is active and then hovering over the item next to it still has the missing left border (see video below; you don't see the click unfortunately).

Excellent spot @flootr! This only seems to happen when the non-scary button has :focus styles applied, and then the following scary button has :hover. I'll see if I can come up with a fix.

[ciampo]

Could this bug be solved by forcing the hovered/focused button to have a temporarily higher z-index?

[bluefuton]

Could this bug be solved by forcing the hovered/focused button to have a temporarily higher z-index?

That's a smart idea - thanks @ciampo! I'll give that a try.