Material-ui: [CircularProgress] String format for size prop not documented

[cmeeren]

There seems to be an error in the CircularProgress docs. The size prop says it can be a number or a string. But setting a string value seems to have no effect on the size. Only a number works.

[safaiyeh]

I checked out the CircularProgress. You're right, the implementation only accounts for number sizes.

[devsumanmdn]

size is directly used as height and width:
https://github.com/mui-org/material-ui/blob/e5b4aa019294c99a84f1a3c3ea3da8e535cf3f70/packages/material-ui/src/CircularProgress/CircularProgress.js#L144
So if someone passes 24 or "24px" it works, because React will automatically append a “px” suffix to certain numeric inline style properties. But for a string value "24" it will not append any prefix.

In my personal opinion, it's fine to not append a "px" to a string.
CodeSandbox
_New bug: nothing shown when setting size as "24"._

[cmeeren]

It also seems e.g. 4em works, so I guess any CSS unit works?

[devsumanmdn]

It also seems e.g. 4em works, so I guess any CSS unit works?

Yes, if its a string it'll use that as it is. React uses CSS-in-JS pattern for its inline styling.

[mbrookes]

I was thinking we should convert the string to a number; but since it seems it accepts a string with units, we should document that instead, otherwise it would be a breaking change.

[oliviertassinari]

Agree, so something like this?

diff --git a/packages/material-ui/src/CircularProgress/CircularProgress.js b/packages/material-ui/src/CircularProgress/CircularProgress.js
index 143174a8b..29b0f49e9 100644
--- a/packages/material-ui/src/CircularProgress/CircularProgress.js
+++ b/packages/material-ui/src/CircularProgress/CircularProgress.js
@@ -196,6 +196,7 @@ CircularProgress.propTypes = {
   }),
   /**
    * The size of the circle.
+   * If using a string, you need to provide the CSS unit, e.g '3rem'.
    */
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /**