Button Group - design & build component

[larserbach]

User Story
As a user, I want to be presented with a set of related options grouped together in a button group, so that I can easily select one option from the group and perform a specific action.

Acceptance Criteria

• The button group can display minimum of one button and can be filled with any amount of buttons. The overflow is handled with flex container and would break the overflowing buttons in a new row.

• The button group comes in the following layout variants:

• Left aligned

• Right aligned

• Centrally aligned

• The button group comes in the following sizing variants:

• • XS
• • SM
• • MD
• • LG
• • XL

• The sizing should always be applied on the entire button group (all buttons in the button group should have the same size)

• The button group is always using FlexBox (ParentFill)

• The button group can be filled with any kind of button and combination of different button variants (Primary, Secondary, Icon button and combinations of these)

Link to Figma: https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?node-id=3777%3A114816&mode=dev

All components we build should be responsive and work across all modern browsers and devices. Furthermore all components should be tested thoroughly to ensure they are functional and meet all requirements. Components should also be accessible to users with disabilities, following WCAG 2.1 AA guidelines. These requirements however will not be checked 100 % when we review the component tickets during refinement or planning sessions.

[angelicahoyss]

Deleted :)

[JpunktWpunkt]

feat/button-group-variant
#343

[thrbnhrtmnn]

As discussed in todays review and merge session, the ticket can be merged. However we had to create one follow-up task to also have the icon button placeable inside the button group: #387

Additionally we also found a bug in the Text Button, which also affects the Button Group: #384