Collection system should warn when both a render prop and children are used

[NicholasBoll]

💡 Suggestion

A collection List component supports either a render prop (function) OR children, but not both. There isn't a warning. It makes it easy to make a mistake that isn't obvious what's wrong.

Motivation

What are the key benefits if this suggest was included to Canvas-Kit?

Example

An example of an incorrect usage:

<Tabs items={[{ id: 'one', text: 'One' }]}>
  <Tabs.List>
    {item => <Tabs.Item data-id={item.id}>{item.text}</Tabs.Item>}
    <div>Some other element</div>
  </Tabs.List>
</Tabs>

Either a warning, or we do support this. The problem is the overflow button rendering is controlled by the Tabs.List and each Tabs.Item is measured. Any additional element will need to be hooked up to overflow detection. A common use-case is a "add tab" button in the list. To work around this, a tab is added to the items array that is only used to display "Add Tab"