## Feature Examples

### Size
- description: Adjust the component's size using the `size` prop. It supports 3 sizes: - Use `large` to emphasize the input field. - Use `medium` for all common cases (default). - Use `small` when the layout is dense and narrow.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <ColorInput placeholder="Large" size="large" />
  <ColorInput placeholder="Medium" size="medium" />
  <ColorInput placeholder="Small" size="small" />
</StorybookComponents.Stack>;
```

### Status
- description: Indicate the component's status using the `status` prop. It has three states: - Use the `error` state to indicate an invalid value (e.g., a HEX value that doesn't exist). - Use the `warning` state to highlight a value that can cause an unwanted result (e.g., text color is the same as the background color). - Use the `loading` state to show the value is currently being saved or validated.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <ColorInput value="#FF0000" status="error" />
  <ColorInput value="#FF0000" status="warning" />
  <ColorInput value="#FF0000" status="loading" />
</StorybookComponents.Stack>;
```

### Status message
- description: Add text that explains the status or what action the user should take with the `statusMessage` prop. Showing the status message inline, directly below the input is preferred in all default cases. - To add an accessible inline message, wrap the component in a `<FormField/>` and add the `statusMessage`. - To add a status message in a tooltip that requires users to hover on the icon, use the `statusMessage` prop. Control tooltip placement with `tooltipPlacement` prop. View more inline status message examples in `<FormField/>`.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <StorybookComponents.Stack flexDirection="column" gap="12px">
    <Text secondary>For all default cases:</Text>
    <FormField status="error" statusMessage="This is an error message.">
      <ColorInput placeholder="See message below" />
    </FormField>
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="12px">
    <Text secondary>For narrow layouts only:</Text>
    <ColorInput
      placeholder="Hover on status icon"
      status="error"
      statusMessage="This is an error message."
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Disabled
- description: Prevent the user from using the color input field with the `disabled` prop. Use it to indicate that the field is unavailable for editing (e.g., if the element already has a pre-defined color that can't be changed).
- example:
```jsx
() => {
  const [presets, setPresets] = React.useState([
    'midnightblue',
    'darkmagenta',
    'lightcoral',
  ]);
  return (
    <ColorInput
      value="#FF4136"
      disabled
      addTooltipContent="Add Color"
      onAddColor={(color) => setPresets([...presets, color])}
      colorPickerChildren={({ changeColor }) => (
        <Swatches colors={presets} onClick={changeColor} />
      )}
    />
  );
};
```

### Popover
- description: Adjust the placement and behavior of the color picker popover by using any of the properties in `popoverProps`. Check the [`<Popover/>`](#/component/popover) component API for a full list.
- example:
```jsx
<StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="6px">
    <Text size="small">Popover placement: Left</Text>
    <ColorInput
      value="#FF4136"
      popoverPlacement="left"
      popoverAppendTo="viewport"
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack flexDirection="column" gap="6px">
    <Text size="small">Animate: true</Text>
    <ColorInput
      value="#FF4136"
      popoverProps={{
        animate: true,
      }}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

### Add color presets
- description: Allow users to add new color presets inside the color picker by clicking an "Add color" button. Use a combination of the `colorPickerChildren` and the `onAddColor` properties to add this ability.
- example:
```jsx
() => {
  const [presets, setPresets] = React.useState([
    'midnightblue',
    'darkmagenta',
    'lightcoral',
  ]);
  return (
    <ColorInput
      value="#FF4136"
      addTooltipContent="Add Color"
      onAddColor={(color) => setPresets([...presets, color])}
      colorPickerChildren={({ changeColor }) => (
        <Swatches colors={presets} onClick={changeColor} />
      )}
    />
  );
};
```

## Common Use Case Examples

### Custom text color
- description: Use color input in a variety of composers to define custom colors for text, background fills, icons, etc.
- example:
```jsx
() => {
  const [color, setColor] = React.useState('#000000');
  const [alignment, setAlignment] = React.useState(0);
  const [text, setText] = React.useState('Luna Boutique');

  return (
    <SidePanel>
      <SidePanel.Header title="Customise text"></SidePanel.Header>
      <SidePanel.Content>
        <Box direction="vertical" gap="30px">
          <Text size="small" secondary>
            Change the font, color and more to make your text stand out.
          </Text>
          <FormField label="Edit text">
            <Input value={text} onChange={(e) => setText(e.target.value)} />
          </FormField>
          <FormField label="Font">
            <Box gap="6px">
              <Text weight="bold">Playfair Display - 700</Text>
              <Button size="tiny" priority="secondary">
                Change Font
              </Button>
            </Box>
          </FormField>
          <FormField label="Alignment">
            <Box gap="6px">
              <ToggleButton
                labelValue="Left"
                selected={alignment === 0}
                onClick={() => setAlignment(0)}
              >
                <Icons.TextAlignLeft />
              </ToggleButton>
              <ToggleButton
                labelValue="Center"
                selected={alignment === 1}
                onClick={() => setAlignment(1)}
              >
                <Icons.TextAlignCenter />
              </ToggleButton>
              <ToggleButton
                labelValue="Right"
                selected={alignment === 2}
                onClick={() => setAlignment(2)}
              >
                <Icons.TextAlignRight />
              </ToggleButton>
            </Box>
          </FormField>
          <FormField label="Text color">
            <ColorInput
              value={color}
              onChange={setColor}
              popoverAppendTo="viewport"
            />
          </FormField>
        </Box>
      </SidePanel.Content>
      <SidePanel.Footer>
        <Box align="right" gap="12px">
          <Button size="small" priority="secondary">
            Discard Changes
          </Button>
          <Button size="small">Save</Button>
        </Box>
      </SidePanel.Footer>
    </SidePanel>
  );
};
```