feat(buttons): introduce button group with sub variants

[dauriamarco]

Adds the button group with sub-variants: button-groups, split-button, toolbar, and also renames the segmented-button.
Here's some screenshots for a quick overview:

Related to #250

---

• I confirm that this MR follows the contribution guidelines.

[dauriamarco]

Hi @chintankavathia, whenever you have some time, would you be so kind as to help me generate the VRTs for this pull request as well? Thanks a lot in advance.

[github-actions]

Documentation.
Examples.
Playwright report.

Coverage Reports:

• element-ng
• element-translate-ng

[chintankavathia]

Hi @chintankavathia, whenever you have some time, would you be so kind as to help me generate the VRTs for this pull request as well? Thanks a lot in advance.

seems like some ally issue Ensure buttons have discernible text can you ensure icon only buttons are having aria-label

[chintankavathia]

@dauriamarco focus ring doesn't seem to be placed correctly when compared to figma specs.

figma:

also the dropdown items focus ring is clipped from both sides

[dauriamarco]

@chintankavathia I might be wrong, but to me it looks like the Figma example is slightly off. Otherwise, it would mean that the focus state of any other button is currently incorrect in the code. What do you say @hbxes?

For me it would look like this right now:

[spike-rabbit]

I think we actually need to wait here, until we have the new button radios, as this will affect the code here

[hbxes]

@dauriamarco the figma file in terms of the focus is fixed

[dauriamarco]

@dauriamarco Awesome, thank you! Three points: Can you add VRTs etc. and secondly, add some screenshots of the work to the main description of the PR above? This will help getting a quick overview of the work. Third, did you discuss the component name already with somebody in the team? I just want to note that iX has a toggle-button and we might want to align with iX here and quickly discuss the naming.

Thanks @kfenner 🙌 I’ll try adding the VRTs again, so far I’ve had issues running them locally and had to ask others to generate them for me, but I’ll give it another shot later on my machine to see if things are working now.

On the naming: I wasn’t fully decided between the two. I went with selection-buttons because it felt a bit more generic and aligned with the functionality of the button group itself, but I haven’t had a definitive discussion with anyone yet. Totally fine to revisit this and align with iX if needed.

[github-actions]

[kfenner]

LGMT 👍

addressed

[siemens-element-bot]

🎉 This PR is included in version 48.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀