[Playground] EuiColorPicker (#3955)

* [Playground] EuiColorPicker

* fixed default value selection and error message issue

src-docs/src/services/playground/props.js

@@ -22,10 +22,7 @@ const getProp = prop => {
       newProp.type = PropTypes.Enum;
       newProp.required = prop.required;
       if (prop.defaultValue) {
-        newProp.defaultValue = prop.defaultValue.value.substring(
-          1,
-          prop.defaultValue.value.length - 1
-        );
+        newProp.defaultValue = prop.defaultValue.value;
       }
       newProp.value = undefined;
       newProp.options = {};

src-docs/src/views/color_picker/color_picker_example.js

@@ -18,6 +18,8 @@ import {
   EuiColorPalettePickerPaletteGradientProps,
 } from '!!prop-loader!../../../../src/components/color_picker/color_palette_picker/color_palette_picker';
 
+import playgrounds from './playground';
+
 import ColorPicker from './color_picker';
 const colorPickerSource = require('!!raw-loader!./color_picker');
 const colorPickerHtml = renderToHtml(ColorPicker);
@@ -648,4 +650,5 @@ export const ColorPickerExample = {
       demo: <KitchenSink />,
     },
   ],
+  playground: playgrounds,
 };

src-docs/src/views/color_picker/playground.js

@@ -0,0 +1,72 @@
+import {
+  propUtilityForPlayground,
+  dummyFunction,
+  simulateFunction,
+  createOptionalEnum,
+} from '../../services/playground';
+import { EuiColorPicker } from '../../../../src/components/';
+import { PropTypes } from 'react-view';
+
+const colorPickerConfig = () => {
+  const docgenInfo = Array.isArray(EuiColorPicker.__docgenInfo)
+    ? EuiColorPicker.__docgenInfo[0]
+    : EuiColorPicker.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.append = {
+    ...propsToUse.append,
+    type: PropTypes.String,
+  };
+  propsToUse.prepend = {
+    ...propsToUse.prepend,
+    type: PropTypes.String,
+  };
+
+  propsToUse.color = {
+    ...propsToUse.color,
+    stateful: false,
+    type: PropTypes.String,
+    value: '#D36086',
+  };
+
+  propsToUse.secondaryInputDisplay = {
+    ...propsToUse.secondaryInputDisplay,
+    custom: {
+      ...propsToUse.secondaryInputDisplay.custom,
+      checkDep: (val, state) => {
+        if (state.mode.value === 'secondaryInput' && !val) {
+          return 'When mode is set to secondaryInput, you must also provide secondaryInputDisplay';
+        }
+        return undefined;
+      },
+    },
+  };
+
+  propsToUse.format = createOptionalEnum(propsToUse.format);
+
+  propsToUse.onChange = simulateFunction(propsToUse.onChange);
+  propsToUse.onBlur = simulateFunction(propsToUse.onBlur);
+  propsToUse.onFocus = simulateFunction(propsToUse.onFocus);
+
+  return {
+    config: {
+      componentName: 'EuiColorPicker',
+      props: propsToUse,
+      scope: {
+        EuiColorPicker,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiColorPicker'],
+        },
+      },
+      customProps: {
+        onChange: dummyFunction,
+        onBlur: dummyFunction,
+        onFocus: dummyFunction,
+      },
+    },
+  };
+};
+
+export default [colorPickerConfig];