Skip to content

Commit e1ebf60

Browse files
ranquildranquild
authored
Mantine Divider (metabase#34392)
1 parent a5a8df9 commit e1ebf60

File tree

26 files changed

+285
-39
lines changed

26 files changed

+285
-39
lines changed

‎frontend/src/metabase/ui/Intro.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ Welcome to the nascent documentation for Metabase's design system.
88

99
## Overview
1010

11-
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.
11+
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.
1212

1313
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.
1414

‎frontend/src/metabase/ui/components/buttons/Button/Button.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const argTypes = {
5555

5656
# Button
5757

58-
Our themed wrapper around [Mantine Button](https://mantine.dev/core/button/).
58+
Our themed wrapper around [Mantine Button](https://v6.mantine.dev/core/button/).
5959

6060
## When to use Button
6161

@@ -75,7 +75,7 @@ Not to use:
7575
## Docs
7676

7777
- [Figma File](https://www.figma.com/file/Ey1rOyIxRHpmRvE9XrGyop/Buttons-%2F-Button?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
78-
- [Mantine Button Docs](https://mantine.dev/core/button/)
78+
- [Mantine Button Docs](https://v6.mantine.dev/core/button/)
7979

8080
## Caveats
8181

‎frontend/src/metabase/ui/components/data-display/Card/Card.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@ export const argTypes = {
3737

3838
# Card
3939

40-
Our themed wrapper around [Mantine Card](https://mantine.dev/core/card/).
40+
Our themed wrapper around [Mantine Card](https://v6.mantine.dev/core/card/).
4141

4242
## Docs
4343

44-
- [Mantine Card Docs](https://mantine.dev/core/card/)
44+
- [Mantine Card Docs](https://v6.mantine.dev/core/card/)
4545

4646
## Examples
4747

‎frontend/src/metabase/ui/components/feedback/Loader/Loader.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ export const argTypes = {
2323

2424
# Loader
2525

26-
Our themed wrapper around [Mantine Loader](https://mantine.dev/core/loader/).
26+
Our themed wrapper around [Mantine Loader](https://v6.mantine.dev/core/loader/).
2727

2828
## Docs
2929

3030
- [Figma File](https://www.figma.com/file/NUXRUa9Ot3HvgC1WwIA4UH/Loader?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
31-
- [Mantine Loader Docs](https://mantine.dev/core/loader/)
31+
- [Mantine Loader Docs](https://v6.mantine.dev/core/loader/)
3232

3333
## Caveats
3434

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export * from "./data-display";
33
export * from "./feedback";
44
export * from "./inputs";
55
export * from "./layout";
6+
export * from "./navigation";
67
export * from "./overlays";
78
export * from "./theme";
89
export * from "./typography";

‎frontend/src/metabase/ui/components/inputs/Checkbox/Checkbox.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const argTypes = {
3333

3434
# Checkbox
3535

36-
Our themed wrapper around [Mantine Checkbox](https://mantine.dev/core/checkbox/).
36+
Our themed wrapper around [Mantine Checkbox](https://v6.mantine.dev/core/checkbox/).
3737

3838
## When to use Checkbox
3939

@@ -42,7 +42,7 @@ Checkbox buttons allow users to select a single option from a list of mutually e
4242
## Docs
4343

4444
- [Figma File](https://www.figma.com/file/sF1qSHk6yVqO1rFgmH0nzT/Input-%2F-Checkbox?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
45-
- [Mantine Checkbox Docs](https://mantine.dev/core/checkbox/)
45+
- [Mantine Checkbox Docs](https://v6.mantine.dev/core/checkbox/)
4646

4747
## Usage guidelines
4848

‎frontend/src/metabase/ui/components/inputs/FileInput/FileInput.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,11 @@ export const argTypes = {
5959

6060
# FileInput
6161

62-
Our themed wrapper around [Mantine FileInput](https://mantine.dev/core/file-input/).
62+
Our themed wrapper around [Mantine FileInput](https://v6.mantine.dev/core/file-input/).
6363

6464
## Docs
6565

66-
- [Mantine FileInput Docs](https://mantine.dev/core/file-input/)
66+
- [Mantine FileInput Docs](https://v6.mantine.dev/core/file-input/)
6767

6868
## Examples
6969

‎frontend/src/metabase/ui/components/inputs/NumberInput/NumberInput.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,12 @@ export const argTypes = {
9090

9191
# NumberInput
9292

93-
Our themed wrapper around [Mantine NumberInput](https://mantine.dev/core/number-input/).
93+
Our themed wrapper around [Mantine NumberInput](https://v6.mantine.dev/core/number-input/).
9494

9595
## Docs
9696

9797
- [Figma File](https://www.figma.com/file/YWyb541aUHtYXJVPzyYSbg/Input-%2F-Numbers?type=design&node-id=1-96&mode=design&t=1bDfUrJc5alZmVpx-0)
98-
- [Mantine NumberInput Docs](https://mantine.dev/core/number-input/)
98+
- [Mantine NumberInput Docs](https://v6.mantine.dev/core/number-input/)
9999

100100
## Examples
101101

‎frontend/src/metabase/ui/components/inputs/Radio/Radio.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const argTypes = {
2828

2929
# Radio
3030

31-
Our themed wrapper around [Mantine Radio](https://mantine.dev/core/radio/).
31+
Our themed wrapper around [Mantine Radio](https://v6.mantine.dev/core/radio/).
3232

3333
## When to use Radio
3434

@@ -37,7 +37,7 @@ Radio buttons allow users to select a single option from a list of mutually excl
3737
## Docs
3838

3939
- [Figma File](https://www.figma.com/file/7LCGPhkbJdrhdIaeiU1O9c/Input-%2F-Radio?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
40-
- [Mantine Radio Docs](https://mantine.dev/core/radio/)
40+
- [Mantine Radio Docs](https://v6.mantine.dev/core/radio/)
4141

4242
## Usage guidelines
4343

‎frontend/src/metabase/ui/components/inputs/Select/Select.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ export const argTypes = {
104104

105105
# Select
106106

107-
Our themed wrapper around [Mantine Select](https://mantine.dev/core/select/).
107+
Our themed wrapper around [Mantine Select](https://v6.mantine.dev/core/select/).
108108

109109
## Docs
110110

111111
- [Figma File](https://www.figma.com/file/21uCY0czmCfb6QBjRce0I8/Input-%2F-Select?type=design&node-id=1-96&mode=design&t=Mk8RP6HsneuWzHtr-0)
112-
- [Mantine Select Docs](https://mantine.dev/core/select/)
112+
- [Mantine Select Docs](https://v6.mantine.dev/core/select/)
113113

114114
## Examples
115115

‎frontend/src/metabase/ui/components/inputs/TextInput/TextInput.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,12 +63,12 @@ export const argTypes = {
6363

6464
# TextInput
6565

66-
Our themed wrapper around [Mantine TextInput](https://mantine.dev/core/text-input/).
66+
Our themed wrapper around [Mantine TextInput](https://v6.mantine.dev/core/text-input/).
6767

6868
## Docs
6969

7070
- [Figma File](https://www.figma.com/file/oIZhYS5OoRA7twd4KqN4Eu/Input-%2F-Text?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
71-
- [Mantine TextInput Docs](https://mantine.dev/core/text-input/)
71+
- [Mantine TextInput Docs](https://v6.mantine.dev/core/text-input/)
7272

7373
## Examples
7474

‎frontend/src/metabase/ui/components/inputs/Textarea/Textarea.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,11 +75,11 @@ export const argTypes = {
7575

7676
# Textarea
7777

78-
Our themed wrapper around [Mantine Textarea](https://mantine.dev/core/textarea/).
78+
Our themed wrapper around [Mantine Textarea](https://v6.mantine.dev/core/textarea/).
7979

8080
## Docs
8181

82-
- [Mantine Textarea Docs](https://mantine.dev/core/textarea/)
82+
- [Mantine Textarea Docs](https://v6.mantine.dev/core/textarea/)
8383

8484
## Examples
8585

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
import { Fragment } from "react";
2+
import { Canvas, Story, Meta } from "@storybook/addon-docs";
3+
import { Icon } from "metabase/core/components/Icon";
4+
import { Group, Tabs } from "metabase/ui";
5+
6+
export const args = {
7+
orientation: "horizontal",
8+
};
9+
10+
export const argTypes = {
11+
orientation: {
12+
options: ["horizontal", "vertical"],
13+
control: { type: "inline-radio" },
14+
},
15+
};
16+
17+
export const tabs = [
18+
{ value: "overview", label: "Overview", icon: "home" },
19+
{ value: "metrics", label: "Metrics", icon: "metric" },
20+
{ value: "segments", label: "Segments", icon: "segment" },
21+
{ value: "actions", label: "Actions", icon: "bolt", disabled: true },
22+
{ value: "filters", label: "Filters", icon: "filter" },
23+
];
24+
25+
<Meta
26+
title="Navigation/Tabs"
27+
component={Tabs}
28+
args={args}
29+
argTypes={argTypes}
30+
/>
31+
32+
# Tabs
33+
34+
Our themed wrapper around [Mantine Tabs](https://v6.mantine.dev/core/tabs/).
35+
36+
## Docs
37+
38+
- [Figma File](https://www.figma.com/file/uPYsD4ncNpQPFzxsLnTnGd/Navigation-%2F-Tabs?type=design&node-id=1-96&mode=design&t=dtMJ59HbOKZ8TOgJ-0)
39+
- [Mantine Tabs Docs](https://v6.mantine.dev/core/tabs/)
40+
41+
## Examples
42+
43+
export const DefaultTemplate = args => (
44+
<Tabs {...args}>
45+
<Tabs.List>
46+
{tabs.map(tab => (
47+
<Tabs.Tab key={tab.value} value={tab.value} disabled={tab.disabled}>
48+
{tab.label}
49+
</Tabs.Tab>
50+
))}
51+
</Tabs.List>
52+
{tabs.map(tab => (
53+
<Tabs.Panel key={tab.value} value={tab.value} />
54+
))}
55+
</Tabs>
56+
);
57+
58+
export const IconsTemplate = args => (
59+
<Tabs {...args}>
60+
<Tabs.List>
61+
{tabs.map(tab => (
62+
<Tabs.Tab
63+
key={tab.value}
64+
value={tab.value}
65+
disabled={tab.disabled}
66+
icon={<Icon name={tab.icon} />}
67+
>
68+
{tab.label}
69+
</Tabs.Tab>
70+
))}
71+
</Tabs.List>
72+
{tabs.map(tab => (
73+
<Tabs.Panel key={tab.value} value={tab.value} />
74+
))}
75+
</Tabs>
76+
);
77+
78+
export const Default = DefaultTemplate.bind({});
79+
80+
<Canvas>
81+
<Story name="Default">{Default}</Story>
82+
</Canvas>
83+
84+
export const Icons = IconsTemplate.bind({});
85+
86+
<Canvas>
87+
<Story name="Icons">{Icons}</Story>
88+
</Canvas>
89+
90+
### Vertical orientation
91+
92+
export const Vertical = DefaultTemplate.bind({});
93+
Vertical.args = {
94+
orientation: "vertical",
95+
};
96+
97+
<Canvas>
98+
<Story name="Vertical orientation">{Vertical}</Story>
99+
</Canvas>
100+
101+
export const VerticalIcons = IconsTemplate.bind({});
102+
VerticalIcons.args = {
103+
orientation: "vertical",
104+
};
105+
106+
<Canvas>
107+
<Story name="Vertical orientation, icons">{VerticalIcons}</Story>
108+
</Canvas>

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { rem } from "@mantine/core";
2+
import type { MantineThemeOverride, TabsStylesParams } from "@mantine/core";
3+
4+
const TAB_PADDING = {
5+
horizontal: `${rem(11)} ${rem(8)}`,
6+
vertical: `${rem(11)} ${rem(15)} ${rem(11)} ${rem(8)}`,
7+
};
8+
9+
export const getTabsOverrides = (): MantineThemeOverride["components"] => ({
10+
Tabs: {
11+
styles: (theme, { orientation }: TabsStylesParams) => ({
12+
tab: {
13+
color: theme.colors.text[2],
14+
padding: TAB_PADDING[orientation],
15+
"&:hover": {
16+
borderColor: theme.colors.bg[1],
17+
backgroundColor: theme.colors.brand[0],
18+
},
19+
"&[data-active]": {
20+
color: theme.colors.brand[1],
21+
borderColor: theme.colors.brand[1],
22+
},
23+
"&:disabled": {
24+
color: theme.colors.text[0],
25+
opacity: 1,
26+
},
27+
},
28+
tabLabel: {
29+
fontSize: theme.fontSizes.md,
30+
fontWeight: "bold",
31+
lineHeight: theme.lineHeight,
32+
},
33+
tabIcon: {
34+
"&:not(:only-child)": {
35+
marginRight: rem(6),
36+
},
37+
},
38+
tabsList: {
39+
borderColor: theme.colors.bg[1],
40+
},
41+
}),
42+
},
43+
});

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export { Tabs } from "@mantine/core";
2+
export type {
3+
TabsProps,
4+
TabProps,
5+
TabsListProps,
6+
TabsPanelProps,
7+
} from "@mantine/core";
8+
export { getTabsOverrides } from "./Tabs.styled";

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Tabs";

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const argTypes = {
6161

6262
# Menu
6363

64-
Our themed wrapper around [Mantine Menu](https://mantine.dev/core/menu/).
64+
Our themed wrapper around [Mantine Menu](https://v6.mantine.dev/core/menu/).
6565

6666
## When to use Menu
6767

@@ -82,7 +82,7 @@ Not to use:
8282
## Docs
8383

8484
- [Figma File](https://www.figma.com/file/MZhwfwmOaa8HeCBBUCeq7R/Menu?type=design&node-id=1-96&mode=design&t=vj3dPYMbYVYVuKBy-0)
85-
- [Mantine Menu Docs](https://mantine.dev/core/menu/)
85+
- [Mantine Menu Docs](https://v6.mantine.dev/core/menu/)
8686

8787
## Caveats
8888

‎frontend/src/metabase/ui/components/typography/Anchor/Anchor.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const argTypes = {
3636

3737
# Anchor
3838

39-
Our themed wrapper around [Mantine Anchor](https://mantine.dev/core/anchor/).
39+
Our themed wrapper around [Mantine Anchor](https://v6.mantine.dev/core/anchor/).
4040

4141
## When to use Anchor
4242

@@ -45,7 +45,7 @@ The Anchor component allows users to display links with themed styles, and repla
4545
## Docs
4646

4747
- [Figma File](https://www.figma.com/file/8nuIBDQGSGKLfAPsebbASA/Navigation-%2F-Anchor?type=design&node-id=1-96&mode=design&t=2eUYOsqZZeMc4OGT-0)
48-
- [Mantine Anchor Docs](https://mantine.dev/core/anchor/)
48+
- [Mantine Anchor Docs](https://v6.mantine.dev/core/anchor/)
4949

5050
## Examples
5151

‎frontend/src/metabase/ui/components/typography/Text/Text.stories.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const argTypes = {
6161

6262
# Text
6363

64-
Our themed wrapper around [Mantine Text](https://mantine.dev/core/text/).
64+
Our themed wrapper around [Mantine Text](https://v6.mantine.dev/core/text/).
6565

6666
## When to use Text
6767

@@ -70,7 +70,7 @@ The Text component allows users to display text with themed styles, and replaces
7070
## Docs
7171

7272
- [Figma File](https://www.figma.com/file/h6aMN8H67eu2w8wmDngfnM/Typography-%2F-Text?type=design&node-id=1-96&mode=design&t=2eUYOsqZZeMc4OGT-0)
73-
- [Mantine Text Docs](https://mantine.dev/core/text/)
73+
- [Mantine Text Docs](https://v6.mantine.dev/core/text/)
7474

7575
## Examples
7676

0 commit comments

Comments
 (0)