Toolbar

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/toolbar

Yarn

yarn add @leafygreen-ui/toolbar

NPM

npm install @leafygreen-ui/toolbar

Example

import {Toolbar, ToolbarIconButton} from `@leafygreen-ui/toolbar`;

<Toolbar>
  <ToolbarIconButton active glyph="Code" label="Code" />
  <ToolbarIconButton glyph="Key" label="Key" />
  <ToolbarIconButton glyph="Plus" label="Plus" />
</Toolbar>

Toolbar

Props

| Prop | Type | Description | Default | | ----------- | -------------- | ---------------------------------------------------- | ------------ | | darkMode | boolean | Determines if the component will render in dark mode | false | | data-lgid | lg-${string} | Custom testid to pass to getTestUtils | lg-toolbar |

+ other HTML div element props

ToolbarIconButton

Props

| Prop | Type | Description | Default | | ------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | glyph | Glyph | Name of the icon glyph to display in the button. List of available glyphs can be found in the Icon README. | | | label | React.ReactNode | Text that appears in the tooltip on hover/focus | | | isTooltipEnabled (optional) | boolean | Enables the tooltip to trigger based on hover events. When false, the tooltip will not show on hover. Useful when other overlays (like GuideCue) are positioned on the button. | true |

+ Extends LG IconButton props with the exception of as, children, darkMode, href, size, and tabIndex

Test Harnesses

getTestUtils()

getTestUtils() is a util that allows consumers to reliably interact with LG Toolbar in a product test suite. If the Toolbar component cannot be found, an error will be thrown.

Usage

import { getTestUtils } from '@leafygreen-ui/toolbar/testing';

const utils = getTestUtils(lgId?: string); // lgId refers to the custom `data-lgid` attribute passed to `Toolbar`. It defaults to 'lg-toolbar' if left empty.

Single Toolbar component

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Toolbar, ToolbarIconButton } from '@leafygreen-ui/toolbar';
import { getTestUtils } from '@leafygreen-ui/toolbar/testing';

...

test('Toolbar', () => {
  render(
    <Toolbar>
      <ToolbarIconButton active glyph="Code" label="Code" />
      <ToolbarIconButton glyph="Key" label="Key" />
      <ToolbarIconButton glyph="Plus" label="Plus" />
    </Toolbar>
  );

  const {
    findToolbar,
    getToolbar,
    queryToolbar,
    getAllToolbarIconButtons,
    getToolbarIconButtonByLabel,
    getActiveToolbarIconButton
  } = getTestUtils();

  expect(await findToolbar()).toBeInTheDocument();
  expect(getToolbar()).toBeInTheDocument();
  expect(queryToolbar()).toBeInTheDocument();
  expect(getAllToolbarIconButtons().length).toBe(3);
  expect(getToolbarIconButtonByLabel('Code')?.getElement()).toBeInTheDocument();
  expect(getActiveToolbarIconButton()).toHaveAttribute('aria-label','Code');
});

Multiple Toolbar components

When testing multiple Toolbar components, it is recommended to add the custom data-lgid attribute to each Toolbar.

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Toolbar, ToolbarIconButton } from '@leafygreen-ui/toolbar';
import { getTestUtils } from '@leafygreen-ui/toolbar/testing';

...

test('Toolbar', () => {
  render(
    <>
      <Toolbar data-lgid='lg-toolbar-abc'>
        <ToolbarIconButton active glyph="Code" label="Code" />
        <ToolbarIconButton glyph="Key" label="Key" />
      </Toolbar>
      <Toolbar  data-lgid='lg-toolbar-xyz'>
        <ToolbarIconButton active glyph="Code" label="Code" />
        <ToolbarIconButton glyph="Key" label="Key" />
        <ToolbarIconButton glyph="Plus" label="Plus" />
      </Toolbar>
    </>
  );

  const testUtils1 = getTestUtils('lg-toolbar-abc');
  const testUtils2 = getTestUtils('lg-toolbar-xy');

  // First Toolbar
  expect(testUtils1.getAllToolbarIconButtons().length).toBe(2);

  // Second Toolbar
  expect(testUtils2.getAllToolbarIconButtons().length).toBe(3);
});

Test Utils

const {
  findToolbar,
  getToolbar,
  queryToolbar,
  getAllToolbarIconButtons,
  getToolbarIconButtonByLabel,
  getActiveToolbarIconButton,
} = getTestUtils();

| Util | Description | Returns | | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | | findToolbar() | Returns a promise that resolves to the element using the data-lgid data attribute. The promise is rejected if no elements match or if more than one match is found. | () => Promise<HTMLButtonElement> | | getToolbar() | Returns the element using the data-lgid data attribute. Will throw if no elements match or if more than one match is found. | () => HTMLButtonElement | | queryToolbar() | Returns the element using the data-lgid data attribute or null if no elements match. Will throw if more than one match is found. | () => HTMLButtonElement \| null | | getAllToolbarIconButtons() | Returns an array of all <ToolbarIconButtons /> | () => Array<HTMLButtonElement> | | getToolbarIconButtonByLabel() | Returns the <ToolbarIconButton /> based on the label | (label: string) => ToolbarIconButtonUtils \| null | | getActiveToolbarIconButton() | Returns the first active <ToolbarIconButton /> | () => HTMLButtonElement \| undefined |