[List] Allow adding multiple secondary actions

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The ListItem component provides a property for setting a secondary action. This works fine if you only add a single IconButton, but if multiple buttons are added, the content of the ListItem can overlap with the left IconButton. This is caused by the padding of the ListItem which is set to a fixed 48px if a secondary action is set.

The secondary action should allow setting an array of IconButtons. Depending on the length of the array, the padding should be calculated. As an alternative, it could also be a fragment which is checked for the amount of IconButtons inside it.

A workaround at the moment would be to override the padding, but I think it would be much more convenient to have this handled by mui, especially because this is not directly documented.

Examples 🌈

Current Behavior:
Code Sample

New Behavior:

Motivation 🔦

We have applications which often contain lists of objects which can be edited or deleted. To allow both actions, we add two IconButtons to the list items (see example above). Our application is mainly used on desktop browsers, so we have enough room for both buttons to be displayed all the time.

I have already tried to implement this, and it looks to be easy to support this case. If you think this feature could be integrated into mui I could create a PR. 😊

Start at the ListItem component and inspect how its secondary action affects padding, using the linked CodeSandbox to reproduce the overlap with multiple IconButtons. Add coverage for multiple secondary actions and verify that the ListItem content no longer overlaps them.