Fusion UI

Overview

A Toolbar floats above the content and offers the actions for what is currently selected or focused. It consists of one or more segments, each holding any components, interactive or not. The toolbar animates in and out, and between segments of different sizes.

Triggered by a button

Toolbar open: false

"use client";

import React, {useState} from "react";
import {
  Button,
  ButtonGroup,
  IconFileCopy,
  IconExternalLink,
  IconDeleteBin5,
} from "@brynlabs/fusion-ui";
import {useToolbar} from "@brynlabs/fusion-ui";

export const ButtonWithToolbarExample = () => {
  const [toolbarOpen, setToolbarOpen] = useState(false);

  const exampleToolbar = useToolbar({
    segments: [
      {
        segment: [
          {
            section: (
              <>
                <div>5 selected</div>
                <div>Total: 1.920€</div>
              </>
            ),
          },
        ],
      },
      {
        segment: [
          {
            section: (
              <ButtonGroup>
                <Button
                  buttonStyle="ghost"
                  color="neutral"
                  size="large"
                  primaryIcon={<IconExternalLink />}>
                  Export
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconFileCopy />}>
                  Duplicate
                </Button>
              </ButtonGroup>
            ),
            hasDivider: true,
            hasSidePadding: false,
          },
          {
            section: (
              <Button
                buttonStyle="flat"
                size="large"
                color="critical"
                primaryIcon={<IconDeleteBin5 />}>
                Delete
              </Button>
            ),
            hasSidePadding: false,
          },
        ],
      },
    ],
  });

  const toggleToolbar = () => {
    if (toolbarOpen) {
      exampleToolbar.hideToolbar();
    } else {
      exampleToolbar.showToolbar();
    }
    setToolbarOpen(!toolbarOpen);
  };

  return (
    <>
      <Button onClick={toggleToolbar}>Toggle Toolbar</Button>
      <div>Toolbar open: {toolbarOpen.toString()}</div>
    </>
  );
};

Shared by a form

All fields of the form show the same toolbar while focused.

"use client";

import React, {CSSProperties} from "react";
import {useToolbar} from "@brynlabs/fusion-ui";

export const FormWithToolbarExample = () => {
  const exampleToolbar = useToolbar({
    segments: [{segment: {section: "Left Segment"}}, {segment: {section: "Right Segment"}}],
  });

  const inputStyle: CSSProperties = {
    border: "1px solid black",
  };

  return (
    <div {...exampleToolbar.focusWithinProps}>
      <input type="text" style={inputStyle} />
      <input type="text" style={inputStyle} />
    </div>
  );
};

Text area with an action

"use client";

import React, {useState} from "react";
import {Button, IconDeleteBin5} from "@brynlabs/fusion-ui";
import {useToolbar} from "@brynlabs/fusion-ui";

export const TextareaWithToolbarExample = () => {
  const [textareaValue, setTextareaValue] = useState("Delete me with the toolbar action!");
  const textareaToolbar = useToolbar({
    segments: {
      segment: {
        hasSidePadding: false,
        section: (
          <Button
            buttonStyle="ghost"
            size="large"
            color="critical"
            primaryIcon={<IconDeleteBin5 />}
            onClick={() => setTextareaValue("")}>
            Clear
          </Button>
        ),
      },
    },
  });

  return (
    <div style={{display: "flex", gap: "10px"}}>
      <textarea
        {...textareaToolbar.focusWithinProps}
        cols={30}
        rows={10}
        value={textareaValue}
        onChange={v => setTextareaValue(v.target.value)}
        style={{
          border: "1px solid black",
        }}></textarea>
    </div>
  );
};

Overflowing content

Content that is wider than the toolbar scrolls with an animation.

Toolbar open: false

"use client";

import React, {useState} from "react";
import {
  Button,
  ButtonGroup,
  IconAdd,
  IconAttachment2,
  IconBookmark,
  IconCalendar,
  IconApps,
  IconListCheck2,
  IconFileCopy,
  IconEdit,
  IconExternalLink,
  IconFileUpload,
  IconFilter,
  IconNotification,
  IconAlarmWarning,
  IconRestart,
  IconSearch,
  IconDeleteBin5,
} from "@brynlabs/fusion-ui";
import {useToolbar} from "@brynlabs/fusion-ui";

export const ScrollingToolbarExample = () => {
  const [toolbarOpen, setToolbarOpen] = useState(false);

  const exampleToolbar = useToolbar({
    segments: [
      {
        segment: [
          {section: "5 selected", hasDivider: true},
          {section: "Status: Online", hasDivider: true},
          {section: "Total: 1.920€"},
        ],
      },
      {
        segment: [
          {
            section: (
              <Button
                buttonStyle="ghost"
                color="neutral"
                size="large"
                primaryIcon={<IconExternalLink />}>
                Export
              </Button>
            ),
            hasSidePadding: false,
          },
          {
            section: (
              <ButtonGroup>
                <Button buttonStyle="ghost" size="large" color="neutral" primaryIcon={<IconAdd />}>
                  Add
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconFileCopy />}>
                  Duplicate
                </Button>
                <Button buttonStyle="ghost" size="large" color="neutral" primaryIcon={<IconEdit />}>
                  Edit
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconFilter />}>
                  Filter
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconSearch />}>
                  Search
                </Button>
                <Button buttonStyle="ghost" size="large" color="neutral" primaryIcon={<IconApps />}>
                  Category
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconCalendar />}>
                  Calendar
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconBookmark />}>
                  Bookmarks
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconListCheck2 />}>
                  Checklist
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconFileUpload />}>
                  Upload
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconAttachment2 />}>
                  Attach
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconRestart />}>
                  Reload
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconNotification />}>
                  Notifications
                </Button>
                <Button
                  buttonStyle="ghost"
                  size="large"
                  color="neutral"
                  primaryIcon={<IconAlarmWarning />}>
                  Nuke
                </Button>
              </ButtonGroup>
            ),
            hasSidePadding: false,
          },
        ],
      },
      {
        segment: {
          section: (
            <Button
              buttonStyle="ghost"
              size="large"
              color="critical"
              primaryIcon={<IconDeleteBin5 />}>
              Delete
            </Button>
          ),
          hasSidePadding: false,
        },
      },
    ],
  });

  const toggleToolbar = () => {
    if (toolbarOpen) {
      exampleToolbar.hideToolbar();
    } else {
      exampleToolbar.showToolbar();
    }
    setToolbarOpen(!toolbarOpen);
  };

  return (
    <>
      <Button onClick={toggleToolbar}>Toggle Toolbar</Button>
      <div>Toolbar open: {toolbarOpen.toString()}</div>
    </>
  );
};