From 83f204a6399afab7fe6b42c26665b4cc58320b91 Mon Sep 17 00:00:00 2001
From: Tommy Jackson <tom.jackson50@gmail.com>
Date: Sun, 26 Jan 2020 18:07:10 +0000
Subject: [PATCH 1/2] created initial changes to rating component to prevent it
 from duplicating, from changing it to  read only and setting precision to a
 float number.

---
 docs/src/pages/components/rating/HalfRating.tsx | 10 ++++++++--
 packages/material-ui-lab/src/Rating/Rating.js   |  3 ++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/components/rating/HalfRating.tsx b/docs/src/pages/components/rating/HalfRating.tsx
index 3beeb8f18d6b1a..0a3008572c2e89 100644
--- a/docs/src/pages/components/rating/HalfRating.tsx
+++ b/docs/src/pages/components/rating/HalfRating.tsx
@@ -1,6 +1,12 @@
+
 import React from 'react';
 import Rating from '@material-ui/lab/Rating';
-
 export default function HalfRating() {
-  return <Rating name="half-rating" defaultValue={2.5} precision={0.5} />;
+  //return <Rating name="half-rating" defaultValue={2.5} precision={0.5} />;
+  return (
+    <div>
+      <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
+      <Rating name="half-rating-read-only" defaultValue={2.5} precision={0.5} readOnly />
+    </div>
+  );
 }
diff --git a/packages/material-ui-lab/src/Rating/Rating.js b/packages/material-ui-lab/src/Rating/Rating.js
index 2089fd52135f8d..c3e6cb5bd1271d 100644
--- a/packages/material-ui-lab/src/Rating/Rating.js
+++ b/packages/material-ui-lab/src/Rating/Rating.js
@@ -352,7 +352,8 @@ const Rating = React.forwardRef(function Rating(props, ref) {
     );
 
     if (readOnly) {
-      return <React.Fragment key={state.value}>{container}</React.Fragment>;
+      //return <React.Fragment key={state.value}>{container}</React.Fragment>;
+      return <span key={state.value} {...labelProps}>{container}</span>;
     }
 
     return (

From 3710c4b2463c544b32e8c7849c4ee84ce0139b89 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 26 Jan 2020 23:47:29 +0100
Subject: [PATCH 2/2] improve the demos

---
 .../src/pages/components/rating/HalfRating.js | 20 ++++++++++++++++-
 .../pages/components/rating/HalfRating.tsx    | 22 +++++++++++++++----
 .../pages/components/rating/HoverRating.js    |  4 ++--
 .../pages/components/rating/HoverRating.tsx   |  4 ++--
 .../src/pages/components/rating/RatingSize.js | 20 +++++++++++++----
 .../pages/components/rating/RatingSize.tsx    | 22 +++++++++++++++----
 packages/material-ui-lab/src/Rating/Rating.js |  7 ++++--
 7 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/docs/src/pages/components/rating/HalfRating.js b/docs/src/pages/components/rating/HalfRating.js
index 3beeb8f18d6b1a..a5597fe76ae5ec 100644
--- a/docs/src/pages/components/rating/HalfRating.js
+++ b/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>
+  );
 }
diff --git a/docs/src/pages/components/rating/HalfRating.tsx b/docs/src/pages/components/rating/HalfRating.tsx
index 0a3008572c2e89..730ef30d06630d 100644
--- a/docs/src/pages/components/rating/HalfRating.tsx
+++ b/docs/src/pages/components/rating/HalfRating.tsx
@@ -1,12 +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>
+    <div className={classes.root}>
       <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
-      <Rating name="half-rating-read-only" defaultValue={2.5} precision={0.5} readOnly />
+      <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
     </div>
   );
 }
diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js
index cf11938db9e131..761a8b555c7345 100644
--- a/docs/src/pages/components/rating/HoverRating.js
+++ b/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}
diff --git a/docs/src/pages/components/rating/HoverRating.tsx b/docs/src/pages/components/rating/HoverRating.tsx
index 5de615b57820e1..f047e1c2d4d507 100644
--- a/docs/src/pages/components/rating/HoverRating.tsx
+++ b/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}
diff --git a/docs/src/pages/components/rating/RatingSize.js b/docs/src/pages/components/rating/RatingSize.js
index 13a89e0d6a8bcc..37a5ef009bcc11 100644
--- a/docs/src/pages/components/rating/RatingSize.js
+++ b/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>
   );
 }
diff --git a/docs/src/pages/components/rating/RatingSize.tsx b/docs/src/pages/components/rating/RatingSize.tsx
index 13a89e0d6a8bcc..a58bef1336230d 100644
--- a/docs/src/pages/components/rating/RatingSize.tsx
+++ b/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>
   );
 }
diff --git a/packages/material-ui-lab/src/Rating/Rating.js b/packages/material-ui-lab/src/Rating/Rating.js
index c3e6cb5bd1271d..a105c3caca973f 100644
--- a/packages/material-ui-lab/src/Rating/Rating.js
+++ b/packages/material-ui-lab/src/Rating/Rating.js
@@ -352,8 +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 (
+        <span key={state.value} {...labelProps}>
+          {container}
+        </span>
+      );
     }
 
     return (