[core] Batch small changes (#24445)

mui · Jan 16, 2021 · fd4d693 · fd4d693
1 parent e0b0823
commit fd4d693
Show file tree

Hide file tree

Showing 19 changed files with 90 additions and 197 deletions.
diff --git a/docs/pages/branding/about.tsx b/docs/pages/branding/about.tsx
@@ -129,7 +129,7 @@ export default function Page() {
               </Button>
             </BrandingCard>
           </Grid>
-          <Grid>
+          <Grid item xs={12} md={6}>
             <BrandingCard icon={<HelpIcon fontSize="large" />} title="Help new users">
               <Typography sx={{ mt: 2 }}>
                 You can answer questions on{' '}

diff --git a/docs/src/pages/components/transitions/SimpleSlide.js b/docs/src/pages/components/transitions/SimpleSlide.js
@@ -10,7 +10,7 @@ const useStyles = makeStyles((theme) => ({
     height: 180,
   },
   wrapper: {
-    width: 100 + theme.spacing(2),
+    width: `calc(100px + ${theme.spacing(2)})`,
   },
   paper: {
     zIndex: 1,

diff --git a/docs/src/pages/components/transitions/SimpleSlide.tsx b/docs/src/pages/components/transitions/SimpleSlide.tsx
@@ -11,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) =>
       height: 180,
     },
     wrapper: {
-      width: 100 + theme.spacing(2),
+      width: `calc(100px + ${theme.spacing(2)})`,
     },
     paper: {
       zIndex: 1,

diff --git a/docs/src/pages/customization/how-to-customize/how-to-customize.md b/docs/src/pages/customization/how-to-customize/how-to-customize.md
@@ -167,7 +167,7 @@ Components expose [global class names](/styles/advanced/#with-material-ui-core)
 
 ```css
 .MuiButton-root {
-  fontsize: '1rem';
+  font-size: 1rem;
 }
 ```
 

diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.js b/docs/src/pages/getting-started/templates/dashboard/Dashboard.js
@@ -23,9 +23,9 @@ import Chart from './Chart';
 import Deposits from './Deposits';
 import Orders from './Orders';
 
-function Copyright() {
+function Copyright(props) {
   return (
-    <Typography variant="body2" color="textSecondary" align="center">
+    <Typography variant="body2" color="textSecondary" align="center" {...props}>
       {'Copyright © '}
       <Link color="inherit" href="https://material-ui.com/">
         Your Website
@@ -39,9 +39,6 @@ function Copyright() {
 const drawerWidth = 240;
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-  },
   toolbar: {
     paddingRight: 24, // keep right padding when drawer closed
   },
@@ -73,9 +70,6 @@ const useStyles = makeStyles((theme) => ({
   menuButtonHidden: {
     display: 'none',
   },
-  title: {
-    flexGrow: 1,
-  },
   drawerPaper: {
     position: 'relative',
     whiteSpace: 'nowrap',
@@ -98,28 +92,6 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   appBarSpacer: theme.mixins.toolbar,
-  content: {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[100]
-        : theme.palette.grey[900],
-    flexGrow: 1,
-    height: '100vh',
-    overflow: 'auto',
-  },
-  container: {
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
-  },
-  paper: {
-    padding: theme.spacing(2),
-    display: 'flex',
-    overflow: 'auto',
-    flexDirection: 'column',
-  },
-  fixedHeight: {
-    height: 240,
-  },
 }));
 
 export default function Dashboard() {
@@ -128,10 +100,9 @@ export default function Dashboard() {
   const toggleDrawer = () => {
     setOpen(!open);
   };
-  const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ display: 'flex' }}>
       <CssBaseline />
       <AppBar
         position="absolute"
@@ -152,7 +123,7 @@ export default function Dashboard() {
             variant="h6"
             color="inherit"
             noWrap
-            className={classes.title}
+            sx={{ flexGrow: 1 }}
           >
             Dashboard
           </Typography>
@@ -180,34 +151,47 @@ export default function Dashboard() {
         <Divider />
         <List>{secondaryListItems}</List>
       </Drawer>
-      <main className={classes.content}>
+      <Box
+        component="main"
+        sx={{
+          backgroundColor: (theme) =>
+            theme.palette.mode === 'light'
+              ? theme.palette.grey[100]
+              : theme.palette.grey[900],
+          flexGrow: 1,
+          height: '100vh',
+          overflow: 'auto',
+        }}
+      >
         <div className={classes.appBarSpacer} />
-        <Container maxWidth="lg" className={classes.container}>
+        <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
           <Grid container spacing={3}>
             {/* Chart */}
             <Grid item xs={12} md={8} lg={9}>
-              <Paper className={fixedHeightPaper}>
+              <Paper
+                sx={{ p: 2, display: 'flex', flexDirection: 'column', height: 240 }}
+              >
                 <Chart />
               </Paper>
             </Grid>
             {/* Recent Deposits */}
             <Grid item xs={12} md={4} lg={3}>
-              <Paper className={fixedHeightPaper}>
+              <Paper
+                sx={{ p: 2, display: 'flex', flexDirection: 'column', height: 240 }}
+              >
                 <Deposits />
               </Paper>
             </Grid>
             {/* Recent Orders */}
             <Grid item xs={12}>
-              <Paper className={classes.paper}>
+              <Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
                 <Orders />
               </Paper>
             </Grid>
           </Grid>
-          <Box sx={{ pt: 4 }}>
-            <Copyright />
-          </Box>
+          <Copyright sx={{ pt: 4 }} />
         </Container>
-      </main>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx b/docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx
@@ -23,9 +23,9 @@ import Chart from './Chart';
 import Deposits from './Deposits';
 import Orders from './Orders';
 
-function Copyright() {
+function Copyright(props: any) {
   return (
-    <Typography variant="body2" color="textSecondary" align="center">
+    <Typography variant="body2" color="textSecondary" align="center" {...props}>
       {'Copyright © '}
       <Link color="inherit" href="https://material-ui.com/">
         Your Website
@@ -39,9 +39,6 @@ function Copyright() {
 const drawerWidth = 240;
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-  },
   toolbar: {
     paddingRight: 24, // keep right padding when drawer closed
   },
@@ -73,9 +70,6 @@ const useStyles = makeStyles((theme) => ({
   menuButtonHidden: {
     display: 'none',
   },
-  title: {
-    flexGrow: 1,
-  },
   drawerPaper: {
     position: 'relative',
     whiteSpace: 'nowrap',
@@ -98,28 +92,6 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   appBarSpacer: theme.mixins.toolbar,
-  content: {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[100]
-        : theme.palette.grey[900],
-    flexGrow: 1,
-    height: '100vh',
-    overflow: 'auto',
-  },
-  container: {
-    paddingTop: theme.spacing(4),
-    paddingBottom: theme.spacing(4),
-  },
-  paper: {
-    padding: theme.spacing(2),
-    display: 'flex',
-    overflow: 'auto',
-    flexDirection: 'column',
-  },
-  fixedHeight: {
-    height: 240,
-  },
 }));
 
 export default function Dashboard() {
@@ -128,10 +100,9 @@ export default function Dashboard() {
   const toggleDrawer = () => {
     setOpen(!open);
   };
-  const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
 
   return (
-    <div className={classes.root}>
+    <Box sx={{ display: 'flex' }}>
       <CssBaseline />
       <AppBar
         position="absolute"
@@ -152,7 +123,7 @@ export default function Dashboard() {
             variant="h6"
             color="inherit"
             noWrap
-            className={classes.title}
+            sx={{ flexGrow: 1 }}
           >
             Dashboard
           </Typography>
@@ -180,34 +151,47 @@ export default function Dashboard() {
         <Divider />
         <List>{secondaryListItems}</List>
       </Drawer>
-      <main className={classes.content}>
+      <Box
+        component="main"
+        sx={{
+          backgroundColor: (theme) =>
+            theme.palette.mode === 'light'
+              ? theme.palette.grey[100]
+              : theme.palette.grey[900],
+          flexGrow: 1,
+          height: '100vh',
+          overflow: 'auto',
+        }}
+      >
         <div className={classes.appBarSpacer} />
-        <Container maxWidth="lg" className={classes.container}>
+        <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
           <Grid container spacing={3}>
             {/* Chart */}
             <Grid item xs={12} md={8} lg={9}>
-              <Paper className={fixedHeightPaper}>
+              <Paper
+                sx={{ p: 2, display: 'flex', flexDirection: 'column', height: 240 }}
+              >
                 <Chart />
               </Paper>
             </Grid>
             {/* Recent Deposits */}
             <Grid item xs={12} md={4} lg={3}>
-              <Paper className={fixedHeightPaper}>
+              <Paper
+                sx={{ p: 2, display: 'flex', flexDirection: 'column', height: 240 }}
+              >
                 <Deposits />
               </Paper>
             </Grid>
             {/* Recent Orders */}
             <Grid item xs={12}>
-              <Paper className={classes.paper}>
+              <Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
                 <Orders />
               </Paper>
             </Grid>
           </Grid>
-          <Box sx={{ pt: 4 }}>
-            <Copyright />
-          </Box>
+          <Copyright sx={{ pt: 4 }} />
         </Container>
-      </main>
-    </div>
+      </Box>
+    </Box>
   );
 }
diff --git a/docs/src/pages/getting-started/templates/dashboard/Deposits.js b/docs/src/pages/getting-started/templates/dashboard/Deposits.js
@@ -1,28 +1,20 @@
 import * as React from 'react';
 import Link from '@material-ui/core/Link';
-import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Title from './Title';
 
 function preventDefault(event) {
   event.preventDefault();
 }
 
-const useStyles = makeStyles({
-  depositContext: {
-    flex: 1,
-  },
-});
-
 export default function Deposits() {
-  const classes = useStyles();
   return (
     <React.Fragment>
       <Title>Recent Deposits</Title>
       <Typography component="p" variant="h4">
         $3,024.00
       </Typography>
-      <Typography color="textSecondary" className={classes.depositContext}>
+      <Typography color="textSecondary" sx={{ flex: 1 }}>
         on 15 March, 2019
       </Typography>
       <div>

diff --git a/docs/src/pages/getting-started/templates/dashboard/Deposits.tsx b/docs/src/pages/getting-started/templates/dashboard/Deposits.tsx
@@ -1,28 +1,20 @@
 import * as React from 'react';
 import Link from '@material-ui/core/Link';
-import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Title from './Title';
 
 function preventDefault(event: React.MouseEvent) {
   event.preventDefault();
 }
 
-const useStyles = makeStyles({
-  depositContext: {
-    flex: 1,
-  },
-});
-
 export default function Deposits() {
-  const classes = useStyles();
   return (
     <React.Fragment>
       <Title>Recent Deposits</Title>
       <Typography component="p" variant="h4">
         $3,024.00
       </Typography>
-      <Typography color="textSecondary" className={classes.depositContext}>
+      <Typography color="textSecondary" sx={{ flex: 1 }}>
         on 15 March, 2019
       </Typography>
       <div>