diff --git a/docs/src/pages/components/popover/AnchorPlayground.js b/docs/src/pages/components/popover/AnchorPlayground.js
index 32a83f76ae50cc..fedf4f2d55fa35 100644
--- 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 (
-
+
{anchorReference === 'anchorEl' && (
-
-
- The content of the Popover.
-
+ The content of the Popover.
@@ -211,7 +191,7 @@ function AnchorPlayground(props) {
-
+
anchorPosition.top
-
+
anchorPosition.left
}
+ control={}
label="Top"
/>
}
+ control={}
label="Center"
/>
}
+ control={}
label="Bottom"
/>
@@ -293,17 +273,17 @@ function AnchorPlayground(props) {
>
}
+ control={}
label="Left"
/>
}
+ control={}
label="Center"
/>
}
+ control={}
label="Right"
/>
@@ -343,8 +323,4 @@ function AnchorPlayground(props) {
);
}
-AnchorPlayground.propTypes = {
- classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(AnchorPlayground);
+export default AnchorPlayground;
diff --git a/docs/src/pages/components/popover/SimplePopover.js b/docs/src/pages/components/popover/BasicPopover.js
similarity index 63%
rename from docs/src/pages/components/popover/SimplePopover.js
rename to docs/src/pages/components/popover/BasicPopover.js
index 2a93c81bd6ba41..2f6cfb5041a365 100644
--- a/docs/src/pages/components/popover/SimplePopover.js
+++ b/docs/src/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',
}}
>
-
- The content of the Popover.
-
+ The content of the Popover.
);
diff --git a/docs/src/pages/components/popover/SimplePopover.tsx b/docs/src/pages/components/popover/BasicPopover.tsx
similarity index 62%
rename from docs/src/pages/components/popover/SimplePopover.tsx
rename to docs/src/pages/components/popover/BasicPopover.tsx
index 579e60dcc360e4..7b5f698c1915c7 100644
--- a/docs/src/pages/components/popover/SimplePopover.tsx
+++ b/docs/src/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(null);
const handleClick = (event: React.MouseEvent) => {
@@ -39,16 +29,10 @@ export default function SimplePopover() {
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'center',
+ horizontal: 'left',
}}
>
-
- The content of the Popover.
-
+ The content of the Popover.
);
diff --git a/docs/src/pages/components/popover/MouseOverPopover.js b/docs/src/pages/components/popover/MouseOverPopover.js
index 9385300c9b6040..b53400072a686c 100644
--- 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() {
- I use Popover.
+ I use Popover.
);
diff --git a/docs/src/pages/components/popover/MouseOverPopover.tsx b/docs/src/pages/components/popover/MouseOverPopover.tsx
index 74d0dd6046c657..14f73711ecd353 100644
--- 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(null);
- const handlePopoverOpen = (event: React.MouseEvent) => {
+ const handlePopoverOpen = (event: React.MouseEvent) => {
setAnchorEl(event.currentTarget);
};
@@ -40,9 +27,8 @@ export default function MouseOverPopover() {
- I use Popover.
+ I use Popover.
);
diff --git a/docs/src/pages/components/popover/PopoverPopupState.js b/docs/src/pages/components/popover/PopoverPopupState.js
index efeab853bfd738..293fbeccd6e9d7 100644
--- 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',
}}
>
-
- The content of the Popover.
-
+ The content of the Popover.
)}
diff --git a/docs/src/pages/components/popover/PopoverPopupState.tsx b/docs/src/pages/components/popover/PopoverPopupState.tsx
index efeab853bfd738..293fbeccd6e9d7 100644
--- 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',
}}
>
-
- The content of the Popover.
-
+ The content of the Popover.
)}
diff --git a/docs/src/pages/components/popover/popover.md b/docs/src/pages/components/popover/popover.md
index 0e9778dfea47bc..f4bf68fed0e9ad 100644
--- 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