Popover arrow addition

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I’m trying to add customize my Menu components by adding an arrow to them, but unfortunately it looks like that may not be possible. I had hoped the issue had been covered in #10772, but despite the title of that issue, it was only solved for Poppers, not Popovers. I would just use a Popper, but Select components use Menus which use Popovers, and there doesn’t seem to be an escape hatch to override that. I can’t use pseudo elements, since the absolutely positioned element is overflow: hidden, and a pseudo element arrow can’t sit outside of it.

Ideally there could be a prop similar to Poppers modifiers={{ arrow: { enabled: true }}} that adds an element adjacent to the Paper in Popover somewhere around here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Popover/Popover.js#L398-L406

Examples 🌈

https://material-ui.netlify.com/components/popper/#scroll-playground

Motivation 🔦

Hopefully this further makes Material UI more themeable.

[markmcdowell]

Not generic but if you override the paper class you can add an arrow (in this case a down arrow):

const styles = (theme: Theme) =>
    createStyles({
        paper: {
            overflowX: "unset",
            overflowY: "unset",
            "&::before": {
                content: '""',
                position: "absolute",
                marginRight: "-0.71em",
                bottom: 0,
                right: 0,
                width: 10,
                height: 10,
                backgroundColor: theme.palette.background.paper,
                boxShadow: theme.shadows[1],
                transform: "translate(-50%, 50%) rotate(135deg)",
                clipPath: "polygon(-5px -5px, calc(100% + 5px) -5px, calc(100% + 5px) calc(100% + 5px))",
            },
        },
    });

...

<Popover classes={{ paper: classes.paper }} >
  {children}
</Popover>

[oliviertassinari]

@tedpennings You can use the source of the tooltip as inspiration:

https://github.com/mui-org/material-ui/blob/763266ec723f6e2d426342d33c48e5fc478e7cdb/packages/material-ui/src/Tooltip/Tooltip.js#L21-L58