From e1072f984d316951ab4bcdc2efe15ea4e86042aa Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <anish17122000@gmail.com>
Date: Wed, 26 Aug 2020 01:43:50 +0530
Subject: [PATCH] [Playground] EuiColorPicker (#3955)

* [Playground] EuiColorPicker

* fixed default value selection and error message issue
---
 src-docs/src/services/playground/props.js     |  5 +-
 .../color_picker/color_picker_example.js      |  3 +
 src-docs/src/views/color_picker/playground.js | 72 +++++++++++++++++++
 3 files changed, 76 insertions(+), 4 deletions(-)
 create mode 100644 src-docs/src/views/color_picker/playground.js

diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js
index 363344029ed..dad2f859be9 100644
--- a/src-docs/src/services/playground/props.js
+++ b/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 = {};
diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js
index b841e7739fe..dec75c6ad1c 100644
--- a/src-docs/src/views/color_picker/color_picker_example.js
+++ b/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,
 };
diff --git a/src-docs/src/views/color_picker/playground.js b/src-docs/src/views/color_picker/playground.js
new file mode 100644
index 00000000000..7c4c3b56cb8
--- /dev/null
+++ b/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];