label chooser component, with list and add

[joshdmiller]

Overview

Create a component that will draw out a list of provided tags, with the option to "take an action" by clicking one of them, and to edit.

Spec

Component Signature

type Props = {
  labels: Array<Label>,
  onAdd: ?( value: string ) => void,
  onSelect: ?( _id: string ) => void,
  onDelete: ?( _id: string ) => void,
  onChange: ?( _id: string, value: string ) => void,
};

type Label = {
  _id: string,
  value: string,
};

Render

It should render a material List component, with a ListItem for each label provided. The label value should be the primary text. The left icon should be a label/tag icon; the right/secondary action icon should be a pencil icon.

The last item in the list should be a static list item with the value "Add Label" and a left icon of a plus/add icon.

Lifecycle

For labels, the primary action should fire the onSelect callback. The secondary action should open a dialog with the ability to alter the label's value and delete the label. On value change, fire the onChange callback. On delete, the onDelete callback.

For the add link, the primary action should open a dialog with a space to enter a new label value. There is no secondary action.

UI

Inspired by Google Keep (see screenshots below), but using default mui styling.

This is for reference only. It does not match the above spec.

[joshdmiller]

@sethmerrick Would you like to revisit the design on this?