## Feature Examples

### With a status
- description: Setting a status to indicate some there's an issue.
- example:
```jsx
() => {
  return (
    <Layout cols={1}>
      <ListItemEditable
        onApprove={() => {}}
        onCancel={() => {}}
        placeholder="Value"
        cancelButtonTooltipContent="Cancel"
        approveButtonTooltipContent="Approve"
        status="error"
        margins="none"
      />

      <ListItemEditable
        onApprove={() => {}}
        onCancel={() => {}}
        placeholder="Value"
        cancelButtonTooltipContent="Cancel"
        approveButtonTooltipContent="Approve"
        status="warning"
        margins="none"
      />

      <ListItemEditable
        onApprove={() => {}}
        onCancel={() => {}}
        placeholder="Value"
        cancelButtonTooltipContent="Cancel"
        approveButtonTooltipContent="Approve"
        status="loading"
        margins="none"
      />
    </Layout>
  );
};
```

### Part of a dropdown
- description: The editable list item can be used alongside any other list item, build by a dedicated builder
- example:
```jsx
() => {
  return (
    <Box height="230px">
      <DropdownLayout
        visible
        options={[
          listItemSelectBuilder({
            id: 0,
            title: 'Carmel Lloyd',
          }),
          listItemSelectBuilder({
            id: 1,
            title: 'Gracie-May Marsden',
          }),
          listItemSelectBuilder({
            id: 2,
            title: 'Keisha Decker',
          }),
          listItemSelectBuilder({
            id: 3,
            title: 'Ruairidh Fitzgerald',
          }),
          listItemEditableBuilder({
            id: 4,
            onApprove: (val) => console.log(val),
            onCancel: () => console.log('cancel'),
            cancelButtonTooltipContent: 'Cancel',
            approveButtonTooltipContent: 'Approve',
          }),
          listItemSectionBuilder({ id: 5, type: 'whitespace' }),
        ]}
      />
    </Box>
  );
};
```