Switch to 80ch

mui · Jun 17, 2020 · 035fa96 · 035fa96
1 parent 5ae8c4d
commit 035fa96
Show file tree

Hide file tree

Showing 850 changed files with 4,341 additions and 13,216 deletions.
diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md
@@ -107,9 +107,7 @@ function MyComponent() {
   // Pass the props as the first argument of useStyles()
   const classes = useStyles(props);
 
-  return (
-    <div className={`${classes.foo} ${classes.bar}`} />
-  );
+  return <div className={`${classes.foo} ${classes.bar}`} />;
 }
 ```
 
@@ -257,8 +255,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({
   root: {
-    background:
-      'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
+    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
     border: 0,
     borderRadius: 3,
     boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',

diff --git a/docs/src/pages/components/alert/ActionAlerts.js b/docs/src/pages/components/alert/ActionAlerts.js
@@ -17,9 +17,7 @@ export default function ActionAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert onClose={() => {}}>
-        This is a success alert — check it out!
-      </Alert>
+      <Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
       <Alert
         action={
           <Button color="inherit" size="small">

diff --git a/docs/src/pages/components/alert/ActionAlerts.tsx b/docs/src/pages/components/alert/ActionAlerts.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-} from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Alert from '@material-ui/lab/Alert';
 import Button from '@material-ui/core/Button';
 
@@ -23,9 +19,7 @@ export default function ActionAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert onClose={() => {}}>
-        This is a success alert — check it out!
-      </Alert>
+      <Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
       <Alert
         action={
           <Button color="inherit" size="small">

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

diff --git a/docs/src/pages/components/alert/DescriptionAlerts.js b/docs/src/pages/components/alert/DescriptionAlerts.js
@@ -18,23 +18,19 @@ export default function DescriptionAlerts() {
     <div className={classes.root}>
       <Alert severity="error">
         <AlertTitle>Error</AlertTitle>
-        This is an error alert —{' '}
-        <strong>check it out!</strong>
+        This is an error alert — <strong>check it out!</strong>
       </Alert>
       <Alert severity="warning">
         <AlertTitle>Warning</AlertTitle>
-        This is a warning alert —{' '}
-        <strong>check it out!</strong>
+        This is a warning alert — <strong>check it out!</strong>
       </Alert>
       <Alert severity="info">
         <AlertTitle>Info</AlertTitle>
-        This is an info alert —{' '}
-        <strong>check it out!</strong>
+        This is an info alert — <strong>check it out!</strong>
       </Alert>
       <Alert severity="success">
         <AlertTitle>Success</AlertTitle>
-        This is a success alert —{' '}
-        <strong>check it out!</strong>
+        This is a success alert — <strong>check it out!</strong>
       </Alert>
     </div>
   );

diff --git a/docs/src/pages/components/alert/DescriptionAlerts.tsx b/docs/src/pages/components/alert/DescriptionAlerts.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-} from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import { Alert, AlertTitle } from '@material-ui/lab';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -24,23 +20,19 @@ export default function DescriptionAlerts() {
     <div className={classes.root}>
       <Alert severity="error">
         <AlertTitle>Error</AlertTitle>
-        This is an error alert —{' '}
-        <strong>check it out!</strong>
+        This is an error alert — <strong>check it out!</strong>
       </Alert>
       <Alert severity="warning">
         <AlertTitle>Warning</AlertTitle>
-        This is a warning alert —{' '}
-        <strong>check it out!</strong>
+        This is a warning alert — <strong>check it out!</strong>
       </Alert>
       <Alert severity="info">
         <AlertTitle>Info</AlertTitle>
-        This is an info alert —{' '}
-        <strong>check it out!</strong>
+        This is an info alert — <strong>check it out!</strong>
       </Alert>
       <Alert severity="success">
         <AlertTitle>Success</AlertTitle>
-        This is a success alert —{' '}
-        <strong>check it out!</strong>
+        This is a success alert — <strong>check it out!</strong>
       </Alert>
     </div>
   );

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

diff --git a/docs/src/pages/components/alert/IconAlerts.js b/docs/src/pages/components/alert/IconAlerts.js
@@ -18,17 +18,12 @@ export default function IconAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert
-        icon={<CheckIcon fontSize="inherit" />}
-        severity="success"
-      >
+      <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
         This is a success alert — check it out!
       </Alert>
       <Alert
         iconMapping={{
-          success: (
-            <CheckCircleOutlineIcon fontSize="inherit" />
-          ),
+          success: <CheckCircleOutlineIcon fontSize="inherit" />,
         }}
       >
         This is a success alert — check it out!

diff --git a/docs/src/pages/components/alert/IconAlerts.tsx b/docs/src/pages/components/alert/IconAlerts.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-} from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Alert from '@material-ui/lab/Alert';
 import CheckIcon from '@material-ui/icons/Check';
 import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';
@@ -24,17 +20,12 @@ export default function IconAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert
-        icon={<CheckIcon fontSize="inherit" />}
-        severity="success"
-      >
+      <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
         This is a success alert — check it out!
       </Alert>
       <Alert
         iconMapping={{
-          success: (
-            <CheckCircleOutlineIcon fontSize="inherit" />
-          ),
+          success: <CheckCircleOutlineIcon fontSize="inherit" />,
         }}
       >
         This is a success alert — check it out!

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

diff --git a/docs/src/pages/components/alert/SimpleAlerts.js b/docs/src/pages/components/alert/SimpleAlerts.js
@@ -16,18 +16,10 @@ export default function SimpleAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert severity="error">
-        This is an error alert — check it out!
-      </Alert>
-      <Alert severity="warning">
-        This is a warning alert — check it out!
-      </Alert>
-      <Alert severity="info">
-        This is an info alert — check it out!
-      </Alert>
-      <Alert severity="success">
-        This is a success alert — check it out!
-      </Alert>
+      <Alert severity="error">This is an error alert — check it out!</Alert>
+      <Alert severity="warning">This is a warning alert — check it out!</Alert>
+      <Alert severity="info">This is an info alert — check it out!</Alert>
+      <Alert severity="success">This is a success alert — check it out!</Alert>
     </div>
   );
 }
diff --git a/docs/src/pages/components/alert/SimpleAlerts.tsx b/docs/src/pages/components/alert/SimpleAlerts.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-} from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Alert from '@material-ui/lab/Alert';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -22,18 +18,10 @@ export default function SimpleAlerts() {
 
   return (
     <div className={classes.root}>
-      <Alert severity="error">
-        This is an error alert — check it out!
-      </Alert>
-      <Alert severity="warning">
-        This is a warning alert — check it out!
-      </Alert>
-      <Alert severity="info">
-        This is an info alert — check it out!
-      </Alert>
-      <Alert severity="success">
-        This is a success alert — check it out!
-      </Alert>
+      <Alert severity="error">This is an error alert — check it out!</Alert>
+      <Alert severity="warning">This is a warning alert — check it out!</Alert>
+      <Alert severity="info">This is an info alert — check it out!</Alert>
+      <Alert severity="success">This is a success alert — check it out!</Alert>
     </div>
   );
 }
diff --git a/docs/src/pages/components/alert/TransitionAlerts.tsx b/docs/src/pages/components/alert/TransitionAlerts.tsx
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-} from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Alert from '@material-ui/lab/Alert';
 import IconButton from '@material-ui/core/IconButton';
 import Collapse from '@material-ui/core/Collapse';

diff --git a/docs/src/pages/components/app-bar/BackToTop.js b/docs/src/pages/components/app-bar/BackToTop.js
@@ -33,9 +33,9 @@ function ScrollTop(props) {
   });
 
   const handleClick = (event) => {
-    const anchor = (
-      event.target.ownerDocument || document
-    ).querySelector('#back-to-top-anchor');
+    const anchor = (event.target.ownerDocument || document).querySelector(
+      '#back-to-top-anchor',
+    );
 
     if (anchor) {
       anchor.scrollIntoView({
@@ -47,11 +47,7 @@ function ScrollTop(props) {
 
   return (
     <Zoom in={trigger}>
-      <div
-        onClick={handleClick}
-        role="presentation"
-        className={classes.root}
-      >
+      <div onClick={handleClick} role="presentation" className={classes.root}>
         {children}
       </div>
     </Zoom>
@@ -73,9 +69,7 @@ export default function BackToTop(props) {
       <CssBaseline />
       <AppBar>
         <Toolbar>
-          <Typography variant="h6">
-            Scroll to see button
-          </Typography>
+          <Typography variant="h6">Scroll to see button</Typography>
         </Toolbar>
       </AppBar>
       <Toolbar id="back-to-top-anchor" />
@@ -92,11 +86,7 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
         </Box>
       </Container>
       <ScrollTop {...props}>
-        <Fab
-          color="secondary"
-          size="small"
-          aria-label="scroll back to top"
-        >
+        <Fab color="secondary" size="small" aria-label="scroll back to top">
           <KeyboardArrowUpIcon />
         </Fab>
       </ScrollTop>

diff --git a/docs/src/pages/components/app-bar/BackToTop.tsx b/docs/src/pages/components/app-bar/BackToTop.tsx
@@ -2,11 +2,7 @@ import React from 'react';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-} from '@material-ui/core/styles';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import useScrollTrigger from '@material-ui/core/useScrollTrigger';
 import Box from '@material-ui/core/Box';
@@ -46,12 +42,9 @@ function ScrollTop(props: Props) {
     threshold: 100,
   });
 
-  const handleClick = (
-    event: React.MouseEvent<HTMLDivElement>,
-  ) => {
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     const anchor = (
-      (event.target as HTMLDivElement).ownerDocument ||
-      document
+      (event.target as HTMLDivElement).ownerDocument || document
     ).querySelector('#back-to-top-anchor');
 
     if (anchor) {
@@ -64,11 +57,7 @@ function ScrollTop(props: Props) {
 
   return (
     <Zoom in={trigger}>
-      <div
-        onClick={handleClick}
-        role="presentation"
-        className={classes.root}
-      >
+      <div onClick={handleClick} role="presentation" className={classes.root}>
         {children}
       </div>
     </Zoom>
@@ -81,9 +70,7 @@ export default function BackToTop(props: Props) {
       <CssBaseline />
       <AppBar>
         <Toolbar>
-          <Typography variant="h6">
-            Scroll to see button
-          </Typography>
+          <Typography variant="h6">Scroll to see button</Typography>
         </Toolbar>
       </AppBar>
       <Toolbar id="back-to-top-anchor" />
@@ -100,11 +87,7 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`,
         </Box>
       </Container>
       <ScrollTop {...props}>
-        <Fab
-          color="secondary"
-          size="small"
-          aria-label="scroll back to top"
-        >
+        <Fab color="secondary" size="small" aria-label="scroll back to top">
           <KeyboardArrowUpIcon />
         </Fab>
       </ScrollTop>