Mantine Paper (#33491)

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

@@ -6,4 +6,4 @@ export * from "./layout";
 export * from "./overlays";
 export * from "./theme";
 export * from "./typography";
-export * from "./util";
+export * from "./utils";

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

-export * from "./Box";
 export * from "./Center";
 export * from "./Flex";
 export * from "./Grid";

frontend/src/metabase/ui/components/utils/Paper/Paper.stories.mdx

+import { Fragment } from "react";
+import { Canvas, Story, Meta } from "@storybook/addon-docs";
+import { Grid, Paper, Text } from "metabase/ui";
+
+export const args = {
+  p: "md",
+  radius: "md",
+  withBorder: false,
+};
+
+export const sampleArgs = {
+  text: "The elm tree planted by Eleanor Bold, the judge’s daughter, fell last night.",
+};
+
+export const argTypes = {
+  p: {
+    options: ["xs", "sm", "md", "lg", "xl"],
+    control: { type: "inline-radio" },
+  },
+  radius: {
+    options: ["xs", "sm", "md"],
+    control: { type: "inline-radio" },
+  },
+  withBorder: {
+    control: { type: "boolean" },
+  },
+};
+
+<Meta title="Utils/Paper" component={Paper} args={args} argTypes={argTypes} />
+
+# Paper
+
+Our themed wrapper around [Mantine Paper](https://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/)
+
+## Examples
+
+export const DefaultTemplate = args => (
+  <Paper {...args}>
+    <Text>{sampleArgs.text}</Text>
+  </Paper>
+);
+
+export const GridTemplate = args => (
+  <Grid columns={argTypes.radius.options.length + 1} align="center" gutter="xl">
+    <Grid.Col span={1} />
+    {argTypes.radius.options.map(radius => (
+      <Grid.Col key={radius} span={1} align="center">
+        <Text weight="bold">Radius {radius}</Text>
+      </Grid.Col>
+    ))}
+    {argTypes.p.options.flatMap(padding => (
+      <Fragment key={padding}>
+        <Grid.Col span={1}>
+          <Text weight="bold">Padding {padding}</Text>
+        </Grid.Col>
+        {argTypes.radius.options.map(radius => (
+          <Grid.Col key={radius} span={1}>
+            <Paper {...args} p={padding} radius={radius}>
+              <Text>{sampleArgs.text}</Text>
+            </Paper>
+          </Grid.Col>
+        ))}
+      </Fragment>
+    ))}
+  </Grid>
+);
+
+export const Default = DefaultTemplate.bind({});
+
+<Canvas>
+  <Story name="Default">{Default}</Story>
+</Canvas>
+
+### No border
+
+export const NoBorder = GridTemplate.bind({});
+
+<Canvas>
+  <Story name="No border">{NoBorder}</Story>
+</Canvas>
+
+### Border
+
+export const Border = GridTemplate.bind({});
+Border.args = {
+  withBorder: true,
+};
+
+<Canvas>
+  <Story name="Border" args={Border.args}>
+    {Border}
+  </Story>
+</Canvas>

frontend/src/metabase/ui/components/utils/Paper/Paper.styled.tsx

+import type { MantineThemeOverride, PaperStylesParams } from "@mantine/core";
+
+export const getPaperOverrides = (): MantineThemeOverride["components"] => ({
+  Paper: {
+    defaultProps: {
+      radius: "md",
+      shadow: "md",
+    },
+    styles: (theme, params: PaperStylesParams) => ({
+      root: {
+        color: theme.colors.text[2],
+        backgroundColor: theme.white,
+        "&[data-with-border]": {
+          borderColor: theme.colors.border[0],
+        },
+      },
+    }),
+  },
+});

frontend/src/metabase/ui/components/utils/Paper/index.ts

+export { Paper } from "@mantine/core";
+export { getPaperOverrides } from "./Paper.styled";

frontend/src/metabase/ui/components/util/index.ts → frontend/src/metabase/ui/components/utils/index.ts

+export * from "./Box";
 export * from "./FocusTrap";
+export * from "./Paper";

frontend/src/metabase/ui/theme.ts

@@ -10,6 +10,7 @@ import {
   getMenuOverrides,
   getNumberInputOverrides,
   getRadioOverrides,
+  getPaperOverrides,
   getTextInputOverrides,
   getTextOverrides,
   getTitleOverrides,
@@ -105,6 +106,7 @@ export const getThemeOverrides = (): MantineThemeOverride => ({
     ...getNumberInputOverrides(),
     ...getRadioOverrides(),
     ...getTextInputOverrides(),
+    ...getPaperOverrides(),
     ...getTextOverrides(),
     ...getTitleOverrides(),
   },