[docs] Improve visual look of loose lists

[oliviertassinari]

This is a continuation of mui/mui-x#7899 to solve the problem differently. Instead of removing the use of loose lists for only tight lists, we can improve how loose lists are displayed to not feel broken. Each would have its own use cases:

a tight list for: bullet points
a loose list for: list paragraphs

The style of the docs currently didn't take into account that looses lists could exist. The UX (visual design aspect of it) feels broken on https://next.mui.com/x/react-date-pickers/base-concepts/#responsiveness

Tight list (no changes):

Loose list before:

Loose list after:

---

I'm also using a loose list in https://deploy-preview-36190--material-ui.netlify.app/material-ui/react-radio-button/#accessibility now, as it seems to make sense in this context.

[mui-bot]

Netlify deploy preview

• docs/data/material/components/radio-buttons/radio-buttons.md

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 82a0bfd

[gerdadesign]

Can you give more context and information around the original problem you were experiencing?

What are the before and after values for both loose and tight lists?

From the linked discussion, I would generally agree about the points made against 5px when on an 8px base, but without any descriptions here or in the other PR, I'm not sure what is to be reviewed.

[oliviertassinari]

@gerdadesign I have updated the description, it should be clearer now.

[gerdadesign]

Thank you! This description is a lot clearer now. 🙌
and the screenshot update on the loose lists nicely chunks the information in closer relation to one another

Is there any value in displaying the spacing between loose and tight list items differently?

[oliviertassinari]

Is there any value in displaying the spacing between loose and tight list items differently?

@gerdadesign Right, it's partially for this question that I would like to get your input on this. So far, we have two opposite forces:

mui/mui-x#7899

Each list item is so far away with loose list, effectively at the same distance as in between two paragraphs: 16px, that it feels like they aren't part of a list anymore. Instead, we can use a tight list.

mui/mui-x#7899 (comment)

I added those line break (which are invalid) because 4px feels very compact to me.