RFC: Button.Group shorthand to render an array of buttons with a 'buttons' prop

[brianespinosa]

Currently it doesn't look like the Button.Group component has a way to render an array of buttons in a similar way that a Menu or List component will allow you to set an items array to render child components.

I did not see anywhere upon searching issue history where it was discussed if this was a feature we should have or not. Maybe @levithomason can shed some light on this... and I am not sure if shorthand props like this are sticking around or not.

Proposal

const buttonList = [
  {
    key: 'button-a',
    content: 'Button A',
    icon: 'user',
  },
  {
    key: 'button-b',
    content: 'Button B',
    icon: 'close',
  },
  {
    key: 'button-c',
    content: 'Button C',
    icon: 'trash',
  },
]

<Button.Group buttons={buttonList} />

This would render a Button.Group with three Button components.

[anhdle14]

In addition to that, I would suggest adding something like:
circular: true or type: success/negative' or something like that could be a plus.

[brianespinosa]

@anhdle14 the way other shorthand props work is you can map data from an array of objects directly to any available props on the component you are mapping to. Therefore any props on the Button component would be valid to pass in the object. So yes, those props would be valid.

[levithomason]

Yep, this is a missing feature. Let's do it.

[octaviotastico]

Why "onClick" doesn't work when I add it on the const list?

const buttonList = [
{
key: 'button-a',
content: 'Button A',
icon: 'user',
onClick: alert('asd')
},
{
key: 'button-b',
content: 'Button B',
icon: 'close',
onClick: alert('asd 2')
}
]