ButtonGroups: Unwanted margin inside of forms

[syradar]

Bug already reported ?

• [X] I confirm that I have checked if the bug already has been reported

For which framework/library you are reporting the bug

React, Chlorophyll

Component name

ButtonGroup, Group, FormGroup

Description

• There is no margin between Label and ButtonGroup.
• There is 0.5rem unwanted margin below the ButtonGroup since it is inside the a group.
• The id property is not allowed on a <ButtonGroup />.

Steps To Reproduce

1. Use TypeScript and React.
2. Add a ButtonGroup as an input inside of a FormGroup.

Current Behaviour

• id is not allowed on the ButtonGroup
• The margins/spacing is flipped.

Expected Behaviour

id should be allowed on the ButtonGroup Component.

The margin should be between the Label and the Input (in this case a ButtonGroup)

Less magic for components, or clearer rules. By using the group I also got all of these CSS rules that I did not expect

Is there any plans of a more utility based CSS framework or would you be open for a SEB Green Config for something like Tailwind?

[astrit]

Is this the setup you are looking for ?

Example:

[syradar]

Yeah I guess. Right now I solved by adding flex-column to the label and buttongroup's parent and gap of 8px (Spacing3 right)

[astrit]

Yeah I guess. Right now I solved by adding flex-column to the label and buttongroup's parent and gap of 8px (Spacing3 right)

Yes with flex and gap things would be better but for now I pushed a little fix.

Also was wondering why this is not a radio button since it would be more accessible and the ButtonGroup is not really intended to have a label, if you don't mind to elaborate on that ✌️

[astrit]

@syradar

Me and @splashdust went through the design library and to me it seems like the ButtonGroup is not the best fit in this scenario since it can't really have a label as per se when you click on it it can't focus to all buttons.

Would strongly suggest to use Radio Button instead and that has a label, so you don't need to specify manually or even group the entire component. https://sebgroup.github.io/green/latest/react/?path=/docs/components-form-radiobutton--radio-button

[splashdust]

To add to @astrit's reponse, the ButtonGroup is actually the Segmented Control component from Design LIbrary, which is not meant to be used as a form input.

This is currently unclear in Green though, especially with the unaptly named ButtonGroup component, and I think we need to improve documentation and provide better examples to explain what the components were designed for.