Mantine Divider (#34392)

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.
 

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
 

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
 

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
 

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";

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
 

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
 

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
 

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
 

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
 

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
 

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
 

frontend/src/metabase/ui/components/navigation/Tabs/Tabs.stories.mdx

+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>

frontend/src/metabase/ui/components/navigation/Tabs/Tabs.styled.tsx

+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],
+      },
+    }),
+  },
+});

frontend/src/metabase/ui/components/navigation/Tabs/index.ts

+export { Tabs } from "@mantine/core";
+export type {
+  TabsProps,
+  TabProps,
+  TabsListProps,
+  TabsPanelProps,
+} from "@mantine/core";
+export { getTabsOverrides } from "./Tabs.styled";

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

+export * from "./Tabs";

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
 

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
 

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
 

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