Fix button group with modal trigger

[joshhanley]

The scenario

Currently if you have a button group, with buttons that have both a tooltip and are a modal trigger, then the buttons borders aren't rendered correctly to match the group.

<flux:button.group>
    <flux:modal.trigger name="page-details">
        <flux:button icon="bars-3-bottom-left" tooltip="Left align" />
    </flux:modal.trigger>
    <flux:modal.trigger name="page-details">
        <flux:button icon="bars-3" tooltip="Center align" />
    </flux:modal.trigger>
    <flux:modal.trigger name="page-details">
        <flux:button icon="bars-3-bottom-right" tooltip="Right align" />
    </flux:modal.trigger>
</flux:button.group>

The problem

The issue is that the CSS selectors which remove the rounded and excess borders on inner buttons is scoped to only apply these styles for immediate children of the button group. There are also selectors which account for a button group with a tooltip that contains a button (1 level of nesting).

But when using a modal trigger, the button itself ends up a few levels below the button group in the DOM and as such isn't being targeted by the child selectors.

The solution

The solution is to update the selectors to detect any buttons within the group and apply the correct styles.

So for example, this PR changes the selector from:

[&>*:last-child:not(:first-child)>[data-flux-group-target]:not([data-invalid])]:border-s-0

To

[&>*:last-child:not(:first-child)_[data-flux-group-target]:not([data-invalid])]:border-s-0

The main difference is before the [data-flux-group-target] instead of a > which is direct children, we now use _ which means any children.

One bonus we get by making this change is we had a selector for sub-sub-children of input groups which is now no longer needed as it is covered by these selector changes.

Now it all works as expected.

I also added this scenario to our groups test page and checked all the other groups still worked as expected.

Fixes #2021
Fixes #2072

[calebporzio]

Oooh hmm. I think I avoided descendant selectors because people might have like a menu inside the input group or something else like a popover and now something nested inside of it might be impacted?

Want to just sanity check me on that and make sure there won't be scenarios where these styles will impact things they shouldn't?

If not, let's ship it. good improvement!

[joshhanley]

Yeah, sadly it does impact button inside menus 😕 will have to think of another solution.