[joy-ui][PoC] Make Joy UI components denser

[zanivan]

• I have followed (at least) the PR section of the contributing guide.

Testing some visual changes to the Joy UI default theme, mostly making some components use the sm variant by default

Components set to sm as default:

• Button
• IconButton
• Input
• FormControl
• Select
• ButtonGroup
• Autocomplete
• Chip
• Avatar
• Switch
• TextArea
• ToggleButtonGroup

Learnings

1. When Avatars, IconButtons or other components are inside the input/select, it ends up with 38px height. I wonder if we should make the md components 38px height than changing variants to sm.
2. Visually, it only makes sense if all these components have the same height or variants set.

[mui-bot]

Netlify deploy preview

• docs/data/joy/components/autocomplete/autocomplete.md
• docs/data/joy/components/avatar/avatar.md
• docs/data/joy/components/textarea/textarea.md
• docs/data/joy/components/toggle-button-group/toggle-button-group.md

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 96e2710

[siriwatknp]

I think let's create a density page like Material UI as a first step.

[zanivan]

I think let's create a density page like Material UI as a first step.

I wonder if this shouldn't be on the theme builder page, though. Or it could be a similar page like Material UI, under customization section—resonating with the changes on #38396.

That said, I also think we could make the md denser, then. Maybe 36px or 38px height. What do you think @siriwatknp ?

[siriwatknp]

I think let's create a density page like Material UI as a first step.

I wonder if this shouldn't be on the theme builder page, though. Or it could be a similar page like Material UI, under customization section—resonating with the changes on #38396.

That said, I also think we could make the md denser, then. Maybe 36px or 38px height. What do you think @siriwatknp ?

For sure, all of the components will need to be changed accordingly.