## Feature Examples


### With a status
- description: <p>Setting a status to indicate some there's an issue.</p>
- 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: <p>The editable list item can be used alongside any other list item, build by a dedicated builder</p>
- 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({ type: 'whitespace' }),
        ]}
      />
    </Box>
  );
};
```