@procore/labs-contextual-toolbar v1.0.0

Contextual Toolbar Introduction

A dismissible toolbar that can display a message and action icons.

Installation

yarn add @procore/labs-contextual-toolbar

Dependencies

@procore/core-react and react are listed as external peer dependencies. The package will not bundle the code, and requires the app client to provide it as a dependency. The external peer dep is to assure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.

Usage

import { ContextualToolbar } from '@procore/labs-contextual-toolbar';

<ContextualToolbar
  actions={[
    {
      icon: 'tool-documents',
      onClick: () => console.log('Move'),
      tooltipLabel: 'Move',
    },
    {
      icon: 'trash',
      onClick: () => console.log('Delete'),
      tooltipLabel: 'Delete',
    },
  ]}
  closeTooltipLabel="close toolbar"
  message="Display information here about the content or items to be acted upon by the toolbar."
  onClose={console.log(`Close the toolbar!`)}
/>