[docs] Migrate Rating demos to emotion (#25252)

mui · Mar 7, 2021 · a7aac2e · a7aac2e
1 parent 7263446
commit a7aac2e
Show file tree

Hide file tree

Showing 12 changed files with 112 additions and 176 deletions.
diff --git a/docs/src/pages/components/rating/BasicRating.js b/docs/src/pages/components/rating/BasicRating.js
@@ -1,22 +1,17 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > legend': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
 export default function BasicRating() {
-  const classes = useStyles();
   const [value, setValue] = React.useState(2);
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > legend': { mt: 2 },
+      }}
+    >
       <Typography component="legend">Controlled</Typography>
       <Rating
         name="simple-controlled"
@@ -31,6 +26,6 @@ export default function BasicRating() {
       <Rating name="disabled" value={value} disabled />
       <Typography component="legend">No rating given</Typography>
       <Rating name="no-value" value={null} />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/BasicRating.tsx b/docs/src/pages/components/rating/BasicRating.tsx
@@ -1,24 +1,17 @@
 import * as React from 'react';
-import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      '& > legend': {
-        marginTop: theme.spacing(2),
-      },
-    },
-  }),
-);
-
 export default function BasicRating() {
-  const classes = useStyles();
   const [value, setValue] = React.useState<number | null>(2);
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > legend': { mt: 2 },
+      }}
+    >
       <Typography component="legend">Controlled</Typography>
       <Rating
         name="simple-controlled"
@@ -33,6 +26,6 @@ export default function BasicRating() {
       <Rating name="disabled" value={value} disabled />
       <Typography component="legend">No rating given</Typography>
       <Rating name="no-value" value={null} />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/CustomizedRating.js b/docs/src/pages/components/rating/CustomizedRating.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/Rating';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
@@ -11,22 +12,14 @@ import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltO
 import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    '& > legend': {
-      marginTop: theme.spacing(2),
-    },
-  },
-}));
-
-const StyledRating = withStyles({
-  iconFilled: {
+const StyledRating = styled(Rating)({
+  '& .MuiRating-iconFilled': {
     color: '#ff6d75',
   },
-  iconHover: {
+  '& .MuiRating-iconHover': {
     color: '#ff3d47',
   },
-})(Rating);
+});
 
 const customIcons = {
   1: {
@@ -61,10 +54,12 @@ IconContainer.propTypes = {
 };
 
 export default function CustomizedRating() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > legend': { mt: 2 },
+      }}
+    >
       <Typography component="legend">Custom icon and color</Typography>
       <StyledRating
         name="customized-color"
@@ -83,6 +78,6 @@ export default function CustomizedRating() {
         getLabelText={(value) => customIcons[value].label}
         IconContainerComponent={IconContainer}
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/CustomizedRating.tsx b/docs/src/pages/components/rating/CustomizedRating.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { makeStyles, createStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Rating, { IconContainerProps } from '@material-ui/core/Rating';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
@@ -10,24 +11,14 @@ import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltO
 import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
 import Typography from '@material-ui/core/Typography';
 
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    root: {
-      '& > legend': {
-        marginTop: theme.spacing(2),
-      },
-    },
-  }),
-);
-
-const StyledRating = withStyles({
-  iconFilled: {
+const StyledRating = styled(Rating)({
+  '& .MuiRating-iconFilled': {
     color: '#ff6d75',
   },
-  iconHover: {
+  '& .MuiRating-iconHover': {
     color: '#ff3d47',
   },
-})(Rating);
+});
 
 const customIcons: {
   [index: string]: {
@@ -63,10 +54,12 @@ function IconContainer(props: IconContainerProps) {
 }
 
 export default function CustomizedRating() {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        '& > legend': { mt: 2 },
+      }}
+    >
       <Typography component="legend">Custom icon and color</Typography>
       <StyledRating
         name="customized-color"
@@ -85,6 +78,6 @@ export default function CustomizedRating() {
         getLabelText={(value: number) => customIcons[value].label}
         IconContainerComponent={IconContainer}
       />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/HalfRating.js b/docs/src/pages/components/rating/HalfRating.js
@@ -1,24 +1,19 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/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();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        // TODO Replace with Stack
+        '& > :not(style) + :not(style)': { mt: 1 },
+      }}
+    >
       <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
       <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/HalfRating.tsx b/docs/src/pages/components/rating/HalfRating.tsx
@@ -1,26 +1,19 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/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();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        // TODO Replace with Stack
+        '& > :not(style) + :not(style)': { mt: 1 },
+      }}
+    >
       <Rating name="half-rating" defaultValue={2.5} precision={0.5} />
       <Rating name="half-rating-read" defaultValue={2.5} precision={0.5} readOnly />
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Rating from '@material-ui/core/Rating';
 import Box from '@material-ui/core/Box';
 import StarIcon from '@material-ui/icons/Star';
@@ -17,21 +16,18 @@ const labels = {
   5: 'Excellent+',
 };
 
-const useStyles = makeStyles({
-  root: {
-    width: 200,
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
 export default function HoverRating() {
   const [value, setValue] = React.useState(2);
   const [hover, setHover] = React.useState(-1);
-  const classes = useStyles();
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: 200,
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
       <Rating
         name="hover-feedback"
         value={value}
@@ -47,6 +43,6 @@ export default function HoverRating() {
       {value !== null && (
         <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/HoverRating.tsx b/docs/src/pages/components/rating/HoverRating.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Rating from '@material-ui/core/Rating';
 import Box from '@material-ui/core/Box';
 import StarIcon from '@material-ui/icons/Star';
@@ -17,21 +16,18 @@ const labels: { [index: string]: string } = {
   5: 'Excellent+',
 };
 
-const useStyles = makeStyles({
-  root: {
-    width: 200,
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
-
 export default function HoverRating() {
   const [value, setValue] = React.useState<number | null>(2);
   const [hover, setHover] = React.useState(-1);
-  const classes = useStyles();
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        width: 200,
+        display: 'flex',
+        alignItems: 'center',
+      }}
+    >
       <Rating
         name="hover-feedback"
         value={value}
@@ -47,6 +43,6 @@ export default function HoverRating() {
       {value !== null && (
         <Box sx={{ ml: 2 }}>{labels[hover !== -1 ? hover : value]}</Box>
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/rating/RatingSize.js b/docs/src/pages/components/rating/RatingSize.js
@@ -1,25 +1,20 @@
 import * as React from 'react';
+import Box from '@material-ui/core/Box';
 import Rating from '@material-ui/core/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();
-
   return (
-    <div className={classes.root}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        // TODO Replace with Stack
+        '& > :not(style) + :not(style)': { mt: 1 },
+      }}
+    >
       <Rating name="size-small" defaultValue={2} size="small" />
       <Rating name="size-medium" defaultValue={2} />
       <Rating name="size-large" defaultValue={2} size="large" />
-    </div>
+    </Box>
   );
 }