Toggle button group with same height as other interactive elements

[TomasEng]

Description

In some interfaces, we want to display a toggle button group together with other input elements. The problem with this is that it is difficult to align the toggle group with other elements because of its irregular height. In Studio we have solved that by manipulating the size using CSS:

This is a quite messy solution which is prone to errors when something change in The Design System. We would prefer to solve this without having to use our own CSS.

Here are some suggestions:

• Add a prop to the ToggleGroup component that makes it satisfy this restriction
• Add a new component with the same API as ToggleGroup, but with a different design
• Redesign the ToggeGroup component so that it always satisfy this restriction

Additional Information

Here is an example on how this is solved visually in Windows:

I personally like this solution because the buttons have the same height as the whole toggle group (and thereby the other buttons in the interface), while it's still clear which of the two buttons that is the selected one.

[mimarz]

Thanks for the suggestion!

I can definitely see the use for this. Not sure what would be the best solution for this. I think the intended use case for ToggleGroup was that it was more freely placed instead of in a "toolbar" kind of setting.

We'll look into it at least :)