[core] Batch small changes (#26083)

mui · May 2, 2021 · af21780 · af21780
1 parent 6b748ca
commit af21780
Show file tree

Hide file tree

Showing 14 changed files with 175 additions and 247 deletions.
diff --git a/docs/pages/branding/pricing.tsx b/docs/pages/branding/pricing.tsx
@@ -51,7 +51,7 @@ const startMaterialUi = [
     title: 'Pro',
     content: 'Best for professional developers building data-rich enterprise applications.',
     actualPrice: 249,
-    price: 129,
+    price: 186,
     priceFor: 'per developer',
     priceDescription: 'Price capped at 10 developers',
     buttonTitle: 'Learn more',

diff --git a/docs/src/modules/branding/ComparisonTable.tsx b/docs/src/modules/branding/ComparisonTable.tsx
@@ -246,7 +246,7 @@ const rows = [
   ),
   createRow(
     <PlanFeature
-      text="Tehnical advisory*"
+      text="Technical advisory*"
       tooltipText="Get the advice you need, from the people who build the product."
     />,
     <PlanStatus closeIcon />,

diff --git a/docs/src/modules/components/DemoToolbar.js b/docs/src/modules/components/DemoToolbar.js
@@ -281,7 +281,11 @@ export default function DemoToolbar(props) {
     form.target = '_blank';
     form.action = 'https://codeSandbox.io/api/v1/sandboxes/define';
     addHiddenInput(form, 'parameters', parameters);
-    addHiddenInput(form, 'query', 'file=/demo.tsx');
+    addHiddenInput(
+      form,
+      'query',
+      codeVariant === CODE_VARIANTS.TS ? 'file=/demo.tsx' : 'file=/demo.js',
+    );
     document.body.appendChild(form);
     form.submit();
     document.body.removeChild(form);

diff --git a/docs/src/pages/getting-started/templates/blog/FeaturedPost.js b/docs/src/pages/getting-started/templates/blog/FeaturedPost.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
@@ -9,45 +8,30 @@ import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Hidden from '@material-ui/core/Hidden';
 
-const useStyles = makeStyles({
-  card: {
-    display: 'flex',
-  },
-  cardDetails: {
-    flex: 1,
-  },
-  cardMedia: {
-    width: 160,
-  },
-});
-
 function FeaturedPost(props) {
-  const classes = useStyles();
   const { post } = props;
 
   return (
     <Grid item xs={12} md={6}>
       <CardActionArea component="a" href="#">
-        <Card className={classes.card}>
-          <div className={classes.cardDetails}>
-            <CardContent>
-              <Typography component="h2" variant="h5">
-                {post.title}
-              </Typography>
-              <Typography variant="subtitle1" color="text.secondary">
-                {post.date}
-              </Typography>
-              <Typography variant="subtitle1" paragraph>
-                {post.description}
-              </Typography>
-              <Typography variant="subtitle1" color="primary">
-                Continue reading...
-              </Typography>
-            </CardContent>
-          </div>
+        <Card sx={{ display: 'flex' }}>
+          <CardContent sx={{ flex: 1 }}>
+            <Typography component="h2" variant="h5">
+              {post.title}
+            </Typography>
+            <Typography variant="subtitle1" color="text.secondary">
+              {post.date}
+            </Typography>
+            <Typography variant="subtitle1" paragraph>
+              {post.description}
+            </Typography>
+            <Typography variant="subtitle1" color="primary">
+              Continue reading...
+            </Typography>
+          </CardContent>
           <Hidden smDown>
             <CardMedia
-              className={classes.cardMedia}
+              sx={{ width: 160 }}
               image={post.image}
               title={post.imageText}
             />

diff --git a/docs/src/pages/getting-started/templates/blog/FeaturedPost.tsx b/docs/src/pages/getting-started/templates/blog/FeaturedPost.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
@@ -8,18 +7,6 @@ import CardContent from '@material-ui/core/CardContent';
 import CardMedia from '@material-ui/core/CardMedia';
 import Hidden from '@material-ui/core/Hidden';
 
-const useStyles = makeStyles({
-  card: {
-    display: 'flex',
-  },
-  cardDetails: {
-    flex: 1,
-  },
-  cardMedia: {
-    width: 160,
-  },
-});
-
 interface FeaturedPostProps {
   post: {
     date: string;
@@ -31,32 +18,29 @@ interface FeaturedPostProps {
 }
 
 export default function FeaturedPost(props: FeaturedPostProps) {
-  const classes = useStyles();
   const { post } = props;
 
   return (
     <Grid item xs={12} md={6}>
       <CardActionArea component="a" href="#">
-        <Card className={classes.card}>
-          <div className={classes.cardDetails}>
-            <CardContent>
-              <Typography component="h2" variant="h5">
-                {post.title}
-              </Typography>
-              <Typography variant="subtitle1" color="text.secondary">
-                {post.date}
-              </Typography>
-              <Typography variant="subtitle1" paragraph>
-                {post.description}
-              </Typography>
-              <Typography variant="subtitle1" color="primary">
-                Continue reading...
-              </Typography>
-            </CardContent>
-          </div>
+        <Card sx={{ display: 'flex' }}>
+          <CardContent sx={{ flex: 1 }}>
+            <Typography component="h2" variant="h5">
+              {post.title}
+            </Typography>
+            <Typography variant="subtitle1" color="text.secondary">
+              {post.date}
+            </Typography>
+            <Typography variant="subtitle1" paragraph>
+              {post.description}
+            </Typography>
+            <Typography variant="subtitle1" color="primary">
+              Continue reading...
+            </Typography>
+          </CardContent>
           <Hidden smDown>
             <CardMedia
-              className={classes.cardMedia}
+              sx={{ width: 160 }}
               image={post.image}
               title={post.imageText}
             />

diff --git a/docs/src/pages/getting-started/templates/blog/Main.js b/docs/src/pages/getting-started/templates/blog/Main.js
@@ -1,30 +1,30 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import Markdown from './Markdown';
 
-const useStyles = makeStyles((theme) => ({
-  markdown: {
-    ...theme.typography.body2,
-    padding: theme.spacing(3, 0),
-  },
-}));
-
 function Main(props) {
-  const classes = useStyles();
   const { posts, title } = props;
 
   return (
-    <Grid item xs={12} md={8}>
+    <Grid
+      item
+      xs={12}
+      md={8}
+      sx={{
+        '& .markdown': {
+          py: 3,
+        },
+      }}
+    >
       <Typography variant="h6" gutterBottom>
         {title}
       </Typography>
       <Divider />
       {posts.map((post) => (
-        <Markdown className={classes.markdown} key={post.substring(0, 40)}>
+        <Markdown className="markdown" key={post.substring(0, 40)}>
           {post}
         </Markdown>
       ))}

diff --git a/docs/src/pages/getting-started/templates/blog/Main.tsx b/docs/src/pages/getting-started/templates/blog/Main.tsx
@@ -1,34 +1,34 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import Markdown from './Markdown';
 
-const useStyles = makeStyles((theme) => ({
-  markdown: {
-    ...theme.typography.body2,
-    padding: theme.spacing(3, 0),
-  },
-}));
-
 interface MainProps {
   posts: ReadonlyArray<string>;
   title: string;
 }
 
 export default function Main(props: MainProps) {
-  const classes = useStyles();
   const { posts, title } = props;
 
   return (
-    <Grid item xs={12} md={8}>
+    <Grid
+      item
+      xs={12}
+      md={8}
+      sx={{
+        '& .markdown': {
+          py: 3,
+        },
+      }}
+    >
       <Typography variant="h6" gutterBottom>
         {title}
       </Typography>
       <Divider />
       {posts.map((post) => (
-        <Markdown className={classes.markdown} key={post.substring(0, 40)}>
+        <Markdown className="markdown" key={post.substring(0, 40)}>
           {post}
         </Markdown>
       ))}

diff --git a/docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js b/docs/src/pages/getting-started/templates/blog/MainFeaturedPost.js
@@ -1,55 +1,48 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import Link from '@material-ui/core/Link';
-
-const useStyles = makeStyles((theme) => ({
-  mainFeaturedPost: {
-    position: 'relative',
-    backgroundColor: theme.palette.grey[800],
-    color: theme.palette.common.white,
-    marginBottom: theme.spacing(4),
-    backgroundImage: 'url(https://source.unsplash.com/random)',
-    backgroundSize: 'cover',
-    backgroundRepeat: 'no-repeat',
-    backgroundPosition: 'center',
-  },
-  overlay: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    right: 0,
-    left: 0,
-    backgroundColor: 'rgba(0,0,0,.3)',
-  },
-  mainFeaturedPostContent: {
-    position: 'relative',
-    padding: theme.spacing(3),
-    [theme.breakpoints.up('md')]: {
-      padding: theme.spacing(6),
-      paddingRight: 0,
-    },
-  },
-}));
+import Box from '@material-ui/core/Box';
 
 function MainFeaturedPost(props) {
-  const classes = useStyles();
   const { post } = props;
 
   return (
     <Paper
-      className={classes.mainFeaturedPost}
-      style={{ backgroundImage: `url(${post.image})` }}
+      sx={{
+        position: 'relative',
+        backgroundColor: 'grey.800',
+        color: '#fff',
+        mb: 4,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backgroundImage: `url(${post.image})`,
+      }}
     >
       {/* Increase the priority of the hero background image */}
       {<img style={{ display: 'none' }} src={post.image} alt={post.imageText} />}
-      <div className={classes.overlay} />
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          right: 0,
+          left: 0,
+          backgroundColor: 'rgba(0,0,0,.3)',
+        }}
+      />
       <Grid container>
         <Grid item md={6}>
-          <div className={classes.mainFeaturedPostContent}>
+          <Box
+            sx={{
+              position: 'relative',
+              p: { xs: 3, md: 6 },
+              pr: { md: 0 },
+            }}
+          >
             <Typography component="h1" variant="h3" color="inherit" gutterBottom>
               {post.title}
             </Typography>
@@ -59,7 +52,7 @@ function MainFeaturedPost(props) {
             <Link variant="subtitle1" href="#">
               {post.linkText}
             </Link>
-          </div>
+          </Box>
         </Grid>
       </Grid>
     </Paper>