From fea24aa35a1fcc9018d3d8501e16d047d04ed9b5 Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Thu, 19 Oct 2023 13:07:43 +0100
Subject: [PATCH] Mantine Popover (#34803)
* Add Mantine `Popover`
* Fix spacing
* Deprecate previous popovers
---
.../metabase/components/Popover/Popover.jsx | 3 +
.../components/Popover/TippyPopover.tsx | 3 +
.../ControlledPopoverWithTrigger.tsx | 3 +
.../PopoverWithTrigger/PopoverWithTrigger.jsx | 2 +-
.../TippyPopoverWithTrigger.tsx | 3 +
.../overlays/Popover/Popover.stories.mdx | 92 +++++++++++++++++++
.../overlays/Popover/Popover.styled.tsx | 16 ++++
.../ui/components/overlays/Popover/index.ts | 3 +
.../metabase/ui/components/overlays/index.ts | 1 +
frontend/src/metabase/ui/theme.ts | 2 +
10 files changed, 127 insertions(+), 1 deletion(-)
create mode 100644 frontend/src/metabase/ui/components/overlays/Popover/Popover.stories.mdx
create mode 100644 frontend/src/metabase/ui/components/overlays/Popover/Popover.styled.tsx
create mode 100644 frontend/src/metabase/ui/components/overlays/Popover/index.ts
diff --git a/frontend/src/metabase/components/Popover/Popover.jsx b/frontend/src/metabase/components/Popover/Popover.jsx
index 11e9514723c..62df8f483fd 100644
--- a/frontend/src/metabase/components/Popover/Popover.jsx
+++ b/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);
diff --git a/frontend/src/metabase/components/Popover/TippyPopover.tsx b/frontend/src/metabase/components/Popover/TippyPopover.tsx
index 02180c71bd2..9ad246de682 100644
--- a/frontend/src/metabase/components/Popover/TippyPopover.tsx
+++ b/frontend/src/metabase/components/Popover/TippyPopover.tsx
@@ -64,6 +64,9 @@ function getPopperOptions({
);
}
+/**
+ * @deprecated prefer Popover from "metabase/ui" instead
+ */
function TippyPopover({
className,
disableContentSandbox,
diff --git a/frontend/src/metabase/components/PopoverWithTrigger/ControlledPopoverWithTrigger.tsx b/frontend/src/metabase/components/PopoverWithTrigger/ControlledPopoverWithTrigger.tsx
index 3e7b4a6ea6e..01b455180e0 100644
--- a/frontend/src/metabase/components/PopoverWithTrigger/ControlledPopoverWithTrigger.tsx
+++ b/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,
diff --git a/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx b/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx
index 1eda806eeb2..3144d0b8dbd 100644
--- a/frontend/src/metabase/components/PopoverWithTrigger/PopoverWithTrigger.jsx
+++ b/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);
diff --git a/frontend/src/metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger.tsx b/frontend/src/metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger.tsx
index f17fbae3102..bed118f3621 100644
--- a/frontend/src/metabase/components/PopoverWithTrigger/TippyPopoverWithTrigger.tsx
+++ b/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,
diff --git a/frontend/src/metabase/ui/components/overlays/Popover/Popover.stories.mdx b/frontend/src/metabase/ui/components/overlays/Popover/Popover.stories.mdx
new file mode 100644
index 00000000000..38717cc9cb3
--- /dev/null
+++ b/frontend/src/metabase/ui/components/overlays/Popover/Popover.stories.mdx
@@ -0,0 +1,92 @@
+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>
diff --git a/frontend/src/metabase/ui/components/overlays/Popover/Popover.styled.tsx b/frontend/src/metabase/ui/components/overlays/Popover/Popover.styled.tsx
new file mode 100644
index 00000000000..4cf5c84a8fa
--- /dev/null
+++ b/frontend/src/metabase/ui/components/overlays/Popover/Popover.styled.tsx
@@ -0,0 +1,16 @@
+import type { MantineThemeOverride } from "@mantine/core";
+
+export const getPopoverOverrides = (): MantineThemeOverride["components"] => ({
+ Popover: {
+ defaultProps: {
+ radius: "sm",
+ shadow: "md",
+ withinPortal: true,
+ },
+ styles: theme => ({
+ dropdown: {
+ padding: 0,
+ },
+ }),
+ },
+});
diff --git a/frontend/src/metabase/ui/components/overlays/Popover/index.ts b/frontend/src/metabase/ui/components/overlays/Popover/index.ts
new file mode 100644
index 00000000000..9fb2451a522
--- /dev/null
+++ b/frontend/src/metabase/ui/components/overlays/Popover/index.ts
@@ -0,0 +1,3 @@
+export { Popover } from "@mantine/core";
+export type { PopoverBaseProps, PopoverProps } from "@mantine/core";
+export { getPopoverOverrides } from "./Popover.styled";
diff --git a/frontend/src/metabase/ui/components/overlays/index.ts b/frontend/src/metabase/ui/components/overlays/index.ts
index 733680f77f0..aa1ae4cafd7 100644
--- a/frontend/src/metabase/ui/components/overlays/index.ts
+++ b/frontend/src/metabase/ui/components/overlays/index.ts
@@ -1,2 +1,3 @@
export * from "./Menu";
+export * from "./Popover";
export * from "./Tooltip";
diff --git a/frontend/src/metabase/ui/theme.ts b/frontend/src/metabase/ui/theme.ts
index 9fdcb52f3b2..5cdb072893d 100644
--- a/frontend/src/metabase/ui/theme.ts
+++ b/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(),
--
GitLab