[Rating] Move from lab to core (#22725)

mui · Sep 25, 2020 · ea36d99 · ea36d99
1 parent d652db2
commit ea36d99
Show file tree

Hide file tree

Showing 38 changed files with 971 additions and 918 deletions.
diff --git a/docs/pages/api-docs/rating.md b/docs/pages/api-docs/rating.md
@@ -1,5 +1,5 @@
 ---
-filename: /packages/material-ui-lab/src/Rating/Rating.js
+filename: /packages/material-ui/src/Rating/Rating.js
 ---
 
 <!--- This documentation is automatically generated, do not try to edit it. -->
@@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/Rating/Rating.js
 ## Import
 
 ```js
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
 // or
-import { Rating } from '@material-ui/lab';
+import { Rating } from '@material-ui/core';
 ```
 
 You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
@@ -76,7 +76,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/Rating/Rating.js) for more detail.
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Rating/Rating.js) for more detail.
 
 ## Demos
 

diff --git a/docs/src/modules/utils/getJsxPreview.test.js b/docs/src/modules/utils/getJsxPreview.test.js
@@ -7,7 +7,7 @@ describe('getJsxPreview', () => {
       getJsxPreview(
         `
 import * as React from 'react';
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
 
 export default function HalfRating() {
   return <Rating name="half-rating" value={2.5} precision={0.5} />;

diff --git a/docs/src/pages.js b/docs/src/pages.js
@@ -41,6 +41,7 @@ const pages = [
           { pathname: '/components/radio-buttons' },
           { pathname: '/components/selects' },
           { pathname: '/components/slider' },
+          { pathname: '/components/rating' },
           { pathname: '/components/switches' },
           { pathname: '/components/text-fields' },
           { pathname: '/components/transfer-list' },
@@ -119,7 +120,6 @@ const pages = [
           { pathname: '/components/about-the-lab' },
           { pathname: '/components/autocomplete' },
           { pathname: '/components/pagination' },
-          { pathname: '/components/rating' },
           { pathname: '/components/skeleton' },
           { pathname: '/components/slider-styled' },
           { pathname: '/components/speed-dial' },

diff --git a/docs/src/pages/components/rating/BasicRating.js b/docs/src/pages/components/rating/BasicRating.js
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+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}>
+      <Typography component="legend">Controlled</Typography>
+      <Rating
+        name="simple-controlled"
+        value={value}
+        onChange={(event, newValue) => {
+          setValue(newValue);
+        }}
+      />
+      <Typography component="legend">Read only</Typography>
+      <Rating name="read-only" value={value} readOnly />
+      <Typography component="legend">Disabled</Typography>
+      <Rating name="disabled" value={value} disabled />
+      <Typography component="legend">No rating given</Typography>
+      <Rating name="no-value" value={null} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/rating/BasicRating.tsx b/docs/src/pages/components/rating/BasicRating.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+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}>
+      <Typography component="legend">Controlled</Typography>
+      <Rating
+        name="simple-controlled"
+        value={value}
+        onChange={(event, newValue) => {
+          setValue(newValue);
+        }}
+      />
+      <Typography component="legend">Read only</Typography>
+      <Rating name="read-only" value={value} readOnly />
+      <Typography component="legend">Disabled</Typography>
+      <Rating name="disabled" value={value} disabled />
+      <Typography component="legend">No rating given</Typography>
+      <Rating name="no-value" value={null} />
+    </div>
+  );
+}
diff --git a/...es/components/rating/CustomizedRatings.js → ...ges/components/rating/CustomizedRating.js b/...es/components/rating/CustomizedRatings.js → ...ges/components/rating/CustomizedRating.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import Rating from '@material-ui/lab/Rating';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+import Rating from '@material-ui/core/Rating';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
 import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
@@ -10,7 +10,14 @@ import SentimentSatisfiedIcon from '@material-ui/icons/SentimentSatisfied';
 import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltOutlined';
 import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
 import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > legend': {
+      marginTop: theme.spacing(2),
+    },
+  },
+}));
 
 const StyledRating = withStyles({
   iconFilled: {
@@ -53,33 +60,29 @@ IconContainer.propTypes = {
   value: PropTypes.number.isRequired,
 };
 
-export default function CustomizedRatings() {
+export default function CustomizedRating() {
+  const classes = useStyles();
+
   return (
-    <div>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">Custom icon and color</Typography>
-        <StyledRating
-          name="customized-color"
-          defaultValue={2}
-          getLabelText={(value) => `${value} Heart${value !== 1 ? 's' : ''}`}
-          precision={0.5}
-          icon={<FavoriteIcon fontSize="inherit" />}
-          emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
-        />
-      </Box>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">10 stars</Typography>
-        <Rating name="customized-10" defaultValue={2} max={10} />
-      </Box>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">Custom icon set</Typography>
-        <Rating
-          name="customized-icons"
-          defaultValue={2}
-          getLabelText={(value) => customIcons[value].label}
-          IconContainerComponent={IconContainer}
-        />
-      </Box>
+    <div className={classes.root}>
+      <Typography component="legend">Custom icon and color</Typography>
+      <StyledRating
+        name="customized-color"
+        defaultValue={2}
+        getLabelText={(value) => `${value} Heart${value !== 1 ? 's' : ''}`}
+        precision={0.5}
+        icon={<FavoriteIcon fontSize="inherit" />}
+        emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
+      />
+      <Typography component="legend">10 stars</Typography>
+      <Rating name="customized-10" defaultValue={2} max={10} />
+      <Typography component="legend">Custom icon set</Typography>
+      <Rating
+        name="customized-icons"
+        defaultValue={2}
+        getLabelText={(value) => customIcons[value].label}
+        IconContainerComponent={IconContainer}
+      />
     </div>
   );
 }
diff --git a/...s/components/rating/CustomizedRatings.tsx → ...es/components/rating/CustomizedRating.tsx b/...s/components/rating/CustomizedRatings.tsx → ...es/components/rating/CustomizedRating.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Rating, { IconContainerProps } from '@material-ui/lab/Rating';
+import { makeStyles, createStyles, withStyles } from '@material-ui/core/styles';
+import Rating, { IconContainerProps } from '@material-ui/core/Rating';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
 import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
@@ -9,7 +9,16 @@ import SentimentSatisfiedIcon from '@material-ui/icons/SentimentSatisfied';
 import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAltOutlined';
 import SentimentVerySatisfiedIcon from '@material-ui/icons/SentimentVerySatisfied';
 import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
+
+const useStyles = makeStyles((theme) =>
+  createStyles({
+    root: {
+      '& > legend': {
+        marginTop: theme.spacing(2),
+      },
+    },
+  }),
+);
 
 const StyledRating = withStyles({
   iconFilled: {
@@ -53,35 +62,31 @@ function IconContainer(props: IconContainerProps) {
   return <span {...other}>{customIcons[value].icon}</span>;
 }
 
-export default function CustomizedRatings() {
+export default function CustomizedRating() {
+  const classes = useStyles();
+
   return (
-    <div>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">Custom icon and color</Typography>
-        <StyledRating
-          name="customized-color"
-          defaultValue={2}
-          getLabelText={(value: number) =>
-            `${value} Heart${value !== 1 ? 's' : ''}`
-          }
-          precision={0.5}
-          icon={<FavoriteIcon fontSize="inherit" />}
-          emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
-        />
-      </Box>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">10 stars</Typography>
-        <Rating name="customized-10" defaultValue={2} max={10} />
-      </Box>
-      <Box component="fieldset" mb={3} borderColor="transparent">
-        <Typography component="legend">Custom icon set</Typography>
-        <Rating
-          name="customized-icons"
-          defaultValue={2}
-          getLabelText={(value: number) => customIcons[value].label}
-          IconContainerComponent={IconContainer}
-        />
-      </Box>
+    <div className={classes.root}>
+      <Typography component="legend">Custom icon and color</Typography>
+      <StyledRating
+        name="customized-color"
+        defaultValue={2}
+        getLabelText={(value: number) =>
+          `${value} Heart${value !== 1 ? 's' : ''}`
+        }
+        precision={0.5}
+        icon={<FavoriteIcon fontSize="inherit" />}
+        emptyIcon={<FavoriteBorderIcon fontSize="inherit" />}
+      />
+      <Typography component="legend">10 stars</Typography>
+      <Rating name="customized-10" defaultValue={2} max={10} />
+      <Typography component="legend">Custom icon set</Typography>
+      <Rating
+        name="customized-icons"
+        defaultValue={2}
+        getLabelText={(value: number) => customIcons[value].label}
+        IconContainerComponent={IconContainer}
+      />
     </div>
   );
 }
diff --git a/docs/src/pages/components/rating/HalfRating.js b/docs/src/pages/components/rating/HalfRating.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({

diff --git a/docs/src/pages/components/rating/HalfRating.tsx b/docs/src/pages/components/rating/HalfRating.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) =>

diff --git a/docs/src/pages/components/rating/HoverRating.js b/docs/src/pages/components/rating/HoverRating.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
 import Box from '@material-ui/core/Box';
 import StarIcon from '@material-ui/icons/Star';
 

diff --git a/docs/src/pages/components/rating/HoverRating.tsx b/docs/src/pages/components/rating/HoverRating.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
 import Box from '@material-ui/core/Box';
 import StarIcon from '@material-ui/icons/Star';
 

diff --git a/docs/src/pages/components/rating/RatingSize.js b/docs/src/pages/components/rating/RatingSize.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({

diff --git a/docs/src/pages/components/rating/RatingSize.tsx b/docs/src/pages/components/rating/RatingSize.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) =>

diff --git a/docs/src/pages/components/rating/SimpleRating.js b/docs/src/pages/components/rating/SimpleRating.js