[ButtonGroup][Joy] Borders don't work properly with non-matching variants

[Studio384]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/admiring-james-kzmpdk?file=/demo.tsx

Steps:

1. Create a button group
2. Make a button deviate from the button group's variant and/or color

Current behavior 😯

Using the default props of the button group, the button group will try to apply a border to the button in the groups color, rather than adhering to the styling of the button itself.

The inverse happens when applying a different variant to the button group and adding a outlined button within it, which basically recreates #37574.

The buttons seem to rely on the button group styling where they shouldn't.

Expected behavior 🤔

The button defines the styles and color applied to it if they are set, and otherwise use the color and/or variant from the button group.

Context 🔦

Trying to make a button group with spacing where the primary action has a highlighted style.

Your environment 🌎

No response

[siriwatknp]

Thanks for reporting the issue. Let me see if it can be improved by using ::before and ::after instead of overriding the border of the button.