Mantine Popover (#34803)

* Add Mantine `Popover`

* Fix spacing

* Deprecate previous popovers

frontend/src/metabase/components/Popover/Popover.jsx

@@ -15,6 +15,9 @@ const PAGE_PADDING = 10;
 // Popover padding and border
 const POPOVER_BODY_PADDING = 2;
 
+/**
+ * @deprecated prefer Popover from "metabase/ui" instead
+ */
 export default class Popover extends Component {
   constructor(props, context) {
     super(props, context);

frontend/src/metabase/components/Popover/TippyPopover.tsx

@@ -64,6 +64,9 @@ function getPopperOptions({
   );
 }
 
+/**
+ * @deprecated prefer Popover from "metabase/ui" instead
+ */
 function TippyPopover({
   className,
   disableContentSandbox,

frontend/src/metabase/components/PopoverWithTrigger/ControlledPopoverWithTrigger.tsx

@@ -44,6 +44,9 @@ type RenderTriggerArgs = {
   closePopover: () => void;
 };
 
+/**
+ * @deprecated prefer Popover from "metabase/ui" instead
+ */
 function ControlledPopoverWithTrigger({
   triggerClasses,
   triggerStyle,

frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx

@@ -2,6 +2,6 @@ import Triggerable from "metabase/components/Triggerable";
 import Popover from "metabase/components/Popover";
 
 /**
- * @deprecated use Popover + useState
+ * @deprecated prefer Popover from "metabase/ui" + useState instead
  */
 export default Triggerable(Popover);

frontend/src/metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger.tsx

@@ -15,6 +15,9 @@ export type TippyPopoverWithTriggerProps = {
   onClose?: () => void;
 } & Omit<ControlledPopoverWithTriggerProps, "visible" | "onClose" | "onOpen">;
 
+/**
+ * @deprecated prefer Popover from "metabase/ui" instead
+ */
 function UncontrolledPopoverWithTrigger({
   isInitiallyVisible,
   popoverRef,

frontend/src/metabase/ui/components/overlays/Popover/Popover.stories.mdx

+import { Fragment } from "react";
+import { Canvas, Story, Meta } from "@storybook/addon-docs";
+import {
+  Box,
+  Button,
+  Flex,
+  Popover,
+  Text,
+  TextInput,
+  Stack,
+} from "metabase/ui";
+
+export const args = {
+  label: "Popover",
+  position: "bottom",
+};
+
+export const argTypes = {
+  position: {
+    options: [
+      "bottom",
+      "left",
+      "right",
+      "top",
+      "bottom-end",
+      "bottom-start",
+      "left-end",
+      "left-start",
+      "right-end",
+      "right-start",
+      "top-end",
+      "top-start",
+    ],
+    control: { type: "select" },
+  },
+};
+
+export const sampleArgs = {
+  simple: <Text>Popover!</Text>,
+  interactive: (
+    <Stack spacing="sm">
+      <TextInput autoFocus placeholder="First name" />
+      <TextInput placeholder="Last name" />
+      <Button>Update</Button>
+    </Stack>
+  ),
+};
+
+<Meta
+  title="Overlays/Popover"
+  component={Popover}
+  args={args}
+  argTypes={argTypes}
+/>
+
+# Popover
+
+Our themed wrapper around [Mantine Popover](https://v6.mantine.dev/core/popover/).
+
+## Docs
+
+- [Mantine Popover Docs](https://v6.mantine.dev/core/popover/)
+
+## Examples
+
+export const DefaultTemplate = ({ children, ...args }) => (
+  <Flex justify="center">
+    <Popover {...args}>
+      <Popover.Target>
+        <Button variant="filled">Click to open</Button>
+      </Popover.Target>
+      <Popover.Dropdown>
+        <Box p="md">{children}</Box>
+      </Popover.Dropdown>
+    </Popover>
+  </Flex>
+);
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  children: sampleArgs.simple,
+};
+
+export const Interactive = DefaultTemplate.bind({});
+Interactive.args = {
+  children: sampleArgs.interactive,
+};
+
+<Canvas>
+  <Story name="Default">{Default}</Story>
+  <Story name="Interactive content">{Interactive}</Story>
+</Canvas>

frontend/src/metabase/ui/components/overlays/Popover/Popover.styled.tsx

+import type { MantineThemeOverride } from "@mantine/core";
+
+export const getPopoverOverrides = (): MantineThemeOverride["components"] => ({
+  Popover: {
+    defaultProps: {
+      radius: "sm",
+      shadow: "md",
+      withinPortal: true,
+    },
+    styles: theme => ({
+      dropdown: {
+        padding: 0,
+      },
+    }),
+  },
+});

frontend/src/metabase/ui/components/overlays/Popover/index.ts

+export { Popover } from "@mantine/core";
+export type { PopoverBaseProps, PopoverProps } from "@mantine/core";
+export { getPopoverOverrides } from "./Popover.styled";

frontend/src/metabase/ui/components/overlays/index.ts

 export * from "./Menu";
+export * from "./Popover";
 export * from "./Tooltip";

frontend/src/metabase/ui/theme.ts

@@ -14,6 +14,7 @@ import {
   getNumberInputOverrides,
   getRadioOverrides,
   getPaperOverrides,
+  getPopoverOverrides,
   getSelectOverrides,
   getSwitchOverrides,
   getTabsOverrides,
@@ -119,6 +120,7 @@ export const getThemeOverrides = (): MantineThemeOverride => ({
     ...getNumberInputOverrides(),
     ...getRadioOverrides(),
     ...getPaperOverrides(),
+    ...getPopoverOverrides(),
     ...getSelectOverrides(),
     ...getSwitchOverrides(),
     ...getTabsOverrides(),