[docs] Migrate ClickAwayListener demos to emotion (#25507)

mui · Mar 26, 2021 · be64127 · be64127
1 parent d117947
commit be64127
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 128 deletions.
diff --git a/docs/src/pages/components/click-away-listener/ClickAway.js b/docs/src/pages/components/click-away-listener/ClickAway.js
@@ -1,25 +1,8 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    position: 'relative',
-  },
-  dropdown: {
-    position: 'absolute',
-    top: 28,
-    right: 0,
-    left: 0,
-    zIndex: 1,
-    border: '1px solid',
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function ClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -30,18 +13,29 @@ export default function ClickAway() {
     setOpen(false);
   };
 
+  const styles = {
+    position: 'absolute',
+    top: 28,
+    right: 0,
+    left: 0,
+    zIndex: 1,
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
-      <div className={classes.root}>
+      <Box sx={{ position: 'relative' }}>
         <button type="button" onClick={handleClick}>
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.dropdown}>
+          <Box sx={styles}>
             Click me, I will stay visible until you click outside.
-          </div>
+          </Box>
         ) : null}
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/docs/src/pages/components/click-away-listener/ClickAway.tsx b/docs/src/pages/components/click-away-listener/ClickAway.tsx
@@ -1,27 +1,9 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      position: 'relative',
-    },
-    dropdown: {
-      position: 'absolute',
-      top: 28,
-      right: 0,
-      left: 0,
-      zIndex: 1,
-      border: '1px solid',
-      padding: theme.spacing(1),
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
+import { SxProps } from '@material-ui/system';
 
 export default function ClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -32,18 +14,29 @@ export default function ClickAway() {
     setOpen(false);
   };
 
+  const styles: SxProps = {
+    position: 'absolute',
+    top: 28,
+    right: 0,
+    left: 0,
+    zIndex: 1,
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
-      <div className={classes.root}>
+      <Box sx={{ position: 'relative' }}>
         <button type="button" onClick={handleClick}>
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.dropdown}>
+          <Box sx={styles}>
             Click me, I will stay visible until you click outside.
-          </div>
+          </Box>
         ) : null}
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/docs/src/pages/components/click-away-listener/LeadingClickAway.js b/docs/src/pages/components/click-away-listener/LeadingClickAway.js
@@ -1,25 +1,8 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    position: 'relative',
-  },
-  dropdown: {
-    position: 'absolute',
-    top: 28,
-    right: 0,
-    left: 0,
-    zIndex: 1,
-    border: '1px solid',
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function LeadingClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -30,22 +13,33 @@ export default function LeadingClickAway() {
     setOpen(false);
   };
 
+  const styles = {
+    position: 'absolute',
+    top: 28,
+    right: 0,
+    left: 0,
+    zIndex: 1,
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener
       mouseEvent="onMouseDown"
       touchEvent="onTouchStart"
       onClickAway={handleClickAway}
     >
-      <div className={classes.root}>
+      <Box sx={{ position: 'relative' }}>
         <button type="button" onClick={handleClick}>
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.dropdown}>
+          <Box sx={styles}>
             Click me, I will stay visible until you click outside.
-          </div>
+          </Box>
         ) : null}
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/docs/src/pages/components/click-away-listener/LeadingClickAway.tsx b/docs/src/pages/components/click-away-listener/LeadingClickAway.tsx
@@ -1,27 +1,9 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      position: 'relative',
-    },
-    dropdown: {
-      position: 'absolute',
-      top: 28,
-      right: 0,
-      left: 0,
-      zIndex: 1,
-      border: '1px solid',
-      padding: theme.spacing(1),
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
+import { SxProps } from '@material-ui/system';
 
 export default function LeadingClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -32,22 +14,33 @@ export default function LeadingClickAway() {
     setOpen(false);
   };
 
+  const styles: SxProps = {
+    position: 'absolute',
+    top: 28,
+    right: 0,
+    left: 0,
+    zIndex: 1,
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener
       mouseEvent="onMouseDown"
       touchEvent="onTouchStart"
       onClickAway={handleClickAway}
     >
-      <div className={classes.root}>
+      <Box sx={{ position: 'relative' }}>
         <button type="button" onClick={handleClick}>
           Open menu dropdown
         </button>
         {open ? (
-          <div className={classes.dropdown}>
+          <Box sx={styles}>
             Click me, I will stay visible until you click outside.
-          </div>
+          </Box>
         ) : null}
-      </div>
+      </Box>
     </ClickAwayListener>
   );
 }
diff --git a/docs/src/pages/components/click-away-listener/PortalClickAway.js b/docs/src/pages/components/click-away-listener/PortalClickAway.js
@@ -1,23 +1,9 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Portal from '@material-ui/core/Portal';
 
-const useStyles = makeStyles((theme) => ({
-  dropdown: {
-    position: 'fixed',
-    width: 200,
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-    border: '1px solid',
-    padding: theme.spacing(1),
-    backgroundColor: theme.palette.background.paper,
-  },
-}));
-
 export default function PortalClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -28,6 +14,17 @@ export default function PortalClickAway() {
     setOpen(false);
   };
 
+  const styles = {
+    position: 'fixed',
+    width: 200,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
       <div>
@@ -36,9 +33,9 @@ export default function PortalClickAway() {
         </button>
         {open ? (
           <Portal>
-            <div className={classes.dropdown}>
+            <Box sx={styles}>
               Click me, I will stay visible until you click outside.
-            </div>
+            </Box>
           </Portal>
         ) : null}
       </div>

diff --git a/docs/src/pages/components/click-away-listener/PortalClickAway.tsx b/docs/src/pages/components/click-away-listener/PortalClickAway.tsx
@@ -1,25 +1,10 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import ClickAwayListener from '@material-ui/core/ClickAwayListener';
 import Portal from '@material-ui/core/Portal';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    dropdown: {
-      position: 'fixed',
-      width: 200,
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      border: '1px solid',
-      padding: theme.spacing(1),
-      backgroundColor: theme.palette.background.paper,
-    },
-  }),
-);
+import { SxProps } from '@material-ui/system';
 
 export default function PortalClickAway() {
-  const classes = useStyles();
   const [open, setOpen] = React.useState(false);
 
   const handleClick = () => {
@@ -30,6 +15,17 @@ export default function PortalClickAway() {
     setOpen(false);
   };
 
+  const styles: SxProps = {
+    position: 'fixed',
+    width: 200,
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    border: '1px solid',
+    p: 1,
+    bgcolor: 'background.paper',
+  };
+
   return (
     <ClickAwayListener onClickAway={handleClickAway}>
       <div>
@@ -38,9 +34,9 @@ export default function PortalClickAway() {
         </button>
         {open ? (
           <Portal>
-            <div className={classes.dropdown}>
+            <Box sx={styles}>
               Click me, I will stay visible until you click outside.
-            </div>
+            </Box>
           </Portal>
         ) : null}
       </div>