DropDownButton: add ability to change the the li elements

[Xizario]

Currently the component support changing the content of the li elements by using custom render function or by using itemRender. https://www.telerik.com/kendo-react-ui/components/buttons/dropdownbutton/customization/#toc-items-rendering

However this is not how itemRender works in DropDownList for example, where the same method can be used to modify the wrapper of the item (the li element) and not only its content.

Use case of the requested feature is adding additional styles/props to the list items.

cc: @grozevg

[kspeyanski]

If we are to explore possible options for overriding the DOM Element type underneath the component, I'm really big fan of the styled-components as property.

However, this would require us introducing a new property (e.g item) and exporting the default item (e.g DropDownListItem), with further implementation looking like this:

const CustomItem = (props) => <DropDownListItem {...props} as={"span"} />
...
<DropDownList item={CustomItem} />
...

[simonssspirit]

@Xizario This is observed in other places as well, not only the DropDownButton;

• TreeView: https://www.telerik.com/kendo-react-ui/components/treeview/custom-rendering/
• Menu: https://www.telerik.com/kendo-react-ui/components/layout/menu/items/rendering/

If we are going to standardize it, we should update it in all places.

Still, this sounds like a breaking change or at least a second itemRender with a similar result.

[nstoychev]

I vote for adding buttonItem prop to the DropDownButton, which defaults to current ButtonItem component - https://github.com/telerik/kendo-react-private/blob/develop/packages/buttons/src/ListButton/ButtonItem.tsx#L21

[simonssspirit]

The same is requested for the Menu component again: 1501890

If you wish we can open separate issues for the Menu and the TreeView

cc: @Xizario @nstoychev