v2: role "group" on buttons about pico HOT 6 OPEN

@gp-slick-coder, do you recommend updating the docs? Or removing the feature (not possible now to avoid a breaking change).

I guess it could be useful for a group of related actions, like:

from pico.

What about something like this where the whole border of the button in the group is shown instead of a broken border?

Example from:
https://stackoverflow.com/a/67756667

from pico.

The issue with the button group overflowing seems to be due to this style rule setting a new horizontal padding of 2rem, which overrides the original horizontal padding of 1rem.

[role=group] [role=button], [role=group] [type=button], [role=group] [type=submit], [role=group] button, [role=search] [role=button], [role=search] [type=button], [role=search] [type=submit], [role=search] button {
    --pico-form-element-spacing-horizontal: 2rem;
}

It seems that keeping the padding at 1rem still looks decent while allowing the display to get as small as 306px (smaller than an iPhone SE at 375px) without any overflow issues. See attached screen recording

from pico.

Sorry for my bad description. The feature is useful. The only issue is with the focus of the button(s).

Current behavior: On a button click, all buttons will be "focused" (as shown in the previous image).

Expected behavior: On a button click, only the button that was clicked, should be focused.

Good examples:
https://efrolic.github.io/css//button-group
https://bulma.io/documentation/elements/button/#button-addons
https://picturepan2.github.io/spectre/elements/buttons.html#buttons-groups
https://getbootstrap.com/docs/4.0/components/button-group/

from pico.

Ah, yes, I get it.

I think this style looks broken/buggy:

I still prefer this style:

But I'm open to a better solution.

from pico.

I am having overflow problems on mobile

The third button of the group leaves the container

from pico.