Flexible List components in a Design System

Hi, I was wondering if someone has an article or reference to share how best to treat lists in a design system from a component architecture point of view.

I understand I can make a longer list and then have the container adjust through autolayout, but is there any other good practice on how to deal with this issue?

3 Likes

The only way to achieve this is to create a placeholder item for every possible list item and then hide them in the instances. (So in your List component you have 30 ListItem children, or x instances of every type of ‘thing’ that can go in the list container, and hide the ones not being used.)

It certainly would be way more convenient if you could just nest components inside the Body autolayout area of your List component, but that is not supported right now: Can I place components inside another component instance?

I know this comment is 2 years old but I just spent 30 mins Googleing how to do this so leaving this hear to save the next person some time. (If someone knows a better way to do this or you figured it out OP, please let me know!!)