At its most basic, Toolbars consist of content rows of components. Most toolbars will only be a single row, but each row needs to be housed in a DataToolbarContent component.

Task

1) Navigate to the src folder and open src/App.js

Next, we'll set up the general structure of an empty toolbar and add the necessary imports.

2) Copy the following code into the App.js file, replacing all of the content there:

import React from "react";
import "@patternfly/react-core/dist/styles/base.css";
import { Button } from "@patternfly/react-core";
import {
  EditIcon,
  CloneIcon,
  SyncIcon,
  FilterIcon
} from "@patternfly/react-icons";
import {
  DataToolbar,
  DataToolbarContent,
  DataToolbarItem,
  DataToolbarGroup,
  DataToolbarToggleGroup,
  DataToolbarFilter
} from "@patternfly/react-core/dist/esm/experimental";
import Input from "./components/input";
import CheckboxSelect from "./components/checkboxSelect";
import Kebab from "./components/kebab";
import AppTable from "./components/table";

class ToolbarDemoApp extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <React.Fragment>
        Toolbar Demo
      </React.Fragment>
    );
  }
};

export default ToolbarDemoApp;

3) Each toolbar must contain one or more content rows. Wrap the "Toolbar Demo" text in a DataToolbarContent component and place that DataToolbarContent into a DataToolbar.

  <DataToolbar id="tutorial-toolbar">
    <DataToolbarContent>
      Toolbar Demo
    </DataToolbarContent>
  </DataToolbar>

Once the preview reloads - it should look like this:

The individual components placed inside of a toolbar are each wrapped in a DataToolbarItem component. DataToolbarItems can be passed an optional variant prop to format specific type of component it wraps such as a search filter, a pagination component, a bulk select, or an overflow menu. By wrapping components in the DataToolbarItem component and adding the proper variant, you are ensuring the components are spaced appropriately.

Task

We will use the state of our ToolbarDemoApp to manage some of the items in our DataToolbar.

1) Locate the code that looks like the following:

  constructor(props) {
    super(props);
  }

2) Replace ToolbarDemoApp constructor with the following snippet.

  constructor(props) {
    super(props);
    this.state = {
      filters: {
        name: [],
        risk: ["Low"],
        status: ["New", "Pending"]
      }
    };
  }

3) Copy the following onSearch and onSelect event handlers and add them to the ToolbarDemoApp class below your update constructor.

  onSearch = (value) => {
    this.setState(prevState => {
      return {
        filters: {
          ...prevState.filters,
          name: [...prevState.filters.name, value]
        }
      };
    });
  }

  onSelect = (type, event, selection) => {
    const checked = event.target.checked;
    this.setState(prevState => {
      const prevSelections = prevState.filters[type.toLowerCase()];
      return {
        filters: {
          ...prevState.filters,
          [type.toLowerCase()]: checked
            ? [...prevSelections, selection]
            : prevSelections.filter(value => value !== selection)
        }
      };
    });
  };

4) Locate the code that looks like the following:

  render() {
    return (
      ...
    );
  }

5) Add the following constants inside the top of the render function above the return statement.

  const { filters } = this.state;
  const statusOptions = ["New", "Pending", "Running", "Cancelled"];
  const riskOptions = ["Low", "Medium", "High"];

6) Locate the code that looks like the following:

  <DataToolbar id="tutorial-toolbar">
    <DataToolbarContent>Toolbar Demo</DataToolbarContent>
  </DataToolbar>

7) Replace the contents of the DataToolbarContent with the following six items.

In this case, the first of the items we are going to add is going be variant='search-filter'.

    <DataToolbarItem variant="search-filter">
      <Input value="" id="step2Input" ariaLabel="Step 2 input" />
    </DataToolbarItem>
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Status"
        selections={filters.status}
        options={statusOptions}
      />
    </DataToolbarItem>
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Risk"
        selections={filters.risk}
        options={riskOptions}
      />
    </DataToolbarItem>
    <DataToolbarItem>
      <Button variant="plain">
        <EditIcon />
      </Button>
    </DataToolbarItem>
    <DataToolbarItem>
      <Button variant="plain">
        <CloneIcon />
      </Button>
    </DataToolbarItem>
    <DataToolbarItem>
      <Button variant="plain">
        <SyncIcon />
      </Button>
    </DataToolbarItem>
    <DataToolbarItem>
      <Kebab />
    </DataToolbarItem>

Once the preview reloads - it should look like this:

Toolbar groups are used to group sets of like items to create desired associations and to enable items to respond together to changes in viewport width. A DataToolbarGroup is passed an optional prop variant to format particular types of groups of elements such as filter groups, button groups, or icon button groups.

Task

1) Locate the following two DataToolbarItems containing CheckBoxSelect components:

   <DataToolbarItem>
     <CheckboxSelect
       onSelect={this.onSelect}
       type="Status"
       selections={filters.status}
       options={statusOptions}
     />
   </DataToolbarItem>
   <DataToolbarItem>
     <CheckboxSelect
       onSelect={this.onSelect}
       type="Risk"
       selections={filters.risk}
       options={riskOptions}
     />
   </DataToolbarItem>

2) Wrap both the DataToolbarItem components containing our CheckboxSelect filters in the same DataToolbarGroup along with the optional prop variant="filter-group".

  <DataToolbarGroup variant="filter-group">
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Status"
        selections={filters.status}
        options={statusOptions}
      />
    </DataToolbarItem>
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Risk"
        selections={filters.risk}
        options={riskOptions}
      />
    </DataToolbarItem>
  </DataToolbarGroup>

3) Locate the following three DataToolbarItems containing icons:

  <DataToolbarItem>
    <Button variant="plain">
      <EditIcon />
    </Button>
  </DataToolbarItem>
  <DataToolbarItem>
    <Button variant="plain">
      <CloneIcon />
    </Button>
  </DataToolbarItem>
  <DataToolbarItem>
    <Button variant="plain">
      <SyncIcon />
    </Button>
  </DataToolbarItem>

4) Wrap three adjacent DataToolbarItem components containing icons in the same DataToolbarGroup along with the optional prop variant="icon-button-group".

  <DataToolbarGroup variant="icon-button-group">
    <DataToolbarItem>
      <Button variant="plain">
        <EditIcon />
      </Button>
    </DataToolbarItem>
    <DataToolbarItem>
      <Button variant="plain">
        <CloneIcon />
      </Button>
    </DataToolbarItem>
    <DataToolbarItem>
      <Button variant="plain">
        <SyncIcon />
      </Button>
    </DataToolbarItem>
  </DataToolbarGroup>

Once the preview reloads - it should look like this: Notice how the filters in the DataToolbarGroup with the filter-group variant have no spacing between them, and that the DataToolbarGroup with the icon-button-group variant are now spaced closer to each other than before the variant prop was provided.

One particular type of Data toolbar group is called the toggle group. A DataToolbarToggleGroup can be used when you want to collapse a set of items into an overlay panel at a certain breakpoint. This allows complex toolbars with multiple items and groups of items to be responsive. A toggle group is useful for containing filter controls, for example. When the toolbar responds to adapt to a mobile viewport, the contents contained in a toggle group will collapse into an overlay panel that can be toggled by clicking the Filter icon.

Using a DataToolbarToggleGroup requires both a toggleIcon and breakpoint property. The toggleIcon is a ReactNode which is displayed instead of the children of DataToolbarToggleGroup once the viewport width shrinks below the passed in breakpoint.

Task

1) Locate the following "search-filter" DataToolbarItem and the "filter-group" DataToolbarGroup:

  <DataToolbarItem variant="search-filter">
    <Input value="" id="step2Input" ariaLabel="Step 2 input" />
  </DataToolbarItem>
  <DataToolbarGroup variant="filter-group">
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Status"
        selections={filters.status}
        options={statusOptions}
      />
    </DataToolbarItem>
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Risk"
        selections={filters.risk}
        options={riskOptions}
      />
    </DataToolbarItem>
  </DataToolbarGroup>

2) Wrap both the DataToolbarItem and the DataToolbarGroup in the same DataToolbarToggleGroup. Provide both the toggleIcon and breakpoint properties to the DataToolbarToggleGroup.

  <DataToolbarToggleGroup 
    toggleIcon={<FilterIcon />} 
    breakpoint="xl"
    >
    <DataToolbarItem variant="search-filter">
      <Input value="" id="step2Input" ariaLabel="Step 2 input" />
    </DataToolbarItem>
    <DataToolbarGroup variant="filter-group">
      <DataToolbarItem>
        <CheckboxSelect
          onSelect={this.onSelect}
          type="Status"
          selections={filters.status}
          options={statusOptions}
        />
      </DataToolbarItem>
      <DataToolbarItem>
        <CheckboxSelect
          onSelect={this.onSelect}
          type="Risk"
          selections={filters.risk}
          options={riskOptions}
        />
      </DataToolbarItem>
    </DataToolbarGroup>
  </DataToolbarToggleGroup>

Once done, shrinking and expanding the viewport should toggle between showing the toggle icon and the children of the DataToolbarToggleGroup. When the toggle icon is being displayed, clicking on it should toggle the DataToolbarToggleGroup children in responsive expandable content. This first image shows how the toolbar should appear at a wider viewport width. This second image shows how the toolbar should appear at a narrow viewport width.

One particular type of Data toolbar item is called the DataToolbarFilter. When used, selected filters are displayed in chip groups below the toolbar. You may consider placing any DataToolbarFilter inside of a toggle group to make your toolbar responsive.

Using a DataToolbarFilter requires three properties. First is a managed array of selected filters called chips as strings or ReactNodes. It also requires an onDelete callback function to be executed whenever the user deletes a selected filter chip. Lastly, it requires a categoryName which will be used to label the chip group.

Task

1) Define the required onDelete function to be passed to the DataToolbarFilters. Add it to the ToolbarDemoApp class.

  onDelete = (type = "", id = "") => {
    if (type) {
      this.setState((prevState) => {
        prevState.filters[type.toLowerCase()] = prevState.filters[type.toLowerCase()].filter(s => s !== id);
        return {
          filters: prevState.filters,
        }
      });
    } else {
      this.setState({
        filters: {
          name: [],
          risk: [],
          status: [],
        }
      })
    }
  };

2) Locate the following three DataToolbarItems inside the DataToolbarToggleGroup:

  <DataToolbarItem variant="search-filter">
    <Input value="" id="step2Input" ariaLabel="Step 2 input" />
  </DataToolbarItem>
  <DataToolbarGroup variant="filter-group">
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Status"
        selections={filters.status}
        options={statusOptions}
      />
    </DataToolbarItem>
    <DataToolbarItem>
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Risk"
        selections={filters.risk}
        options={riskOptions}
      />
    </DataToolbarItem>
  </DataToolbarGroup>

3) Replace each of the three DataToolbarItems inside the DataToolbarToggleGroup with a DataToolbarFilter. Pass the appropriate state managed filters array as the chips property, an appropriate label as the categoryName property, and the onDelete function as the deleteChip property.

  <DataToolbarFilter chips={filters.name} deleteChip={this.onDelete} categoryName="Name">
    <Input id="searchInput" search={this.onSearch} ariaLabel="Search input" />
  </DataToolbarFilter>
  <DataToolbarGroup variant="filter-group">
    <DataToolbarFilter chips={filters.status} deleteChip={this.onDelete} categoryName="Status">
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Status"
        selections={filters.status}
        options={statusOptions}
      />
    </DataToolbarFilter>
    <DataToolbarFilter chips={filters.risk} deleteChip={this.onDelete} categoryName="Risk">
      <CheckboxSelect
        onSelect={this.onSelect}
        type="Risk"
        selections={filters.risk}
        options={riskOptions}
      />
    </DataToolbarFilter>
  </DataToolbarGroup>

4) Two props can be optionally added to the top level DataToolbar component to improve user experience when using a DataToolbarFilter. First, if a clearAllFilters event handler is passed to DataToolbar, a 'Clear All Filters' action will appear alongside the applied filters chip groups. Second, if a collapseListedFiltersBreakpoint is passed to DataToolbar, the chip groups will collapse to a summary message at the passed in breakpoint, making the applied filters chip groups more responsive. Add the following code to the DataToolbar to see optional props in action.

  clearAllFilters={this.onDelete} collapseListedFiltersBreakpoint="xl"

Take some time to play with the toolbar to see how it responds to changes in viewport size and the number of filters applied.

At smaller viewport widths, you should see a responsive collapsed view of the toolbar and applied filters.

Managing the relationship of a toolbar with its filters to a table or other component is the responsibility of the consumer.

Task

1) Add the AppTable component below the DataToolbar and pass it the status and risk filters as props.

  <AppTable nameFilters={filters.name} statusFilters={filters.status} riskFilters={filters.risk} clearAllFilters={this.onDelete}/>

The AppTable component is defined in src/components/table.js and you can see how it uses the managed list of applied filters to manipulate a very small set of data. Once the preview reloads - it should look like this: