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:

Screen.Recording.2024-02-13.at.23.21.11.mov

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?

CleanShot.2024-02-17.at.01.40.44.mp4

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

Recording.2024-02-18.162102.mp4

[mlbiche]

This issue is still present in PicoCSS and is an important accessibility concern. I also wonder if there is a reason why using box-shadow instead of outline which seems to be more recommended as a default? I can start a draft PR to work on this and keep on going the discussion.