Addon-controls: Expose presetColors for the color control

addons/controls/README.md

@@ -326,7 +326,7 @@ Here is the full list of available controls:
 | | select | select dropdown input | options |
 | | multi-select | multi-select dropdown input | options |
 | **string** | text | simple text input | - |
-| | color | color picker input that assumes strings are color values | -  |
+| | color | color picker input that assumes strings are color values | presetColors |
 | | date | date picker input | - |
 
 Example customizing a control for an `enum` data type (defaults to `select` control type):
@@ -357,6 +357,20 @@ export default {
 };
 ```
 
+Example customizing a `color` data type:
+
+```js
+export default {
+ title: 'Button',
+ component: Button,
+ argTypes: {
+ backgroundColor: {
+ control: { type: 'color', presetColors: ['#FFF', '#000', '#AAA'] },
+ },
+ },
+};
+```
+
 ### Parameters
 
 Controls supports the following configuration parameters, either [globally or on a per-story basis](https://storybook.js.org/docs/basics/writing-stories/#parameters):

lib/components/src/controls/Color.stories.tsx

@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { ColorControl } from './Color';
 
+const presetColors = ['#FE4A49', '#FED766', '#009FB7', '#E6E6EA', '#F4F4F8'];
+
 export default {
  title: 'Controls/Color',
  component: ColorControl,
@@ -10,3 +12,15 @@ export const Basic = () => {
  const [value, setValue] = useState('#ff0');
  return <ColorControl name="Color" value={value} onChange={(name, newVal) => setValue(newVal)} />;
 };
+
+export const WithPresetColors = () => {
+ const [value, setValue] = useState('#ff0');
+ return (
+ <ColorControl
+ name="Color"
+ value={value}
+ onChange={(name, newVal) => setValue(newVal)}
+ presetColors={presetColors}
+ />
+ );
+};

lib/components/src/controls/Color.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, MouseEvent, KeyboardEvent } from 'react';
 import { SketchPicker, ColorResult } from 'react-color';
 
 import { styled } from '@storybook/theming';
@@ -30,7 +30,14 @@ const format = (color: ColorResult) =>
  `rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`;
 
 export type ColorProps = ControlProps<ColorValue> & ColorConfig;
-export const ColorControl: FC<ColorProps> = ({ name, value, onChange, onFocus, onBlur }) => {
+export const ColorControl: FC<ColorProps> = ({
+ name,
+ value,
+ onChange,
+ onFocus,
+ onBlur,
+ presetColors,
+}) => {
  const [showPicker, setShowPicker] = useState(false);
 
  return (
@@ -39,16 +46,28 @@ export const ColorControl: FC<ColorProps> = ({ name, value, onChange, onFocus, o
  type="button"
  name={name}
  onClick={() => setShowPicker(!showPicker)}
+ onKeyDown={(e: KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ setShowPicker(!showPicker);
+ }
+ }}
  size="flex"
  >
  {value ? value.toUpperCase() : 'Choose color'}
  <Swatch style={{ background: value }} />
  {showPicker ? (
- <Popover>
+ <Popover
+ onClick={(e: MouseEvent) => {
+ // @ts-ignore
+ if (e.target.tagName === 'INPUT') {
+ e.stopPropagation();
+ }
+ }}
+ >
  <SketchPicker
  color={value}
  onChange={(color: ColorResult) => onChange(name, format(color))}
- {...{ onFocus, onBlur }}
+ {...{ onFocus, onBlur, presetColors }}
  />
  </Popover>
  ) : null}

lib/components/src/controls/types.ts

@@ -20,7 +20,9 @@ export type BooleanValue = boolean;
 export interface BooleanConfig {}
 
 export type ColorValue = string;
-export interface ColorConfig {}
+export interface ColorConfig {
+ presetColors?: string[];
+}
 
 export type DateValue = Date | number;
 export interface DateConfig {}