[docs] Improve the Popper demos to be more selling

docs/src/pages/components/popper/SimplePopper.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import Fade from '@material-ui/core/Fade';
-import Paper from '@material-ui/core/Paper';
 
 const useStyles = makeStyles(theme => ({
-  typography: {
-    padding: theme.spacing(2),
+  paper: {
+    border: '1px solid',
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.paper,
   },
 }));
 
@@ -25,17 +23,11 @@ export default function SimplePopper() {
 
   return (
     <div>
-      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
         Toggle Popper
-      </Button>
-      <Popper id={id} open={open} anchorEl={anchorEl} transition>
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
-            <Paper>
-              <Typography className={classes.typography}>The content of the Popper.</Typography>
-            </Paper>
-          </Fade>
-        )}
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className={classes.paper}>The content of the Popper.</div>
       </Popper>
     </div>
   );

docs/src/pages/components/popper/SimplePopper.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import Fade from '@material-ui/core/Fade';
-import Paper from '@material-ui/core/Paper';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
-    typography: {
-      padding: theme.spacing(2),
+    paper: {
+      border: '1px solid',
+      padding: theme.spacing(1),
+      backgroundColor: theme.palette.background.paper,
     },
   }),
 );
@@ -27,17 +25,11 @@ export default function SimplePopper() {
 
   return (
     <div>
-      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
         Toggle Popper
-      </Button>
-      <Popper id={id} open={open} anchorEl={anchorEl} transition>
-        {({ TransitionProps }) => (
-          <Fade {...TransitionProps} timeout={350}>
-            <Paper>
-              <Typography className={classes.typography}>The content of the Popper.</Typography>
-            </Paper>
-          </Fade>
-        )}
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl}>
+        <div className={classes.paper}>The content of the Popper.</div>
       </Popper>
     </div>
   );

docs/src/pages/components/popper/SpringPopper.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import { useSpring, animated } from 'react-spring';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    border: '1px solid',
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.paper,
+  },
+}));
+
+const Fade = React.forwardRef(function Fade(props, ref) {
+  const { in: open, children, onEnter, onExited, ...other } = props;
+  const style = useSpring({
+    from: { opacity: 0 },
+    to: { opacity: open ? 1 : 0 },
+    onStart: () => {
+      if (open && onEnter) {
+        onEnter();
+      }
+    },
+    onRest: () => {
+      if (!open && onExited) {
+        onExited();
+      }
+    },
+  });
+
+  return (
+    <animated.div ref={ref} style={style} {...other}>
+      {children}
+    </animated.div>
+  );
+});
+
+export default function SpringPopper() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = event => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'spring-popper' : undefined;
+
+  return (
+    <div>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl} transition>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <div className={classes.paper}>The content of the Popper.</div>
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
+}

docs/src/pages/components/popper/SpringPopper.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+import { useSpring, animated } from 'react-spring';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    paper: {
+      border: '1px solid',
+      padding: theme.spacing(1),
+      backgroundColor: theme.palette.background.paper,
+    },
+  }),
+);
+
+interface FadeProps {
+  children: React.ReactElement;
+  in: boolean;
+  onEnter?: () => {};
+  onExited?: () => {};
+}
+
+const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, ref) {
+  const { in: open, children, onEnter, onExited, ...other } = props;
+  const style = useSpring({
+    from: { opacity: 0 },
+    to: { opacity: open ? 1 : 0 },
+    onStart: () => {
+      if (open && onEnter) {
+        onEnter();
+      }
+    },
+    onRest: () => {
+      if (!open && onExited) {
+        onExited();
+      }
+    },
+  });
+
+  return (
+    <animated.div ref={ref} style={style} {...other}>
+      {children}
+    </animated.div>
+  );
+});
+
+
+export default function SpringPopper() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'spring-popper' : undefined;
+
+  return (
+    <div>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl} transition>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <div className={classes.paper}>The content of the Popper.</div>
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
+}

docs/src/pages/components/popper/TransitionsPopper.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Popper from '@material-ui/core/Popper';
+
+import Fade from '@material-ui/core/Fade';
+
+const useStyles = makeStyles(theme => ({
+  paper: {
+    border: '1px solid',
+    padding: theme.spacing(1),
+    backgroundColor: theme.palette.background.paper,
+  },
+}));
+
+export default function TransitionsPopper() {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = event => {
+    setAnchorEl(anchorEl ? null : event.currentTarget);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'transitions-popper' : undefined;
+
+  return (
+    <div>
+      <button aria-describedby={id} type="button" onClick={handleClick}>
+        Toggle Popper
+      </button>
+      <Popper id={id} open={open} anchorEl={anchorEl} transition>
+        {({ TransitionProps }) => (
+          <Fade {...TransitionProps} timeout={350}>
+            <div className={classes.paper}>The content of the Popper.</div>
+          </Fade>
+        )}
+      </Popper>
+    </div>
+  );
+}