Mantine Tooltip (#34797)

frontend/src/metabase/core/components/TimeInput/TimeInput.tsx

@@ -25,6 +25,9 @@ export interface TimeInputProps {
   onClear?: (value: Moment) => void;
 }
 
+/**
+ * @deprecated: use TimeInput from "metabase/ui"
+ */
 const TimeInput = forwardRef(function TimeInput(
   {
     value,

frontend/src/metabase/core/components/Tooltip/Tooltip.tsx

@@ -60,6 +60,9 @@ function getTargetProps(
   }
 }
 
+/**
+ * @deprecated: use Tooltip from "metabase/ui"
+ */
 function Tooltip({
   tooltip,
   children,

frontend/src/metabase/ui/components/buttons/Button/Button.styled.tsx

@@ -9,6 +9,7 @@ export const getButtonOverrides = (): MantineThemeOverride["components"] => ({
   Button: {
     defaultProps: {
       color: "brand",
+      variant: "default",
       loaderProps: {
         size: "1rem",
         color: "currentColor",

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

@@ -101,7 +101,7 @@ export const DefaultTemplate = args => (
   <Flex justify="center">
     <Menu {...args}>
       <Menu.Target>
-        <Button>Toggle menu</Button>
+        <Button variant="filled">Toggle menu</Button>
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item>Question</Menu.Item>
@@ -119,7 +119,7 @@ export const RightSectionTemplate = args => (
   <Flex justify="center">
     <Menu {...args}>
       <Menu.Target>
-        <Button>Toggle menu</Button>
+        <Button variant="filled">Toggle menu</Button>
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item rightSection={<Text color="inherit">⌘K</Text>}>
@@ -139,7 +139,7 @@ export const IconsTemplate = args => (
   <Flex justify="center">
     <Menu {...args}>
       <Menu.Target>
-        <Button>Toggle menu</Button>
+        <Button variant="filled">Toggle menu</Button>
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Item icon={<Icon name="insight" />}>Question</Menu.Item>
@@ -157,7 +157,7 @@ export const LabelsAndDividersTemplate = args => (
   <Flex justify="center">
     <Menu {...args}>
       <Menu.Target>
-        <Button>Toggle menu</Button>
+        <Button variant="filled">Toggle menu</Button>
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Label>Data</Menu.Label>

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

+import { Fragment } from "react";
+import { Canvas, Story, Meta } from "@storybook/addon-docs";
+import { Box, Button, Flex, Grid, Tooltip } from "metabase/ui";
+
+export const args = {
+  label: "Tooltip",
+  position: "bottom",
+};
+
+export const argTypes = {
+  label: {
+    control: { type: "text" },
+  },
+  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" },
+  },
+};
+
+<Meta
+  title="Overlays/Tooltip"
+  component={Tooltip}
+  args={args}
+  argTypes={argTypes}
+/>
+
+# Tooltip
+
+Our themed wrapper around [Mantine Tooltip](https://v6.mantine.dev/core/tooltip/).
+
+## Docs
+
+- [Mantine Tooltip Docs](https://v6.mantine.dev/core/tooltip/)
+
+## Examples
+
+export const DefaultTemplate = args => (
+  <Flex justify="center">
+    <Tooltip {...args}>
+      <Button variant="filled">Toggle tooltip</Button>
+    </Tooltip>
+  </Flex>
+);
+
+export const Default = DefaultTemplate.bind({});
+
+<Canvas>
+  <Story name="Default">{Default}</Story>
+</Canvas>

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

+import type { MantineThemeOverride } from "@mantine/core";
+
+export const getTooltipOverrides = (): MantineThemeOverride["components"] => ({
+  Tooltip: {
+    defaultProps: {
+      withinPortal: true,
+    },
+    styles: theme => ({
+      tooltip: {
+        fontSize: theme.fontSizes.md,
+        padding: `${theme.spacing.sm} ${theme.spacing.md}`,
+        color: theme.white,
+        backgroundColor: theme.black,
+      },
+    }),
+  },
+});

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

+export { Tooltip } from "@mantine/core";
+export type { TooltipProps } from "@mantine/core";
+export { getTooltipOverrides } from "./Tooltip.styled";

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

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

frontend/src/metabase/ui/theme.ts

@@ -15,13 +15,14 @@ import {
   getRadioOverrides,
   getPaperOverrides,
   getSelectOverrides,
+  getSwitchOverrides,
   getTabsOverrides,
   getTextareaOverrides,
-  getTimeInputOverrides,
-  getSwitchOverrides,
   getTextInputOverrides,
   getTextOverrides,
+  getTimeInputOverrides,
   getTitleOverrides,
+  getTooltipOverrides,
 } from "./components";
 
 type ThemeColors = MantineTheme["colors"]["brand"];
@@ -119,12 +120,13 @@ export const getThemeOverrides = (): MantineThemeOverride => ({
     ...getRadioOverrides(),
     ...getPaperOverrides(),
     ...getSelectOverrides(),
+    ...getSwitchOverrides(),
     ...getTabsOverrides(),
     ...getTextareaOverrides(),
-    ...getSwitchOverrides(),
     ...getTextInputOverrides(),
     ...getTextOverrides(),
     ...getTimeInputOverrides(),
     ...getTitleOverrides(),
+    ...getTooltipOverrides(),
   },
 });