New button group component added

[JonBunator]

A new button group component that groups related buttons together. As described in #1249
Tell me what you think :)

Edit:

• RTL support added
• Split button support added
• Support for MudIconButton and MudToggleIconButton added

closes #1249

[porkopek]

It looks cool!

[JonBunator]

This component could be used to create a split button. But it doesn't look good yet because MudButtons are too wide and the icon is not centered when they have no text.

Do you think it would be better to make changes to the MudButton class or should I use a MudIconButton and override its styles?

[mikes-gh]

Do you think it would be better to make changes to the MudButton class or should I use a MudIconButton and override its styles?

@JonBunator would any public API change in either senario?

[JonBunator]

@mikes-gh

@JonBunator would any public API change in either senario?

Thanks for your response. Option one would require changes in MudButton: making buttons square when they have no text. Basically a rectangular MudIconButton.
It would look like this:

and not like this:

Option two would not require changes in MudButton or MudIconButton. I just would have to add mor styles to _buttongroup.scss. This would result in an increase in css LOC though.

[mikes-gh]

Hmm. @henon do have an opinion on this. My first thoughts are changing button styles might have an impact we will not immediately be aware of. However the button shrinking to content seems like desired and predictable behaviour to me so I might be inclined to try that route and have a good look around the examples to see if it broke any layout.

[henon]

Sure mike, I agree.

[JonBunator]

Alright, I will create a seperate PR for this.
Edit: As discussed in #1557 this is not wanted anymore.

[henon]

Looking great so far.

Usually button group has an optional selection feature too. No selection, exclusive selection, multi-selection. At least I know it from Vuetify like that: https://vuetifyjs.com/en/components/button-groups/. The button group has a two-way bindable hashset of selected indices.

Do you want to add that feature + tests also?

[JonBunator]

Thanks for your feedback!
I think the button group in vuetify only allows toggle buttons to be used. In contrast this component also allows MudButton and MudIconButton. I don't think it would make sense to add these parameters because it woud be confusing if you don't use toggle buttons in the button group.
I would rather create a seperate component called MudToggleIconButtonGroup for this. For example material-ui also uses two different components for this: ButtonGroup and ToggleButtonGroup
I wouldn't create a seperate doc page for this. I would expand the existing MudToggleIconButton page and add examples explaining the MudToggleIconButtonGroup. Exactly how it was done with the MudRadioGroup. Because MudToggleIconButton and MudToggleIconButtonGroup need to work tightly together, this would be a better solution in my opinion.
This component would require changes in MudToggleIconButton in order to function.
What do you think about my suggestion?

[henon]

Sounds good, I totally agree.

[JonBunator]

Alright, I can start a PR after this PR is merged. That way I can reuse the css classes.