Improve shorthands for component that contains collection shorthands

[mnajdova]

Feature Request

Problem description

When we are using components that contains collection of other components (like Menu, or some group components - ButtonGroup), we should provide different processing of the shorthand if an array is provided. For example, let's take a look on the actionMenu prop in the ChatMessage:

<ChatMessage 
  author='John Doe' 
  timestamp='27/2' 
  actionMenu={{items: ['like', 'dislike']}} 
  content='Content of the message'
/>

This is not really user friendly API, as the actionMenu should probably be referred as actions. Moreover the user has to create an object with the items as a key to finally define the actions they want to have on the ChatMessage.

Proposed solution

Much clear API for achieving the same thing, would be the following:

<ChatMessage 
  author='John Doe' 
  timestamp='27/2' 
  actions={['like', 'dislike']}
  content='Content of the message'
/>

With this the user should be able to define the same thing as above. Furthermore, if they want to customize the menu, they can still use the same old object for defining the Menu:

<ChatMessage 
  author='John Doe' 
  timestamp='27/2' 
  actions={{items: ['like', 'dislike'], vertical: true}}
  content='Content of the message'
/>

For this to work, we may add additional parameter to the createShorthandFactory, that will handle arrays, the same way as we currently handle the string literals. The signature would be something like this:

Menu.create = createShorthandFactory(
  Menu, 
  'children', /* what is the default prop when string is passed */
  'items' /* what is the default prop when array is passed */
)
ButtonGroup.create = createShorthandFactory(
  ButtonGroup, 
  'content', /* what is the default prop when string is passed */ 
  'buttons' /* what is the default prop when array is passed */
)