Support isolated group behaviour when nested within another group

[dylmye]

Description

Hi! I'm requesting the ability to isolate group behaviour, so a parent component's group behaviour doesn't trigger a child's.

You can see the issue in this playground: https://play.panda-css.com/4ByRcCzmeh

The expected behaviour is that hovering over the square would change the background colour without affecting the text colour. However this is not the case. That's because there is no way to distinguish between the two groups.

Problem Statement/Justification

This is a pattern we use in a number of places, primarily on buttons within other actionable elements like list items and 'cards'.

This issue can be avoided when using other frameworks:

• Tailwind has the concept of named groups
• StyleX recommends a "descendent styles" pattern instead of using a generic class name to create a link
• And many CSS-in-JS libraries support nested selectors in line with the CSS spec (see emotion, styled-components for example)

Proposed Solution or API

The ability to assign the group a name in a recipe:

const coolButtonRecipe = cva({
    base: { /** **/ },
    group: 'cool-button'
});

const CoolButton = () => <button className={coolButtonRecipe()}><ButtonText /></button>;

const coolButtonTextRecipe = cva({
    base: {
        _groupHover: { /** **/ } // this still works as before but now targets .group-cool-button (or some unique name that is tracked by panda) instead of .group
    },
    group: 'cool-button'
});

const CoolButtonText = () => <span className={coolButtonTextRecipe()}>Here's the button text</span>;

Alternatives

We're currently using a hacky workaround of applying classes with JS hover event listeners 🤮

Additional Information

I'm aware of this discussion from a few years back but not sure how it applies to modern-day Panda

[dylmye]

As a workaround for the unsightly JS workaround, we've added conditions in our base preset that mimic group's but using our own class name.