ButtonGroup - Create layout template

[halocline]

Create a "ButtonGroup" layout which provides consistent gaps between buttons when presented in a row.

• Example use cases include forms, modal dialogues, layers, actions in footers, page level actions, data collection toolbars, nav menus, etc.
• Consider naming alternatives such as "ControlGroup" or "ActionGroup" as in addition to buttons, elements such as menus, possibly inputs like search might be included
• V1 should focus on providing consistent gap. Future versions should consider implementing ResponsiveContainer which allows for the number of controls displayed to be determined by the amount of space available. As controls overflow, they automatically collapse into an overflow menu.

Deliverables: These should likely be broken into sub-issues and use this as the tracking issue.

• [ ] Discuss if this is something which should belong in Grommet. If so, begin with a concept discussion an thoughts on API. https://github.com/grommet/hpe-design-system/issues/2547
• [x] #3292
• [ ] Coded implementation either as a Grommet component, or as a HPE Design System template.
• [ ] Page on HPE Design System site with example and guidance.

[ericsoderberghp]

I'm open to adding this to grommet. Also, it might be good to see how it fits with <Toolbar />.

[KennyAtHPE]

Suggestion after completing #3292:

For the Figma implementation, a ControlGroup is doable however the effort and investment are not worth it. A lot of effort would be required to bring on designers on how to use the component. Seems like there are a lot of pitfalls due to the complexity of the component. We can however create templates that do now allow for flexibility that designers can easily copy and paste (it can also be a published component with different variants).