New ListItem structure prohibits full-width list item

[tomdye]

Bug

We wish to use the List to render the Grid but at this time, the current ListItem implementation enforces structure and padding to it's content meaning that the grid rows will have this enforced also. We should change ListItem to not add any styling or wrappers when a single RenderResult is passed and only do so when the typed children are used.

[tomdye]

To facilitate different types of list items, we should first take a step back and address the top-level list item as per this issue description. The basic ListItem should simply be an unstyled container that handles the hover / action / drag and drop etc events. This will allow it to be used for a full range of widgets such as a grid row (which requires full width to display) and would allow for specialised one-line / two-line / avatar items etc to be nested beneath them via a custom renderer. This could look something like the following:

<ListItem>
   <TwoLineItem>
      {{
         primary: 'item title',
         secondary: 'item description',
         avatar: '/images/icon/avatar.jpg'
      }}
   </TwoLineItem>
</ListItem>

Taking this kind of approach would separate out the functional side of the list item from the formatting side and would allow for different inner item widgets to be created quickly and easily without worrying about impacting the basic list-item functionality or causing issues with other configurations.