Deprecate usage of JSON in favor of composability.

[alitaheri]

Many components (Dialog, SelectField, DropDownMenu, LeftNav) still have props like menuItems, items, actions, etc... that a a JSON object. these should either take an array (or single) component or be removed in favor of children.

TODO:

• Dialog: deprecate actionJSON - Addressed in [Doc] Convert Dialog to use the new standard. #2483
• SelectField: see [SelectField] Composeable Items. #2380 Addressed in [Docs] migrate select-field to the new standard #2694
• DropDownMenu: same as SelectField Addressed in [Docs] [DropDownMenu] [Composable] Migrate to new standard #2565
• LeftNav: deprecate menuItems - Addressed in [Doc] Convert LeftNav to use the new standard. #2507

@oliviertassinari and @shaurya947 please give me your feedback on this.

[mbrookes]

The one concern I would have is that, particularly for components such as selectField, TypeAhead etc, the data is often generated programmatically (from database, API etc), so having to compose with children would require extra code in every app that is currently handled by the components.

The reason for requiring objects is that the items often require other attributes than just a label (some kind of reference for example).

I would propose:

• Supporting both prop and children as alternatives
• Standardising the API naming for that prop across components
• Where possible, limit and standardise the attributes supported through the array / object

(In fact, standardising API naming in general across components would be a good long-term objective to add to the roadmap. )

[alitaheri]

@mbrookes The extra code would only be a Array.prototype.map call, but the outcome would be greater customizability. What if you want (based on the object) the select items to look different? or each handle some extra interactions, like dragging? I think the trade-off is worth it. Besides there are worse issues with these. did you know if displayMember and valueMember are different that value and payload the object is mutated to contain those properies? That means you HAVE to clone your data in some way.

but isn't this prettier:

<SelectField value={...} onChange={(value, payload) => {/**/}}>
  {data.map(d => 
    <SelectItem key={d.id} value={d.id} payload={d.name /*or d itself*/} label={d.fullname} style={...} />
  )}
</SelectField>

You can even nest children inside the SelectItem, or make it editable later, etc...

If we also support JSON objects then how will they be ordered? how will they look like?

With typeahead I haven't come up with a solution yet. That might better work with templates or something. But that component is still new, it's better to leave it as is and have the community field test it and provide feed back. then we'll decide :D

[mbrookes]

Okay, I"m sold. :D

[mbrookes]

Dupe of / resolves #27