Expand / collapse capability for List Items

[jasonkylefrank]

Hello,

Do you have plans to add the expand/collapse capability (and thus nested content) for List Items that the Material Design spec outlines?

This would be a huge benefit. Material UI has this capability - they call it "nested list items":

This capability could help fill the void that other control suites provide with controls like accordions, or "panel boxes" (a la Kendo UI). I realize that the Material Design spec does not currently show "accordions" or "panel boxes", but the nested list feature is shown by the spec.

Thanks and best wishes.

[jasonkylefrank]

Anybody home?

[javivelasco]

Hey @jasonkylefrank I forgot about this. We are thinking about a new more flexible way to display lists. Since it is not originally specified in the List spec, we didn't do it yet. It should be considered for the next list iteration, it's a very useful feature

[jasonkylefrank]

Great! Any idea when that might be released?

[javivelasco]

I can´t tell exactly when, there are other tasks with more priority like making the components mobile friendly and a more flexible autocomplete, sorry :(

[renato]

I'd like this too.

If you are thinking about a new more flexible way to display lists, is there anything we can do right now to help?

[pureux]

Agreed, this would be really useful (though understanding there are also higher priorities). Thanks!

[mismith]

+1
Anyone have any clever ways of doing this in the meantime?

[javivelasco]

Any PR regarding this is very welcome in the PostCSS branch! Sorry for my delayed response, I'm lacking spare time lately

[thj-dk]

Any progress on this? It would be truly awesome 👍

[javivelasco]

It's going to be done in a refactor of the List component. For me it's a bit overcomplicated now and I'd like to make it simpler. No progress yet though

[thj-dk]

Thanks for the update. Looking foward to it. If you want to share your thoughts on how you imagine this to be implemented, maybe we can help.

[javivelasco]

No problem!! Sure I will :)

[hansena]

I had a need to implement this functionality now and found the react-collapsible library to play very nicely with the react-toolbox list controls using a pattern like:

<List selectable ripple>
  <ListItem caption="USCM Overview" leftIcon="equalizer" onClick={this.navListOverviewClick} />
  <ListDivider />
  <Collapsible
	trigger={<ListItem rightIcon="keyboard_arrow_down" caption="Reliability" />}
	triggerWhenOpen={<ListItem rightIcon="keyboard_arrow_up" caption="Reliability" />}
	easing="ease-in-out" >
    <ListItem selectable caption="Overview" onClick={this.navListReliabilityOverviewClick} />
    <ListItem selectable caption="Availability" onClick={this.navListAvailabilityClick} />
  </Collapsible>
  <ListDivider />
</List>

(hovering on "Swagger" list item)

[javivelasco]

Cool! I wanted to say that the next version will be incredibly composable! This component has been completely re-written