[Rating] Fix readOnly + precision combination (#19414)

docs/src/pages/components/rating/HalfRating.js

@@ -1,6 +1,24 @@
 import React from 'react';
 import Rating from '@material-ui/lab/Rating';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    '& > * + *': {
+      marginTop: theme.spacing(1),
+    },
+  },
+}));
 
 export default function HalfRating() {
-  return <Rating name="half-rating" defaultValue={2.5} precision={0.5} />;
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+      <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
+    </div>
+  );
 }

docs/src/pages/components/rating/HalfRating.tsx

@@ -1,6 +1,26 @@
 import React from 'react';
 import Rating from '@material-ui/lab/Rating';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      '& > * + *': {
+        marginTop: theme.spacing(1),
+      },
+    },
+  }),
+);
 
 export default function HalfRating() {
-  return <Rating name="half-rating" defaultValue={2.5} precision={0.5} />;
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+      <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
+    </div>
+  );
 }

docs/src/pages/components/rating/HoverRating.js

@@ -17,7 +17,7 @@ const labels = {
 };
 
 const useStyles = makeStyles({
-  rating: {
+  root: {
     width: 200,
     display: 'flex',
     alignItems: 'center',
@@ -30,7 +30,7 @@ export default function HoverRating() {
   const classes = useStyles();
 
   return (
-    <div className={classes.rating}>
+    <div className={classes.root}>
       <Rating
         name="hover-feedback"
         value={value}

docs/src/pages/components/rating/HoverRating.tsx

@@ -17,7 +17,7 @@ const labels: { [index: string]: string } = {
 };
 
 const useStyles = makeStyles({
-  rating: {
+  root: {
     width: 200,
     display: 'flex',
     alignItems: 'center',
@@ -30,7 +30,7 @@ export default function HoverRating() {
   const classes = useStyles();
 
   return (
-    <div className={classes.rating}>
+    <div className={classes.root}>
       <Rating
         name="hover-feedback"
         value={value}

docs/src/pages/components/rating/RatingSize.js

@@ -1,13 +1,25 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/lab/Rating';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    '& > * + *': {
+      marginTop: theme.spacing(1),
+    },
+  },
+}));
+
+export default function HalfRating() {
+  const classes = useStyles();
 
-export default function RatingSize() {
   return (
-    <Box display="flex" flexDirection="column">
+    <div className={classes.root}>
       <Rating name="size-small" defaultValue={2} size="small" />
       <Rating name="size-medium" defaultValue={2} />
       <Rating name="size-large" defaultValue={2} size="large" />
-    </Box>
+    </div>
   );
 }

docs/src/pages/components/rating/RatingSize.tsx

@@ -1,13 +1,27 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/lab/Rating';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      '& > * + *': {
+        marginTop: theme.spacing(1),
+      },
+    },
+  }),
+);
+
+export default function HalfRating() {
+  const classes = useStyles();
 
-export default function RatingSize() {
   return (
-    <Box display="flex" flexDirection="column">
+    <div className={classes.root}>
       <Rating name="size-small" defaultValue={2} size="small" />
       <Rating name="size-medium" defaultValue={2} />
       <Rating name="size-large" defaultValue={2} size="large" />
-    </Box>
+    </div>
   );
 }

packages/material-ui-lab/src/Rating/Rating.js

@@ -352,7 +352,11 @@ const Rating = React.forwardRef(function Rating(props, ref) {
     );
 
     if (readOnly) {
-      return <React.Fragment key={state.value}>{container}</React.Fragment>;
+      return (
+        <span key={state.value} {...labelProps}>
+          {container}
+        </span>
+      );
     }
 
     return (