v2: role "group" on buttons

[gp-slick-coder]

I'm not so sure if this is useful. This is totally against good UX.

[lucaslarroche]

@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:

[gp-slick-coder]

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/

[lucaslarroche]

Ah, yes, I get it.

I think this style looks broken/buggy:

I still prefer this style:

https://github.com/picocss/pico/assets/23470684/22d4f091-ae76-4ffb-b09f-308fa256126d

But I'm open to a better solution.

[Brian-Pob]

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

https://github.com/picocss/pico/assets/29676413/89a7a896-9dbb-45a0-8043-77d330ec6343

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

[fadrian06]

I am having overflow problems on mobile

The third button of the group leaves the container

[Brian-Pob]

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

https://github.com/picocss/pico/assets/29676413/b890334b-ee98-4a64-a8a6-733d735b8bc4