Basic Sidesheet Components (#47100)

* Basic Sidesheet Components

* sidesheet samples and storybook stories

* add unit tests and fix more imports

* small styling updates

* small styling updates

* fix tests

* Update frontend/src/metabase/common/components/Sidesheet/SidesheetCard.tsx

Co-authored-by: Raphael Krut-Landau <raphael.kl@gmail.com>

* fix type problem

---------

Co-authored-by: Raphael Krut-Landau <raphael.kl@gmail.com>

frontend/src/metabase/common/components/Sidesheet/Sidesheet.samples.tsx

+import { useState } from "react";
+import { useMount } from "react-use";
+
+import { Sidesheet, SidesheetCard } from "metabase/common/components/Sidesheet";
+import { SidesheetCardSection } from "metabase/common/components/Sidesheet/SidesheetCardSection";
+import SideSheetStyles from "metabase/common/components/Sidesheet/sidesheet.module.css";
+import { Flex, Icon, Stack, Switch, Tabs } from "metabase/ui";
+
+import { SidesheetButtonWithChevron } from "./SidesheetButton";
+import { SidesheetSubPage } from "./SidesheetSubPage";
+import { SidesheetTabPanelContainer } from "./SidesheetTabPanelContainer";
+
+export const TestTabbedSidesheet = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState(true);
+
+  return (
+    <Sidesheet
+      title="My side sheet"
+      isOpen={isSheetOpen}
+      onClose={() => setIsSheetOpen(false)}
+      removeBodyPadding
+    >
+      <Tabs defaultValue="two" className={SideSheetStyles.FlexScrollContainer}>
+        <Tabs.List mx="lg">
+          <Tabs.Tab value="one">One</Tabs.Tab>
+          <Tabs.Tab value="two">Two</Tabs.Tab>
+          <Tabs.Tab value="three">Three</Tabs.Tab>
+        </Tabs.List>
+        <SidesheetTabPanelContainer>
+          <Tabs.Panel value="one">
+            <SidesheetCard>Tab 1 content</SidesheetCard>
+          </Tabs.Panel>
+          <Tabs.Panel value="two" h="100%">
+            <Stack spacing="lg">
+              <SidesheetCard title="Sidesheets with tabs">
+                Lots of side sheets have tabs, which can be tricky to set up to
+                handle scrolling properly. Fortunately, there are a couple
+                helper components that make this easy.
+              </SidesheetCard>
+              <SidesheetCard title="SidesheetTabPanelContainer">
+                <p>
+                  Wrap all your tab panels in{" "}
+                  <code>SidesheetTabPanelContainer</code> to get them scrolling
+                  internally so that the tabs remain visible at all times.
+                </p>
+              </SidesheetCard>
+
+              <SidesheetCard title="removeBodyPadding prop">
+                <p>
+                  You&apos;ll need to pass the{" "}
+                  <code>removeBodyPadding prop</code> to any sidesheet with tabs
+                  so that you can keep the scrollbar on the outer container when
+                  you have tabs.
+                </p>
+              </SidesheetCard>
+            </Stack>
+          </Tabs.Panel>
+          <Tabs.Panel value="three">
+            <SidesheetCard>Tab 3 content</SidesheetCard>
+          </Tabs.Panel>
+        </SidesheetTabPanelContainer>
+      </Tabs>
+    </Sidesheet>
+  );
+};
+
+export const TestPagedSidesheet = () => {
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [page, setPage] = useState("main");
+
+  useMount(() => setIsSheetOpen(true));
+
+  if (page === "sub") {
+    return (
+      <SidesheetSubPage
+        title="More Settings"
+        isOpen={isSheetOpen}
+        onBack={() => setPage("main")}
+        onClose={() => setIsSheetOpen(false)}
+      >
+        <SidesheetCard title="My Section Title">
+          look at all these settings
+          <Switch label="my cool setting" />
+          <Switch label="my other setting" />
+        </SidesheetCard>
+      </SidesheetSubPage>
+    );
+  }
+
+  return (
+    <Sidesheet
+      title="My side sheet"
+      isOpen={isSheetOpen}
+      onClose={() => setIsSheetOpen(false)}
+    >
+      <SidesheetCard title="Sidesheets can have subpages">
+        <p>
+          Subpages are really just a whole other sidesheet with a title with a
+          back chevron. but there&apos;s a handy <code>SidesheetSubPage</code>{" "}
+          component you can use to make sure the UI is consistent across
+          subpages
+        </p>
+      </SidesheetCard>
+      <SidesheetCard title="Here's an example">
+        Here&apos;s some information about a cool feature that you can configure
+        in a subpage.
+        <SidesheetButtonWithChevron
+          fullWidth
+          onClick={() => setPage("sub")}
+          leftIcon={<Icon name="gear" />}
+        >
+          More Settings in a full width button
+        </SidesheetButtonWithChevron>
+        <Flex justify="space-between">
+          <label>More Settings Label</label>
+          <SidesheetButtonWithChevron onClick={() => setPage("sub")}>
+            Active
+          </SidesheetButtonWithChevron>
+        </Flex>
+      </SidesheetCard>
+      <SidesheetCard>
+        stuff without a title
+        <SidesheetCardSection>section stuff</SidesheetCardSection>
+      </SidesheetCard>
+
+      <SidesheetCard>
+        stuff without a title
+        <SidesheetCardSection>section stuff</SidesheetCardSection>
+        <SidesheetCardSection title="another section">
+          more stuff
+        </SidesheetCardSection>
+      </SidesheetCard>
+
+      <SidesheetCard>
+        stuff without a title
+        <SidesheetCardSection>section stuff</SidesheetCardSection>
+        <SidesheetCardSection title="another section">
+          more stuff
+        </SidesheetCardSection>
+      </SidesheetCard>
+    </Sidesheet>
+  );
+};

frontend/src/metabase/common/components/Sidesheet/Sidesheet.stories.mdx

+import { Canvas, Story, Meta } from "@storybook/addon-docs";
+import { Box, Flex } from "metabase/ui";
+
+import { Sidesheet } from "./Sidesheet";
+import { SidesheetCard } from "./SidesheetCard";
+import { SidesheetCardSection } from "./SidesheetCardSection";
+import { SidesheetButton, SidesheetButtonWithChevron } from "./SidesheetButton";
+
+import { TestTabbedSidesheet, TestPagedSidesheet} from "./Sidesheet.samples";
+
+export const args = {
+  size: "md",
+  title: "My Awesome Sidesheet",
+  onClose: () => {},
+  isOpen: true,
+};
+
+export const argTypes = {
+  size: {
+    options: ["xs", "sm", "md", "lg", "xl", "auto"],
+    control: { type: "inline-radio" },
+  },
+  title: {
+    control: { type: "text" },
+  },
+  isOpen: {
+    control: { type: "boolean" },
+  }
+};
+
+<Meta title="Components/Sidesheet" component={Sidesheet} args={args} argTypes={argTypes} />
+
+# Sidesheet
+
+
+## When to use a Sidesheet
+
+
+
+## Docs
+
+
+## Caveats
+
+
+
+## Usage guidelines
+
+
+
+## Examples
+
+// TODO: figure out how to get CSS modules working with storybook 🔥
+
+export const DefaultTemplate = args => (
+  <Sidesheet {...args}>
+    Call me Ishmael ...
+  </Sidesheet>
+);
+
+export const WithCardsTemplate = args => (
+  <Sidesheet {...args}>
+    <SidesheetCard>
+      Here is even more cool information
+    </SidesheetCard>
+    <SidesheetCard title="Some information has a title">
+      titles are neat
+    </SidesheetCard>
+  </Sidesheet>
+);
+
+export const WithSectionedCardsTemplate = args => (
+  <Sidesheet {...args}>
+    <SidesheetCard>
+      <SidesheetCardSection title="lots">
+        Some cards have so much information
+      </SidesheetCardSection>
+      <SidesheetCardSection title="of information">
+        that you need a bunch
+      </SidesheetCardSection>
+      <SidesheetCardSection title="to display">
+        of sections to display it all
+      </SidesheetCardSection>
+    </SidesheetCard>
+  </Sidesheet>
+);
+
+export const PagedSidesheetTemplate = () => (
+  <TestPagedSidesheet />
+);
+
+export const TabbedSidesheetTemplate = () => (
+  <TestTabbedSidesheet />
+);
+
+
+export const SidesheetButtonTemplate = () => (
+  <Flex maw="30rem" direction="column" gap="lg">
+    <SidesheetCard title="normal">
+      <SidesheetButton>
+        Do something fun
+      </SidesheetButton>
+    </SidesheetCard>
+    <SidesheetCard title="with chevron">
+      <Flex justify="space-between">
+        Favorite Pokemon
+        <SidesheetButtonWithChevron>
+          Naclstack
+        </SidesheetButtonWithChevron>
+      </Flex>
+    </SidesheetCard>
+    <SidesheetCard title="with chevron - fullWidth">
+      <SidesheetButtonWithChevron fullWidth>
+        Configure favorite pokemon
+      </SidesheetButtonWithChevron>
+    </SidesheetCard>
+  </Flex>
+);
+
+export const Default = DefaultTemplate.bind({});
+
+<Canvas>
+  <Story name="Default">{Default}</Story>
+</Canvas>
+
+### With cards
+
+export const WithCards = WithCardsTemplate.bind({});
+
+<Canvas>
+  <Story name="With cards">{WithCards}</Story>
+</Canvas>
+
+
+### With sectioned cards
+
+export const WithSectionedCards = WithSectionedCardsTemplate.bind({});
+
+<Canvas>
+  <Story name="With sectioned cards">{WithSectionedCards}</Story>
+</Canvas>
+
+### With pages
+
+export const WithPages = PagedSidesheetTemplate.bind({});
+
+<Canvas>
+  <Story name="With sub pages">{WithPages}</Story>
+</Canvas>
+
+### With tabs
+
+export const WithTabs = TabbedSidesheetTemplate.bind({});
+
+<Canvas>
+  <Story name="With tabs">{WithTabs}</Story>
+</Canvas>
+
+### Sidesheet Buttons
+
+export const SidesheetButtonStory = SidesheetButtonTemplate.bind({});
+
+<Canvas>
+  <Story name="Sidesheet buttons">{SidesheetButtonStory}</Story>
+</Canvas>

frontend/src/metabase/common/components/Sidesheet/Sidesheet.tsx

+import type React from "react";
+import { t } from "ttag";
+
+import { Modal, Stack } from "metabase/ui";
+
+import Styles from "./sidesheet.module.css";
+
+type Size = "xs" | "sm" | "md" | "lg" | "xl" | "auto";
+
+interface SidesheetProps {
+  title?: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  size?: Size;
+  children: React.ReactNode;
+  /** use this if you want to enable interior scrolling of tab panels */
+  removeBodyPadding?: boolean;
+}
+
+const sizes: Record<Size, string> = {
+  xs: "20rem",
+  sm: "30rem",
+  md: "40rem",
+  lg: "50rem",
+  xl: "60rem",
+  auto: "auto",
+};
+
+export function Sidesheet({
+  title,
+  isOpen,
+  onClose,
+  size = "sm",
+  children,
+  removeBodyPadding,
+}: SidesheetProps) {
+  return (
+    <Modal.Root opened={isOpen} onClose={onClose} h="100dvh">
+      <Modal.Overlay data-testid="modal-overlay" />
+      <Modal.Content
+        transitionProps={{ transition: "slide-left" }}
+        px="none"
+        w={sizes[size]}
+        bg="bg-light"
+        data-testid="sidesheet"
+        className={Styles.SidesheetContent}
+      >
+        <Modal.Header bg="bg-light" px="xl">
+          {title && (
+            <Modal.Title py="md" pr="sm">
+              {title}
+            </Modal.Title>
+          )}
+          <Modal.CloseButton aria-label={t`Close`} />
+        </Modal.Header>
+        <Modal.Body
+          p={0}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            flex: "1 1 auto",
+            overflow: "hidden",
+          }}
+        >
+          <Stack
+            spacing="lg"
+            px={removeBodyPadding ? 0 : "xl"}
+            pb={removeBodyPadding ? 0 : "xl"}
+            mt={title ? "none" : "md"}
+            h="100%"
+            className={Styles.OverflowAuto}
+          >
+            {children}
+          </Stack>
+        </Modal.Body>
+      </Modal.Content>
+    </Modal.Root>
+  );
+}

frontend/src/metabase/common/components/Sidesheet/Sidesheet.unit.spec.tsx

+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Sidesheet } from "./Sidesheet";
+
+describe("Sidesheet", () => {
+  it("should render when open", () => {
+    render(
+      <Sidesheet isOpen onClose={jest.fn()}>
+        hello world
+      </Sidesheet>,
+    );
+
+    expect(screen.getByTestId("sidesheet")).toBeInTheDocument();
+  });
+
+  it("should not render when not open", () => {
+    render(
+      <Sidesheet isOpen={false} onClose={jest.fn()}>
+        hello world
+      </Sidesheet>,
+    );
+
+    expect(screen.queryByTestId("sidesheet")).not.toBeInTheDocument();
+  });
+
+  it("should render with title", () => {
+    render(
+      <Sidesheet title="My Title" isOpen onClose={jest.fn()}>
+        hello world
+      </Sidesheet>,
+    );
+
+    expect(screen.getByText("My Title")).toBeInTheDocument();
+  });
+
+  it("should render with children", () => {
+    render(
+      <Sidesheet title="My Title" isOpen onClose={jest.fn()}>
+        <div>some content</div>
+        <div>more content</div>
+      </Sidesheet>,
+    );
+
+    expect(screen.getByText("some content")).toBeInTheDocument();
+    expect(screen.getByText("more content")).toBeInTheDocument();
+  });
+
+  it("should fire onClose when close button is clicked", async () => {
+    const closeSpy = jest.fn();
+    render(
+      <Sidesheet title="My Title" isOpen onClose={closeSpy}>
+        hello world
+      </Sidesheet>,
+    );
+
+    const closeButton = screen.getByLabelText("Close");
+    await userEvent.click(closeButton);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should fire onClose when modal backdrop is clicked", async () => {
+    const closeSpy = jest.fn();
+
+    render(
+      <Sidesheet title="My Title" isOpen onClose={closeSpy}>
+        hello world
+      </Sidesheet>,
+    );
+
+    const backdrop = screen.getByTestId("modal-overlay");
+    await userEvent.click(backdrop);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+  });
+});

frontend/src/metabase/common/components/Sidesheet/SidesheetButton.tsx

+import { Button, type ButtonProps, Flex, Icon } from "metabase/ui";
+
+export const SidesheetButton = (props: ButtonProps) => (
+  <Button variant="subtle" p={0} {...props} />
+);
+
+export const SidesheetButtonWithChevron = ({
+  children,
+  ...props
+}: ButtonProps) => (
+  <SidesheetButton
+    styles={props.fullWidth ? { label: { width: "100%" } } : undefined}
+    {...props}
+  >
+    <Flex justify="space-between" gap="sm">
+      {children}
+      <Icon name="chevronright" color="var(--mb-color-text-dark)" />
+    </Flex>
+  </SidesheetButton>
+);

frontend/src/metabase/common/components/Sidesheet/SidesheetCard.tsx

+import type React from "react";
+
+import CS from "metabase/css/core/index.css";
+import { Paper, type PaperProps, Stack, Title } from "metabase/ui";
+
+type SidesheetCardProps = {
+  title?: React.ReactNode;
+  children: React.ReactNode;
+} & PaperProps;
+
+export const SidesheetCard = ({
+  title,
+  children,
+  ...paperProps
+}: SidesheetCardProps) => {
+  return (
+    <Paper p="lg" withBorder shadow="none" {...paperProps}>
+      {title && (
+        <Title mb="sm" size="sm" color="text-light">
+          {title}
+        </Title>
+      )}
+      <Stack spacing="md" className={CS.textMedium}>
+        {children}
+      </Stack>
+    </Paper>
+  );
+};

frontend/src/metabase/common/components/Sidesheet/SidesheetCardSection.tsx

+import type React from "react";
+
+import CS from "metabase/css/core/index.css";
+import { Box, type MantineStyleSystemProps, Title } from "metabase/ui";
+
+interface SidesheetCardSectionProps {
+  title?: string;
+  children: React.ReactNode;
+  styleProps?: Partial<MantineStyleSystemProps>;
+}
+
+export const SidesheetCardSection = ({
+  title,
+  children,
+  ...styleProps
+}: SidesheetCardSectionProps) => {
+  return (
+    <Box {...styleProps}>
+      {title && (
+        <Title mb="sm" size="sm" color="text-light">
+          {title}
+        </Title>
+      )}
+      <Box className={CS.textMedium}>{children}</Box>
+    </Box>
+  );
+};

frontend/src/metabase/common/components/Sidesheet/SidesheetSubPage.tsx

+import type React from "react";
+
+import { Button, Flex, Icon, Title } from "metabase/ui";
+
+import { Sidesheet } from "./Sidesheet";
+
+interface SidesheetSubPageTitleProps {
+  title: React.ReactNode;
+  onClick: () => void;
+}
+
+interface SidesheetSubPageProps {
+  title: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  onBack: () => void;
+  children: React.ReactNode;
+}
+
+export const SidesheetSubPageTitle = ({
+  title,
+  onClick,
+}: SidesheetSubPageTitleProps) => {
+  return (
+    <Button variant="unstyled" onClick={onClick} p={0}>
+      <Flex align="center" justify="center" gap="md">
+        <Icon name="chevronleft" />
+        <Title order={2}>{title}</Title>
+      </Flex>
+    </Button>
+  );
+};
+
+export const SidesheetSubPage = ({
+  title,
+  onClose,
+  onBack,
+  children,
+  isOpen,
+}: SidesheetSubPageProps) => (
+  <Sidesheet
+    isOpen={isOpen}
+    title={<SidesheetSubPageTitle title={title} onClick={onBack} />}
+    onClose={onClose}
+  >
+    {children}
+  </Sidesheet>
+);

frontend/src/metabase/common/components/Sidesheet/SidesheetSubPage.unit.spec.tsx

+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { SidesheetSubPage } from "./SidesheetSubPage";
+
+describe("Sidesheet", () => {
+  it("should always render with a back button", () => {
+    render(
+      <SidesheetSubPage
+        isOpen
+        title="Subpage title"
+        onClose={jest.fn()}
+        onBack={jest.fn()}
+      >
+        hello world
+      </SidesheetSubPage>,
+    );
+
+    expect(screen.getByTestId("sidesheet")).toBeInTheDocument();
+    expect(screen.getByLabelText("chevronleft icon")).toBeInTheDocument();
+  });
+
+  it("should not render when not open", () => {
+    render(
+      <SidesheetSubPage
+        isOpen={false}
+        title="Subpage title"
+        onClose={jest.fn()}
+        onBack={jest.fn()}
+      >
+        hello world
+      </SidesheetSubPage>,
+    );
+
+    expect(screen.queryByTestId("sidesheet")).not.toBeInTheDocument();
+  });
+
+  it("should render with title", () => {
+    render(
+      <SidesheetSubPage
+        isOpen
+        title="Subpage title"
+        onClose={jest.fn()}
+        onBack={jest.fn()}
+      >
+        hello world
+      </SidesheetSubPage>,
+    );
+
+    expect(screen.getByText("Subpage title")).toBeInTheDocument();
+  });
+
+  it("should render with children", () => {
+    render(
+      <SidesheetSubPage
+        isOpen
+        title="Subpage title"
+        onClose={jest.fn()}
+        onBack={jest.fn()}
+      >
+        <div>some content</div>
+        <div>more content</div>
+      </SidesheetSubPage>,
+    );
+
+    expect(screen.getByText("some content")).toBeInTheDocument();
+    expect(screen.getByText("more content")).toBeInTheDocument();
+  });
+
+  it("should fire onClose when close button is clicked", async () => {
+    const closeSpy = jest.fn();
+    render(
+      <SidesheetSubPage
+        isOpen
+        title="Subpage title"
+        onClose={closeSpy}
+        onBack={jest.fn()}
+      >
+        hello world
+      </SidesheetSubPage>,
+    );
+
+    const closeButton = screen.getByLabelText("Close");
+    await userEvent.click(closeButton);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should fire onClose when modal backdrop is clicked", async () => {
+    const closeSpy = jest.fn();
+
+    render(
+      <SidesheetSubPage
+        isOpen
+        title="Subpage title"
+        onClose={closeSpy}
+        onBack={jest.fn()}
+      >
+        hello world
+      </SidesheetSubPage>,
+    );
+
+    const backdrop = screen.getByTestId("modal-overlay");
+    await userEvent.click(backdrop);
+    expect(closeSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should fire onBack when back button is clicked", async () => {
+    const backSpy = jest.fn();
+
+    render(
+      <SidesheetSubPage
+        isOpen
+        title="Subpage title"
+        onClose={jest.fn()}
+        onBack={backSpy}
+      >
+        hello world
+      </SidesheetSubPage>,
+    );
+
+    const backBtn = screen.getByLabelText("chevronleft icon");
+    await userEvent.click(backBtn);
+    expect(backSpy).toHaveBeenCalledTimes(1);
+  });
+});

frontend/src/metabase/common/components/Sidesheet/SidesheetTabPanelContainer.tsx

+import type React from "react";
+
+import { Box, type MantineStyleSystemProps } from "metabase/ui";
+
+import Styles from "./sidesheet.module.css";
+
+/** pass the removeBodyPadding prop to the Sidesheet component and wrap
+ * your Tabs.Panels in this component and your padding will be all 👌
+ */
+export const SidesheetTabPanelContainer = (
+  props: MantineStyleSystemProps & { children: React.ReactNode },
+) => (
+  <Box className={Styles.OverflowAuto} p="lg" {...props}>
+    <div>{props.children}</div>
+  </Box>
+);

frontend/src/metabase/common/components/Sidesheet/index.ts

+export * from "./Sidesheet";
+export * from "./SidesheetButton";
+export * from "./SidesheetCard";
+export * from "./SidesheetCardSection";
+export * from "./SidesheetSubPage";
+export * from "./SidesheetTabPanelContainer";

frontend/src/metabase/common/components/Sidesheet/sidesheet.module.css

+.SidesheetContent {
+  &:not([data-css-specificity-hack="🤷‍♀️"]) {
+    position: fixed;
+    height: 100dvh;
+    max-height: 100dvh;
+    inset-inline-end: 0;
+    border-radius: 0;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}
+
+/* if you set overflow: auto on a child of this container can have the child scroll
+ * rather than the parent: useful if you want tabs to scroll internally */
+.FlexScrollContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column !important;
+  height: 0;
+}
+
+.OverflowAuto {
+  overflow: auto;
+}

frontend/src/metabase/ui/index.ts

@@ -4,6 +4,7 @@ export type {
   MantineTheme,
   MantineThemeOverride,
   MantineThemeOther,
+  MantineStyleSystemProps,
 } from "@mantine/core";
 export { useHover } from "@mantine/hooks";
 export * from "./components";