[Joy] Miscellaneous fixes

[siriwatknp]

Found several issues from building Strapi design system in #30686.

Improvements

Render texts & links should be easy as possible (less sx as much as possible). See the use case in this Sandbox

I decided to add startDecorator & endDecorator prop to the Typography and Link which is very common use case. Also, create a TypographyContext to make the nested text alignment works well together.

Ex 1: to achieve this result, you can nest the Typography together

<Typography level="body2" color="text.primary">
  Ali Connors{' '}
  <Typography color="text.secondary"> // The typography knows how to adapt if it is a nested one
    {' '}
    — I&apos;ll be in your neighborhood doing errands this…
  </Typography>
</Typography>

Ex 2: the start & end decorator

• https://deploy-preview-31873--material-ui.netlify.app/experiments/joy/link/
• https://deploy-preview-31873--material-ui.netlify.app/experiments/joy/typography/

<Typography>
  ... <Link startDecorator={<Icon />}>...</Link>
</Typography>

Fixes

• TextField: pass type & name props to Input
• Checkbox: pass id & name props to input, flex-shrink set to 0 in case it is used in flexbox
• ListItemDecorator: able to set the color from the root List
• ListItemButton: able to pass custom role
• Button: remove unnecessary --Button-minHeight variable
• List: remove the default background and integrated with Sheet, set nested inset to 0px (it is more common)
• Avatar: add font-family body and adjust the fallback size
• SvgIcon: add --Icon-color for customization.
• Input, TextField: rename start/endAdornment to start/endDecorator.

---

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

[mui-bot]

Details of bundle changes

@mui/joy: parsed: +2.17% , gzip: +1.17%

Generated by 🚫 dangerJS against a4d5684

[hbjORbj]

Just double checking if this is intended. Shouldn't it be 1rem?

[siriwatknp]

line-height: 1, means that it is equal to the font-size. I think it is better in this case because the button font-size can vary based on the size prop. The reason I use line-height 1 is that I can't find a better number otherwise you will see that the text is not aligned center inside the button. It is quite the same issue as in #30240

[hbjORbj]

I see. Thanks for explaining!

[hbjORbj]

Just double checking. Is it intended that we have this property when ownerState.nested && ownerState.startIcon? Also, do we not need this when there is endIcon?

[siriwatknp]

Yes, this is intended. There is no alignment issue if the icon is at the end. You can try to remove the verticalAlign to see the alignment issue. https://deploy-preview-31873--material-ui.netlify.app/experiments/joy/typography/

[hbjORbj]

Looks great! 😁

[danilo-leal]

Excellent work!