diff --git a/frontend/src/metabase/ui/Intro.stories.mdx b/frontend/src/metabase/ui/Intro.stories.mdx
index a9818b2735d5a6ed46736c80ceaa617d8475f9b3..8274d011095629413ea7dd40f61dea6ff045b195 100644
--- a/frontend/src/metabase/ui/Intro.stories.mdx
+++ b/frontend/src/metabase/ui/Intro.stories.mdx
@@ -8,7 +8,7 @@ Welcome to the nascent documentation for Metabase's design system.
## Overview
-Metabase's design system is going to be built on top of [Mantine](https://mantine.dev) and [React](https://reactjs.org/). Mantine is a React component library that provides a set of accessible, reusable, and composable components that can be used to build UIs.
+Metabase's design system is going to be built on top of [Mantine](https://v6.mantine.dev) and [React](https://reactjs.org/). Mantine is a React component library that provides a set of accessible, reusable, and composable components that can be used to build UIs.
We're currently in the process of "migrating" our existing components to Mantine and as part of doing that we'll be upgrading our Figma component library at the same time. All of this should result in a faster, clearer developer experience and a more accessible and consistent UI in Metabase.
diff --git a/frontend/src/metabase/ui/components/buttons/Button/Button.stories.mdx b/frontend/src/metabase/ui/components/buttons/Button/Button.stories.mdx
index 073d68827cb4bb46c81fb815ae84f29db42dc18f..ce848824a810949a3e46224c7d79a527da2376df 100644
--- a/frontend/src/metabase/ui/components/buttons/Button/Button.stories.mdx
+++ b/frontend/src/metabase/ui/components/buttons/Button/Button.stories.mdx
@@ -55,7 +55,7 @@ export const argTypes = {
# Button
-Our themed wrapper around [Mantine Button](https://mantine.dev/core/button/).
+Our themed wrapper around [Mantine Button](https://v6.mantine.dev/core/button/).
## When to use Button
@@ -75,7 +75,7 @@ Not to use:
## Docs
- [Figma File](https://www.figma.com/file/Ey1rOyIxRHpmRvE9XrGyop/Buttons-%2F-Button?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
-- [Mantine Button Docs](https://mantine.dev/core/button/)
+- [Mantine Button Docs](https://v6.mantine.dev/core/button/)
## Caveats
diff --git a/frontend/src/metabase/ui/components/data-display/Card/Card.stories.mdx b/frontend/src/metabase/ui/components/data-display/Card/Card.stories.mdx
index b80fea44601617a9778a1da19a73b644b05a429b..a9fdf091257a6f51f44884b0c534bf50686f739f 100644
--- a/frontend/src/metabase/ui/components/data-display/Card/Card.stories.mdx
+++ b/frontend/src/metabase/ui/components/data-display/Card/Card.stories.mdx
@@ -37,11 +37,11 @@ export const argTypes = {
# Card
-Our themed wrapper around [Mantine Card](https://mantine.dev/core/card/).
+Our themed wrapper around [Mantine Card](https://v6.mantine.dev/core/card/).
## Docs
-- [Mantine Card Docs](https://mantine.dev/core/card/)
+- [Mantine Card Docs](https://v6.mantine.dev/core/card/)
## Examples
diff --git a/frontend/src/metabase/ui/components/feedback/Loader/Loader.stories.mdx b/frontend/src/metabase/ui/components/feedback/Loader/Loader.stories.mdx
index 05b1f6f94b3091d01d7078aa04b96683223b48d7..057ce29a101483ec2d1e82b93ef7337d7e51ff40 100644
--- a/frontend/src/metabase/ui/components/feedback/Loader/Loader.stories.mdx
+++ b/frontend/src/metabase/ui/components/feedback/Loader/Loader.stories.mdx
@@ -23,12 +23,12 @@ export const argTypes = {
# Loader
-Our themed wrapper around [Mantine Loader](https://mantine.dev/core/loader/).
+Our themed wrapper around [Mantine Loader](https://v6.mantine.dev/core/loader/).
## Docs
- [Figma File](https://www.figma.com/file/NUXRUa9Ot3HvgC1WwIA4UH/Loader?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
-- [Mantine Loader Docs](https://mantine.dev/core/loader/)
+- [Mantine Loader Docs](https://v6.mantine.dev/core/loader/)
## Caveats
diff --git a/frontend/src/metabase/ui/components/index.ts b/frontend/src/metabase/ui/components/index.ts
index 52377ad715b13007918fcbe2dde684c6d138da32..8e66e41c49b30cbd7d9e68ed85fdad688b992834 100644
--- a/frontend/src/metabase/ui/components/index.ts
+++ b/frontend/src/metabase/ui/components/index.ts
@@ -3,6 +3,7 @@ export * from "./data-display";
export * from "./feedback";
export * from "./inputs";
export * from "./layout";
+export * from "./navigation";
export * from "./overlays";
export * from "./theme";
export * from "./typography";
diff --git a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx
index c6ed4d94823f10f3ef6ba2550cc23f3a14e0fd95..7c3bc5023b17f4b809fd4c8055185e2a2ef42465 100644
--- a/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx
+++ b/frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx
@@ -33,7 +33,7 @@ export const argTypes = {
# Checkbox
-Our themed wrapper around [Mantine Checkbox](https://mantine.dev/core/checkbox/).
+Our themed wrapper around [Mantine Checkbox](https://v6.mantine.dev/core/checkbox/).
## When to use Checkbox
@@ -42,7 +42,7 @@ Checkbox buttons allow users to select a single option from a list of mutually e
## Docs
- [Figma File](https://www.figma.com/file/sF1qSHk6yVqO1rFgmH0nzT/Input-%2F-Checkbox?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
-- [Mantine Checkbox Docs](https://mantine.dev/core/checkbox/)
+- [Mantine Checkbox Docs](https://v6.mantine.dev/core/checkbox/)
## Usage guidelines
diff --git a/frontend/src/metabase/ui/components/inputs/FileInput/FileInput.stories.mdx b/frontend/src/metabase/ui/components/inputs/FileInput/FileInput.stories.mdx
index 68ed84b5732e514c310d1df4f811a8803f70bc6b..edadbdfe1451ecbc7c5fa77d4e72f107f1c0e7c7 100644
--- a/frontend/src/metabase/ui/components/inputs/FileInput/FileInput.stories.mdx
+++ b/frontend/src/metabase/ui/components/inputs/FileInput/FileInput.stories.mdx
@@ -59,11 +59,11 @@ export const argTypes = {
# FileInput
-Our themed wrapper around [Mantine FileInput](https://mantine.dev/core/file-input/).
+Our themed wrapper around [Mantine FileInput](https://v6.mantine.dev/core/file-input/).
## Docs
-- [Mantine FileInput Docs](https://mantine.dev/core/file-input/)
+- [Mantine FileInput Docs](https://v6.mantine.dev/core/file-input/)
## Examples
diff --git a/frontend/src/metabase/ui/components/inputs/NumberInput/NumberInput.stories.mdx b/frontend/src/metabase/ui/components/inputs/NumberInput/NumberInput.stories.mdx
index 049ca9c198a4564972004ad29190ba7170bce3f7..ae72316cf2c0eece3274ed332a9d5e031dbb20e3 100644
--- a/frontend/src/metabase/ui/components/inputs/NumberInput/NumberInput.stories.mdx
+++ b/frontend/src/metabase/ui/components/inputs/NumberInput/NumberInput.stories.mdx
@@ -90,12 +90,12 @@ export const argTypes = {
# NumberInput
-Our themed wrapper around [Mantine NumberInput](https://mantine.dev/core/number-input/).
+Our themed wrapper around [Mantine NumberInput](https://v6.mantine.dev/core/number-input/).
## Docs
- [Figma File](https://www.figma.com/file/YWyb541aUHtYXJVPzyYSbg/Input-%2F-Numbers?type=design&node-id=1-96&mode=design&t=1bDfUrJc5alZmVpx-0)
-- [Mantine NumberInput Docs](https://mantine.dev/core/number-input/)
+- [Mantine NumberInput Docs](https://v6.mantine.dev/core/number-input/)
## Examples
diff --git a/frontend/src/metabase/ui/components/inputs/Radio/Radio.stories.mdx b/frontend/src/metabase/ui/components/inputs/Radio/Radio.stories.mdx
index 9f90ab2a91e9006e0ab8d65727ee3e864a315520..dc9bdbb4376b5abbc4a45e706511771fb84ec346 100644
--- a/frontend/src/metabase/ui/components/inputs/Radio/Radio.stories.mdx
+++ b/frontend/src/metabase/ui/components/inputs/Radio/Radio.stories.mdx
@@ -28,7 +28,7 @@ export const argTypes = {
# Radio
-Our themed wrapper around [Mantine Radio](https://mantine.dev/core/radio/).
+Our themed wrapper around [Mantine Radio](https://v6.mantine.dev/core/radio/).
## When to use Radio
@@ -37,7 +37,7 @@ Radio buttons allow users to select a single option from a list of mutually excl
## Docs
- [Figma File](https://www.figma.com/file/7LCGPhkbJdrhdIaeiU1O9c/Input-%2F-Radio?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
-- [Mantine Radio Docs](https://mantine.dev/core/radio/)
+- [Mantine Radio Docs](https://v6.mantine.dev/core/radio/)
## Usage guidelines
diff --git a/frontend/src/metabase/ui/components/inputs/Select/Select.stories.mdx b/frontend/src/metabase/ui/components/inputs/Select/Select.stories.mdx
index ad01d2bbb7920bd55e86b16fcf91e606c1bbb4d3..e82f108bd25bf11d8880c7a60f601e20b8eb814f 100644
--- a/frontend/src/metabase/ui/components/inputs/Select/Select.stories.mdx
+++ b/frontend/src/metabase/ui/components/inputs/Select/Select.stories.mdx
@@ -104,12 +104,12 @@ export const argTypes = {
# Select
-Our themed wrapper around [Mantine Select](https://mantine.dev/core/select/).
+Our themed wrapper around [Mantine Select](https://v6.mantine.dev/core/select/).
## Docs
- [Figma File](https://www.figma.com/file/21uCY0czmCfb6QBjRce0I8/Input-%2F-Select?type=design&node-id=1-96&mode=design&t=Mk8RP6HsneuWzHtr-0)
-- [Mantine Select Docs](https://mantine.dev/core/select/)
+- [Mantine Select Docs](https://v6.mantine.dev/core/select/)
## Examples
diff --git a/frontend/src/metabase/ui/components/inputs/TextInput/TextInput.stories.mdx b/frontend/src/metabase/ui/components/inputs/TextInput/TextInput.stories.mdx
index f303ae5b4a223b9513c342d8a722f56cec619ac9..60ca0c1fc711d269409a068843d31d0ec665a884 100644
--- a/frontend/src/metabase/ui/components/inputs/TextInput/TextInput.stories.mdx
+++ b/frontend/src/metabase/ui/components/inputs/TextInput/TextInput.stories.mdx
@@ -63,12 +63,12 @@ export const argTypes = {
# TextInput
-Our themed wrapper around [Mantine TextInput](https://mantine.dev/core/text-input/).
+Our themed wrapper around [Mantine TextInput](https://v6.mantine.dev/core/text-input/).
## Docs
- [Figma File](https://www.figma.com/file/oIZhYS5OoRA7twd4KqN4Eu/Input-%2F-Text?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
-- [Mantine TextInput Docs](https://mantine.dev/core/text-input/)
+- [Mantine TextInput Docs](https://v6.mantine.dev/core/text-input/)
## Examples
diff --git a/frontend/src/metabase/ui/components/inputs/Textarea/Textarea.stories.mdx b/frontend/src/metabase/ui/components/inputs/Textarea/Textarea.stories.mdx
index acf8e24859af4358ea02acc3a1a05b4d910f2bff..2a712b9dfe5decb337ef7d1046306788f2fd2382 100644
--- a/frontend/src/metabase/ui/components/inputs/Textarea/Textarea.stories.mdx
+++ b/frontend/src/metabase/ui/components/inputs/Textarea/Textarea.stories.mdx
@@ -75,11 +75,11 @@ export const argTypes = {
# Textarea
-Our themed wrapper around [Mantine Textarea](https://mantine.dev/core/textarea/).
+Our themed wrapper around [Mantine Textarea](https://v6.mantine.dev/core/textarea/).
## Docs
-- [Mantine Textarea Docs](https://mantine.dev/core/textarea/)
+- [Mantine Textarea Docs](https://v6.mantine.dev/core/textarea/)
## Examples
diff --git a/frontend/src/metabase/ui/components/navigation/Tabs/Tabs.stories.mdx b/frontend/src/metabase/ui/components/navigation/Tabs/Tabs.stories.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..a089785adfd6e219ceac86f360be2f985d4cd3ad
--- /dev/null
+++ b/frontend/src/metabase/ui/components/navigation/Tabs/Tabs.stories.mdx
@@ -0,0 +1,108 @@
+import { Fragment } from "react";
+import { Canvas, Story, Meta } from "@storybook/addon-docs";
+import { Icon } from "metabase/core/components/Icon";
+import { Group, Tabs } from "metabase/ui";
+
+export const args = {
+ orientation: "horizontal",
+};
+
+export const argTypes = {
+ orientation: {
+ options: ["horizontal", "vertical"],
+ control: { type: "inline-radio" },
+ },
+};
+
+export const tabs = [
+ { value: "overview", label: "Overview", icon: "home" },
+ { value: "metrics", label: "Metrics", icon: "metric" },
+ { value: "segments", label: "Segments", icon: "segment" },
+ { value: "actions", label: "Actions", icon: "bolt", disabled: true },
+ { value: "filters", label: "Filters", icon: "filter" },
+];
+
+<Meta
+ title="Navigation/Tabs"
+ component={Tabs}
+ args={args}
+ argTypes={argTypes}
+/>
+
+# Tabs
+
+Our themed wrapper around [Mantine Tabs](https://v6.mantine.dev/core/tabs/).
+
+## Docs
+
+- [Figma File](https://www.figma.com/file/uPYsD4ncNpQPFzxsLnTnGd/Navigation-%2F-Tabs?type=design&node-id=1-96&mode=design&t=dtMJ59HbOKZ8TOgJ-0)
+- [Mantine Tabs Docs](https://v6.mantine.dev/core/tabs/)
+
+## Examples
+
+export const DefaultTemplate = args => (
+ <Tabs {...args}>
+ <Tabs.List>
+ {tabs.map(tab => (
+ <Tabs.Tab key={tab.value} value={tab.value} disabled={tab.disabled}>
+ {tab.label}
+ </Tabs.Tab>
+ ))}
+ </Tabs.List>
+ {tabs.map(tab => (
+ <Tabs.Panel key={tab.value} value={tab.value} />
+ ))}
+ </Tabs>
+);
+
+export const IconsTemplate = args => (
+ <Tabs {...args}>
+ <Tabs.List>
+ {tabs.map(tab => (
+ <Tabs.Tab
+ key={tab.value}
+ value={tab.value}
+ disabled={tab.disabled}
+ icon={<Icon name={tab.icon} />}
+ >
+ {tab.label}
+ </Tabs.Tab>
+ ))}
+ </Tabs.List>
+ {tabs.map(tab => (
+ <Tabs.Panel key={tab.value} value={tab.value} />
+ ))}
+ </Tabs>
+);
+
+export const Default = DefaultTemplate.bind({});
+
+<Canvas>
+ <Story name="Default">{Default}</Story>
+</Canvas>
+
+export const Icons = IconsTemplate.bind({});
+
+<Canvas>
+ <Story name="Icons">{Icons}</Story>
+</Canvas>
+
+### Vertical orientation
+
+export const Vertical = DefaultTemplate.bind({});
+Vertical.args = {
+ orientation: "vertical",
+};
+
+<Canvas>
+ <Story name="Vertical orientation">{Vertical}</Story>
+</Canvas>
+
+export const VerticalIcons = IconsTemplate.bind({});
+VerticalIcons.args = {
+ orientation: "vertical",
+};
+
+<Canvas>
+ <Story name="Vertical orientation, icons">{VerticalIcons}</Story>
+</Canvas>
diff --git a/frontend/src/metabase/ui/components/navigation/Tabs/Tabs.styled.tsx b/frontend/src/metabase/ui/components/navigation/Tabs/Tabs.styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c006121f1940568f0959419ccebde91857faeb15
--- /dev/null
+++ b/frontend/src/metabase/ui/components/navigation/Tabs/Tabs.styled.tsx
@@ -0,0 +1,43 @@
+import { rem } from "@mantine/core";
+import type { MantineThemeOverride, TabsStylesParams } from "@mantine/core";
+
+const TAB_PADDING = {
+ horizontal: `${rem(11)} ${rem(8)}`,
+ vertical: `${rem(11)} ${rem(15)} ${rem(11)} ${rem(8)}`,
+};
+
+export const getTabsOverrides = (): MantineThemeOverride["components"] => ({
+ Tabs: {
+ styles: (theme, { orientation }: TabsStylesParams) => ({
+ tab: {
+ color: theme.colors.text[2],
+ padding: TAB_PADDING[orientation],
+ "&:hover": {
+ borderColor: theme.colors.bg[1],
+ backgroundColor: theme.colors.brand[0],
+ },
+ "&[data-active]": {
+ color: theme.colors.brand[1],
+ borderColor: theme.colors.brand[1],
+ },
+ "&:disabled": {
+ color: theme.colors.text[0],
+ opacity: 1,
+ },
+ },
+ tabLabel: {
+ fontSize: theme.fontSizes.md,
+ fontWeight: "bold",
+ lineHeight: theme.lineHeight,
+ },
+ tabIcon: {
+ "&:not(:only-child)": {
+ marginRight: rem(6),
+ },
+ },
+ tabsList: {
+ borderColor: theme.colors.bg[1],
+ },
+ }),
+ },
+});
diff --git a/frontend/src/metabase/ui/components/navigation/Tabs/index.ts b/frontend/src/metabase/ui/components/navigation/Tabs/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b9616aedaa4e3281ab7f7ba70aded10482c1cd6d
--- /dev/null
+++ b/frontend/src/metabase/ui/components/navigation/Tabs/index.ts
@@ -0,0 +1,8 @@
+export { Tabs } from "@mantine/core";
+export type {
+ TabsProps,
+ TabProps,
+ TabsListProps,
+ TabsPanelProps,
+} from "@mantine/core";
+export { getTabsOverrides } from "./Tabs.styled";
diff --git a/frontend/src/metabase/ui/components/navigation/index.ts b/frontend/src/metabase/ui/components/navigation/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5de2df695e94329002fae1c07a90f393eb01b108
--- /dev/null
+++ b/frontend/src/metabase/ui/components/navigation/index.ts
@@ -0,0 +1 @@
+export * from "./Tabs";
diff --git a/frontend/src/metabase/ui/components/overlays/Menu/Menu.stories.mdx b/frontend/src/metabase/ui/components/overlays/Menu/Menu.stories.mdx
index 961cd47973507090c9bb2e15aa5b699034d28271..ea3853cfc5a4c7dd5436f5bc93721ca91c9f83cd 100644
--- a/frontend/src/metabase/ui/components/overlays/Menu/Menu.stories.mdx
+++ b/frontend/src/metabase/ui/components/overlays/Menu/Menu.stories.mdx
@@ -61,7 +61,7 @@ export const argTypes = {
# Menu
-Our themed wrapper around [Mantine Menu](https://mantine.dev/core/menu/).
+Our themed wrapper around [Mantine Menu](https://v6.mantine.dev/core/menu/).
## When to use Menu
@@ -82,7 +82,7 @@ Not to use:
## Docs
- [Figma File](https://www.figma.com/file/MZhwfwmOaa8HeCBBUCeq7R/Menu?type=design&node-id=1-96&mode=design&t=vj3dPYMbYVYVuKBy-0)
-- [Mantine Menu Docs](https://mantine.dev/core/menu/)
+- [Mantine Menu Docs](https://v6.mantine.dev/core/menu/)
## Caveats
diff --git a/frontend/src/metabase/ui/components/typography/Anchor/Anchor.stories.mdx b/frontend/src/metabase/ui/components/typography/Anchor/Anchor.stories.mdx
index ecece020a177d1cfd8f877f7f11f59c754587cf8..bf449f57a678cbb1c86e61885ba78b79ea76223a 100644
--- a/frontend/src/metabase/ui/components/typography/Anchor/Anchor.stories.mdx
+++ b/frontend/src/metabase/ui/components/typography/Anchor/Anchor.stories.mdx
@@ -36,7 +36,7 @@ export const argTypes = {
# Anchor
-Our themed wrapper around [Mantine Anchor](https://mantine.dev/core/anchor/).
+Our themed wrapper around [Mantine Anchor](https://v6.mantine.dev/core/anchor/).
## When to use Anchor
@@ -45,7 +45,7 @@ The Anchor component allows users to display links with themed styles, and repla
## Docs
- [Figma File](https://www.figma.com/file/8nuIBDQGSGKLfAPsebbASA/Navigation-%2F-Anchor?type=design&node-id=1-96&mode=design&t=2eUYOsqZZeMc4OGT-0)
-- [Mantine Anchor Docs](https://mantine.dev/core/anchor/)
+- [Mantine Anchor Docs](https://v6.mantine.dev/core/anchor/)
## Examples
diff --git a/frontend/src/metabase/ui/components/typography/Text/Text.stories.mdx b/frontend/src/metabase/ui/components/typography/Text/Text.stories.mdx
index dcd6aece5a3d930af42bcbbc8a754e13b2d6597a..2a9066266f63504d8a28b103289f270ee5e0a3c5 100644
--- a/frontend/src/metabase/ui/components/typography/Text/Text.stories.mdx
+++ b/frontend/src/metabase/ui/components/typography/Text/Text.stories.mdx
@@ -61,7 +61,7 @@ export const argTypes = {
# Text
-Our themed wrapper around [Mantine Text](https://mantine.dev/core/text/).
+Our themed wrapper around [Mantine Text](https://v6.mantine.dev/core/text/).
## When to use Text
@@ -70,7 +70,7 @@ The Text component allows users to display text with themed styles, and replaces
## Docs
- [Figma File](https://www.figma.com/file/h6aMN8H67eu2w8wmDngfnM/Typography-%2F-Text?type=design&node-id=1-96&mode=design&t=2eUYOsqZZeMc4OGT-0)
-- [Mantine Text Docs](https://mantine.dev/core/text/)
+- [Mantine Text Docs](https://v6.mantine.dev/core/text/)
## Examples
diff --git a/frontend/src/metabase/ui/components/typography/Title/Title.stories.mdx b/frontend/src/metabase/ui/components/typography/Title/Title.stories.mdx
index d0901ce07b89d516d62e9dfd596c687bb001a38f..04a251e48287f243c2e4070900ab0fdb7960c9f9 100644
--- a/frontend/src/metabase/ui/components/typography/Title/Title.stories.mdx
+++ b/frontend/src/metabase/ui/components/typography/Title/Title.stories.mdx
@@ -34,7 +34,7 @@ export const argTypes = {
# Title
-Our themed wrapper around [Mantine Title](https://mantine.dev/core/title/).
+Our themed wrapper around [Mantine Title](https://v6.mantine.dev/core/title/).
## When to use Title
@@ -43,15 +43,7 @@ TBD
## Docs
- [Figma File](https://www.figma.com/file/SEQS7bshKQ4y4V5FwvdROv/Typography-%2F-Title?type=design&node-id=1-96&mode=design&t=2eUYOsqZZeMc4OGT-0)
-- [Mantine Title Docs](https://mantine.dev/core/title/)
-
-## Caveats
-
-TBD
-
-## Usage guidelines
-
-TBD
+- [Mantine Title Docs](https://v6.mantine.dev/core/title/)
## Examples
diff --git a/frontend/src/metabase/ui/components/utils/Divider/Divider.stories.mdx b/frontend/src/metabase/ui/components/utils/Divider/Divider.stories.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..844b5e1aaafe25f786a1870a8358f4b9451efdb1
--- /dev/null
+++ b/frontend/src/metabase/ui/components/utils/Divider/Divider.stories.mdx
@@ -0,0 +1,60 @@
+import { Fragment } from "react";
+import { Canvas, Story, Meta } from "@storybook/addon-docs";
+import { Group, Divider, Text } from "metabase/ui";
+
+export const args = {
+ orientation: "horizontal",
+};
+
+export const argTypes = {
+ orientation: {
+ options: ["horizontal", "vertical"],
+ control: { type: "inline-radio" },
+ },
+};
+
+<Meta
+ title="Utils/Divider"
+ component={Divider}
+ args={args}
+ argTypes={argTypes}
+/>
+
+# Divider
+
+Our themed wrapper around [Mantine Divider](https://v6.mantine.dev/core/divider/).
+
+## Docs
+
+- [Mantine Divider Docs](https://v6.mantine.dev/core/divider/)
+
+## Examples
+
+export const DefaultTemplate = args => <Divider {...args} />;
+
+export const VerticalTemplate = args => (
+ <Group>
+ <Text>Overview</Text>
+ <Divider {...args} />
+ <Text>Metrics</Text>
+ <Divider {...args} />
+ <Text>Segments</Text>
+ </Group>
+);
+
+export const Default = DefaultTemplate.bind({});
+
+<Canvas>
+ <Story name="Default">{Default}</Story>
+</Canvas>
+
+### Vertical orientation
+
+export const Vertical = VerticalTemplate.bind({});
+Vertical.args = {
+ orientation: "vertical",
+};
+
+<Canvas>
+ <Story name="Vertical orientation">{Vertical}</Story>
+</Canvas>
diff --git a/frontend/src/metabase/ui/components/utils/Divider/Divider.styled.tsx b/frontend/src/metabase/ui/components/utils/Divider/Divider.styled.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f2d25bb7f0a87dda8c906f93ee35350d9548defa
--- /dev/null
+++ b/frontend/src/metabase/ui/components/utils/Divider/Divider.styled.tsx
@@ -0,0 +1,25 @@
+import type { MantineThemeOverride } from "@mantine/core";
+
+export const getDividerOverrides = (): MantineThemeOverride["components"] => ({
+ Divider: {
+ styles: theme => ({
+ horizontal: {
+ borderTopColor: theme.colors.border[0],
+ },
+ vertical: {
+ borderLeftColor: theme.colors.border[0],
+ },
+ label: {
+ "&::before": {
+ borderTopColor: theme.colors.border[0],
+ },
+ "&::after": {
+ borderTopColor: theme.colors.border[0],
+ },
+ },
+ labelDefaultStyles: {
+ color: theme.colors.text[2],
+ },
+ }),
+ },
+});
diff --git a/frontend/src/metabase/ui/components/utils/Divider/index.ts b/frontend/src/metabase/ui/components/utils/Divider/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0becdcc1090a8b480089afe570165c854f595a42
--- /dev/null
+++ b/frontend/src/metabase/ui/components/utils/Divider/index.ts
@@ -0,0 +1,3 @@
+export { Divider } from "@mantine/core";
+export type { DividerProps } from "@mantine/core";
+export { getDividerOverrides } from "./Divider.styled";
diff --git a/frontend/src/metabase/ui/components/utils/Paper/Paper.stories.mdx b/frontend/src/metabase/ui/components/utils/Paper/Paper.stories.mdx
index ffc3779069934dbce10fe5aeb9c8a54acd0bccdc..73a6e7e545a781fcdeed92beb0dce6a7f6d1869b 100644
--- a/frontend/src/metabase/ui/components/utils/Paper/Paper.stories.mdx
+++ b/frontend/src/metabase/ui/components/utils/Paper/Paper.stories.mdx
@@ -30,12 +30,12 @@ export const argTypes = {
# Paper
-Our themed wrapper around [Mantine Paper](https://mantine.dev/core/paper/).
+Our themed wrapper around [Mantine Paper](https://v6.mantine.dev/core/paper/).
## Docs
- [Figma File](https://www.figma.com/file/uc2OFS4lu0GvVDFB7Sz1hw/Paper?type=design&node-id=1-227&mode=design&t=x44LGyAYVvvURkVS-0)
-- [Mantine Paper Docs](https://mantine.dev/core/paper/)
+- [Mantine Paper Docs](https://v6.mantine.dev/core/paper/)
## Examples
diff --git a/frontend/src/metabase/ui/components/utils/index.ts b/frontend/src/metabase/ui/components/utils/index.ts
index 79be3a06d065e81b1f687648c9a5b9dd5f79c394..fc2cab46177e9419897e33ccadbc8e51b6390a87 100644
--- a/frontend/src/metabase/ui/components/utils/index.ts
+++ b/frontend/src/metabase/ui/components/utils/index.ts
@@ -1,3 +1,4 @@
export * from "./Box";
+export * from "./Divider";
export * from "./FocusTrap";
export * from "./Paper";
diff --git a/frontend/src/metabase/ui/theme.ts b/frontend/src/metabase/ui/theme.ts
index 31463cbed368c15df5e0587336b00cef98d2358e..144d06c926d6d9f46dc5bfeffa661f7763c9e065 100644
--- a/frontend/src/metabase/ui/theme.ts
+++ b/frontend/src/metabase/ui/theme.ts
@@ -7,6 +7,7 @@ import {
getButtonOverrides,
getCardOverrides,
getCheckboxOverrides,
+ getDividerOverrides,
getFileInputOverrides,
getInputOverrides,
getMenuOverrides,
@@ -14,6 +15,7 @@ import {
getRadioOverrides,
getPaperOverrides,
getSelectOverrides,
+ getTabsOverrides,
getTextareaOverrides,
getSwitchOverrides,
getTextInputOverrides,
@@ -108,6 +110,7 @@ export const getThemeOverrides = (): MantineThemeOverride => ({
...getButtonOverrides(),
...getCardOverrides(),
...getCheckboxOverrides(),
+ ...getDividerOverrides(),
...getFileInputOverrides(),
...getInputOverrides(),
...getMenuOverrides(),
@@ -115,6 +118,7 @@ export const getThemeOverrides = (): MantineThemeOverride => ({
...getRadioOverrides(),
...getPaperOverrides(),
...getSelectOverrides(),
+ ...getTabsOverrides(),
...getTextareaOverrides(),
...getSwitchOverrides(),
...getTextInputOverrides(),