[docs] Migrate Popover demos to emotion (#25620)

mui · Apr 6, 2021 · 3b2c8e9 · 3b2c8e9
1 parent 30dccc2
commit 3b2c8e9
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 130 deletions.
diff --git a/docs/src/pages/components/popover/AnchorPlayground.js b/docs/src/pages/components/popover/AnchorPlayground.js
@@ -1,6 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import FormControl from '@material-ui/core/FormControl';
 import FormLabel from '@material-ui/core/FormLabel';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -10,35 +8,12 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Grid from '@material-ui/core/Grid';
 import { green } from '@material-ui/core/colors';
 import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import Popover from '@material-ui/core/Popover';
 import Input from '@material-ui/core/Input';
 import InputLabel from '@material-ui/core/InputLabel';
 
-const styles = (theme) => ({
-  buttonWrapper: {
-    position: 'relative',
-    marginBottom: theme.spacing(4),
-  },
-  anchor: {
-    backgroundColor: green[500],
-    width: 10,
-    height: 10,
-    borderRadius: '50%',
-    position: 'absolute',
-  },
-  radioAnchor: {
-    color: green[600],
-    '&$checked': {
-      color: green[500],
-    },
-  },
-  checked: {},
-  typography: {
-    margin: theme.spacing(2),
-  },
-});
-
 const inlineStyles = {
   anchorVertical: {
     top: {
@@ -64,8 +39,7 @@ const inlineStyles = {
   },
 };
 
-function AnchorPlayground(props) {
-  const { classes } = props;
+function AnchorPlayground() {
   const anchorRef = React.useRef();
 
   const [state, setState] = React.useState({
@@ -142,20 +116,28 @@ function AnchorPlayground(props) {
 `;
 
   const radioAnchorClasses = {
-    root: classes.radioAnchor,
-    checked: classes.checked,
+    color: green[600],
+    '&.Mui-checked': {
+      color: green[500],
+    },
   };
 
   return (
     <div>
       <Grid container justifyContent="center">
-        <Grid item className={classes.buttonWrapper}>
+        <Grid item sx={{ position: 'relative', mb: 4 }}>
           <Button ref={anchorRef} variant="contained" onClick={handleClickButton}>
             Open Popover
           </Button>
           {anchorReference === 'anchorEl' && (
-            <div
-              className={classes.anchor}
+            <Box
+              sx={{
+                bgcolor: green[500],
+                width: 10,
+                height: 10,
+                borderRadius: '50%',
+                position: 'absolute',
+              }}
               style={{
                 ...inlineStyles.anchorVertical[anchorOriginVertical],
                 ...inlineStyles.anchorHorizontal[anchorOriginHorizontal],
@@ -182,9 +164,7 @@ function AnchorPlayground(props) {
           horizontal: transformOriginHorizontal,
         }}
       >
-        <Typography className={classes.typography}>
-          The content of the Popover.
-        </Typography>
+        <Typography sx={{ m: 2 }}>The content of the Popover.</Typography>
       </Popover>
       <Grid container spacing={2}>
         <Grid item xs={12} sm={6}>
@@ -211,7 +191,7 @@ function AnchorPlayground(props) {
           </FormControl>
         </Grid>
         <Grid item xs={12} sm={6}>
-          <FormControl className={classes.formControl}>
+          <FormControl>
             <InputLabel htmlFor="position-top">anchorPosition.top</InputLabel>
             <Input
               id="position-top"
@@ -221,7 +201,7 @@ function AnchorPlayground(props) {
             />
           </FormControl>
           &nbsp;
-          <FormControl className={classes.formControl}>
+          <FormControl>
             <InputLabel htmlFor="position-left">anchorPosition.left</InputLabel>
             <Input
               id="position-left"
@@ -242,17 +222,17 @@ function AnchorPlayground(props) {
             >
               <FormControlLabel
                 value="top"
-                control={<Radio classes={radioAnchorClasses} />}
+                control={<Radio sx={radioAnchorClasses} />}
                 label="Top"
               />
               <FormControlLabel
                 value="center"
-                control={<Radio classes={radioAnchorClasses} />}
+                control={<Radio sx={radioAnchorClasses} />}
                 label="Center"
               />
               <FormControlLabel
                 value="bottom"
-                control={<Radio classes={radioAnchorClasses} />}
+                control={<Radio sx={radioAnchorClasses} />}
                 label="Bottom"
               />
             </RadioGroup>
@@ -293,17 +273,17 @@ function AnchorPlayground(props) {
             >
               <FormControlLabel
                 value="left"
-                control={<Radio classes={radioAnchorClasses} />}
+                control={<Radio sx={radioAnchorClasses} />}
                 label="Left"
               />
               <FormControlLabel
                 value="center"
-                control={<Radio classes={radioAnchorClasses} />}
+                control={<Radio sx={radioAnchorClasses} />}
                 label="Center"
               />
               <FormControlLabel
                 value="right"
-                control={<Radio classes={radioAnchorClasses} />}
+                control={<Radio sx={radioAnchorClasses} />}
                 label="Right"
               />
             </RadioGroup>
@@ -343,8 +323,4 @@ function AnchorPlayground(props) {
   );
 }
 
-AnchorPlayground.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(AnchorPlayground);
+export default AnchorPlayground;
diff --git a/...pages/components/popover/SimplePopover.js → .../pages/components/popover/BasicPopover.js b/...pages/components/popover/SimplePopover.js → .../pages/components/popover/BasicPopover.js
@@ -1,17 +1,9 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
 import Popover from '@material-ui/core/Popover';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme) => ({
-  typography: {
-    padding: theme.spacing(2),
-  },
-}));
-
-export default function SimplePopover() {
-  const classes = useStyles();
+export default function BasicPopover() {
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handleClick = (event) => {
@@ -37,16 +29,10 @@ export default function SimplePopover() {
         onClose={handleClose}
         anchorOrigin={{
           vertical: 'bottom',
-          horizontal: 'center',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center',
+          horizontal: 'left',
         }}
       >
-        <Typography className={classes.typography}>
-          The content of the Popover.
-        </Typography>
+        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
       </Popover>
     </div>
   );

diff --git a/...ages/components/popover/SimplePopover.tsx → ...pages/components/popover/BasicPopover.tsx b/...ages/components/popover/SimplePopover.tsx → ...pages/components/popover/BasicPopover.tsx
@@ -1,19 +1,9 @@
 import * as React from 'react';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import Popover from '@material-ui/core/Popover';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    typography: {
-      padding: theme.spacing(2),
-    },
-  }),
-);
-
-export default function SimplePopover() {
-  const classes = useStyles();
+export default function BasicPopover() {
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
 
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -39,16 +29,10 @@ export default function SimplePopover() {
         onClose={handleClose}
         anchorOrigin={{
           vertical: 'bottom',
-          horizontal: 'center',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'center',
+          horizontal: 'left',
         }}
       >
-        <Typography className={classes.typography}>
-          The content of the Popover.
-        </Typography>
+        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
       </Popover>
     </div>
   );

diff --git a/docs/src/pages/components/popover/MouseOverPopover.js b/docs/src/pages/components/popover/MouseOverPopover.js
@@ -1,19 +1,8 @@
 import * as React from 'react';
 import Popover from '@material-ui/core/Popover';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme) => ({
-  popover: {
-    pointerEvents: 'none',
-  },
-  paper: {
-    padding: theme.spacing(1),
-  },
-}));
 
 export default function MouseOverPopover() {
-  const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState(null);
 
   const handlePopoverOpen = (event) => {
@@ -38,9 +27,8 @@ export default function MouseOverPopover() {
       </Typography>
       <Popover
         id="mouse-over-popover"
-        className={classes.popover}
-        classes={{
-          paper: classes.paper,
+        sx={{
+          pointerEvents: 'none',
         }}
         open={open}
         anchorEl={anchorEl}
@@ -55,7 +43,7 @@ export default function MouseOverPopover() {
         onClose={handlePopoverClose}
         disableRestoreFocus
       >
-        <Typography>I use Popover.</Typography>
+        <Typography sx={{ p: 1 }}>I use Popover.</Typography>
       </Popover>
     </div>
   );

diff --git a/docs/src/pages/components/popover/MouseOverPopover.tsx b/docs/src/pages/components/popover/MouseOverPopover.tsx
@@ -1,24 +1,11 @@
 import * as React from 'react';
 import Popover from '@material-ui/core/Popover';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    popover: {
-      pointerEvents: 'none',
-    },
-    paper: {
-      padding: theme.spacing(1),
-    },
-  }),
-);
 
 export default function MouseOverPopover() {
-  const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
 
-  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
 
@@ -40,9 +27,8 @@ export default function MouseOverPopover() {
       </Typography>
       <Popover
         id="mouse-over-popover"
-        className={classes.popover}
-        classes={{
-          paper: classes.paper,
+        sx={{
+          pointerEvents: 'none',
         }}
         open={open}
         anchorEl={anchorEl}
@@ -57,7 +43,7 @@ export default function MouseOverPopover() {
         onClose={handlePopoverClose}
         disableRestoreFocus
       >
-        <Typography>I use Popover.</Typography>
+        <Typography sx={{ p: 1 }}>I use Popover.</Typography>
       </Popover>
     </div>
   );

diff --git a/docs/src/pages/components/popover/PopoverPopupState.js b/docs/src/pages/components/popover/PopoverPopupState.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import Popover from '@material-ui/core/Popover';
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
@@ -24,9 +23,7 @@ export default function PopoverPopupState() {
               horizontal: 'center',
             }}
           >
-            <Box sx={{ p: 2 }}>
-              <Typography>The content of the Popover.</Typography>
-            </Box>
+            <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
           </Popover>
         </div>
       )}

diff --git a/docs/src/pages/components/popover/PopoverPopupState.tsx b/docs/src/pages/components/popover/PopoverPopupState.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
 import Popover from '@material-ui/core/Popover';
 import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
@@ -24,9 +23,7 @@ export default function PopoverPopupState() {
               horizontal: 'center',
             }}
           >
-            <Box sx={{ p: 2 }}>
-              <Typography>The content of the Popover.</Typography>
-            </Box>
+            <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
           </Popover>
         </div>
       )}

diff --git a/docs/src/pages/components/popover/popover.md b/docs/src/pages/components/popover/popover.md
@@ -15,9 +15,9 @@ Things to know when using the `Popover` component:
 
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
-## Simple Popover
+## Basic Popover
 
-{{"demo": "pages/components/popover/SimplePopover.js" }}
+{{"demo": "pages/components/popover/BasicPopover.js" }}
 
 ## Anchor playground
 
@@ -31,13 +31,13 @@ the position of the popover.
 
 ## Mouse over interaction
 
-This demonstrates how to use the `Popover` component and the mouseover event to achieve popover behavior.
+This demo demonstrates how to use the `Popover` component and the mouseover event to achieve popover behavior.
 
 {{"demo": "pages/components/popover/MouseOverPopover.js"}}
 
 ## Complementary projects
 
-For more advanced use cases you might be able to take advantage of:
+For more advanced use cases, you might be able to take advantage of:
 
 ### PopupState helper