Fusion UI

Overview

A Sheet slides in from the side with a SheetHeader for the title and actions. The page stays visible next to it.

Treat the content of a sheet like a page: it sits on the page background with the same padding, so lay it out with tiles, e.g. in a StackLayout, instead of placing controls directly on the sheet.

"use client";

import {
  Button,
  ButtonGroup,
  FormField,
  FormSpacing,
  IconExpandDown,
  Input,
  Sheet,
  SheetHeader,
  SplitButton,
  Tile,
  TileContent,
  TileHeader,
} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const SheetExample = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div style={{display: "grid", gap: "1rem", placeItems: "start"}}>
      <Button
        onClick={() => {
          setIsOpen(true);
        }}>
        Open Sheet
      </Button>
      <Sheet
        open={isOpen}
        size={"medium"}
        header={
          <SheetHeader
            closeCallback={() => setIsOpen(false)}
            actions={
              <ButtonGroup>
                <Button color={"neutral"} size={"small"}>
                  Buttons
                </Button>
                <SplitButton>
                  <Button size={"small"}>Button</Button>
                  <Button size={"small"} primaryIcon={<IconExpandDown />}></Button>
                </SplitButton>
              </ButtonGroup>
            }>
            Sheet Title
          </SheetHeader>
        }
        onAbort={() => setIsOpen(false)}>
        <Tile>
          <TileHeader>
            <h2>Overview</h2>
          </TileHeader>
          <TileContent>
            <div style={{display: "flex", flexDirection: "column", gap: "1rem"}}>
              <FormField
                label={"Formular Label"}
                required={true}
                hint={"This is a hint."}
                errorMessage={"This is an error message."}>
                <FormSpacing>
                  <Input value={"Input 1"} onChange={() => {}}></Input>
                </FormSpacing>
              </FormField>
              <FormField
                label={"Formular Label 2"}
                required={true}
                hint={"This is a hint. 2"}
                errorMessage={"This is an error message. 2"}>
                <FormSpacing>
                  <Input value={"Input 2"} onChange={() => {}}></Input>
                </FormSpacing>
              </FormField>
            </div>
          </TileContent>
        </Tile>
      </Sheet>
    </div>
  );
};

Stacked sheets

Sheets can be stacked, e.g. to open the details of a related record from a sheet. Each sheet brings its own blanket; the upper one covers the lower, a click beside it closes only the upper one.

"use client";

import {
  Button,
  Input,
  Sheet,
  SheetHeader,
  StackLayout,
  Tile,
  TileContent,
  TileHeader,
} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const SheetStackedExample = () => {
  const [orderOpen, setOrderOpen] = useState(false);
  const [customerOpen, setCustomerOpen] = useState(false);

  return (
    <div style={{display: "grid", placeItems: "start"}}>
      <Button onClick={() => setOrderOpen(true)}>Open order #1042</Button>

      <Sheet
        open={orderOpen}
        size={"large"}
        header={<SheetHeader closeCallback={() => setOrderOpen(false)}>Order #1042</SheetHeader>}
        onAbort={() => setOrderOpen(false)}>
        <StackLayout>
          <Tile>
            <TileHeader>Customer</TileHeader>
            <TileContent>
              <div style={{display: "grid", gap: "0.75rem", justifyItems: "start"}}>
                <span className={"body-font"}>Jane Doe, jane@example.com</span>
                <Button
                  size={"small"}
                  color={"neutral"}
                  buttonStyle={"outline"}
                  onClick={() => setCustomerOpen(true)}>
                  Show customer
                </Button>
              </div>
            </TileContent>
          </Tile>
          <Tile>
            <TileHeader>Shipping</TileHeader>
            <TileContent>
              <span className={"body-font"}>Standard delivery, 2 to 3 days</span>
            </TileContent>
          </Tile>
        </StackLayout>
      </Sheet>

      <Sheet
        open={customerOpen}
        size={"medium"}
        header={<SheetHeader closeCallback={() => setCustomerOpen(false)}>Jane Doe</SheetHeader>}
        onAbort={() => setCustomerOpen(false)}>
        <StackLayout>
          <Tile>
            <TileHeader>Contact</TileHeader>
            <TileContent>
              <Input label={"Email"} value={"jane@example.com"} onChange={() => {}} />
            </TileContent>
          </Tile>
        </StackLayout>
      </Sheet>
    </div>
  );
};