[LoadingButton] Fix HTML rule button > div forbidden nesting

[oliviertassinari]

The issue can be seen on https://validator.w3.org/nu/?doc=https%3A%2F%2Fmui.com%2Fmaterial-ui%2Freact-button%2F

While I don't know how useful validator.w3 is, I don't think Material UI component should create noise for developers.

Preview: https://deploy-preview-38584--material-ui.netlify.app/material-ui/react-button/.

I have checked if the bug could be reproduced on Joy UI at the same time, it can't, we use span correctly there.

---

This has been on my backlog for almost 2 years. I moved most of the items to Notion tasks, but this one seems so simple to fix that I'm going for it.

I saw two CSS bugs on this page with Material UI v6 https://mui.com/material-ui/react-button/#material-you-version:

And

[mui-bot]

Netlify deploy preview

https://deploy-preview-38584--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against ba47316

[DiegoAndai]

LGTM 🙌🏼

Sorry for the delay, this got lost in my notifications

[DiegoAndai]

Is the letter spacing the bug from the second image? That value is correct. From Material You's guidelines, the way to calculate letter spacing is (Tracking value in px / font size in px) = letter spacing in rem (reference). As the Button uses the label large tokens, this would be 0.1 / 14 = 0.00714....

[oliviertassinari]

Is the letter spacing the bug from the second image?

@DiegoAndai

1. I would question the number of digits it takes in serve side output and the dev tool. We used:

material-ui/packages/mui-material/src/styles/createTypography.js

Lines 3 to 5 in 104b3c0

	function round(value) {
	return Math.round(value * 1e5) / 1e5;
	}

in the stable version.

2. Material Design pushing for rem on the unit seems very strange (unless I'm missing something, it's wrong). The same outcome can be reached by using em while also better supporting customize font size values. Material UI v5 and Joy UI feels correct:

material-ui/packages/mui-joy/src/styles/extendTheme.ts

Line 433 in 104b3c0

letterSpacing: '-0.025em',

material-ui/packages/mui-material/src/styles/createTypography.js

Line 55 in 104b3c0

? { letterSpacing: `${round(letterSpacing / size)}em` }

A bit related to https://stackoverflow.com/questions/39692615/is-it-possible-to-have-letter-spacing-relative-to-the-font-size-and-inherit-prop