[Playground] EuiBadge, EuiNotificationBadge, EuiBetaBadge (#3722)

* created playground for badges

* removed commented code

* used validator for iconType and colour

* updated variable name

* removed colour validation

* removed unnecessary imports

* removed default values, fullscreen mode

* suggesstions

* removed placeholder, added required, some badge props set to string

* used actual value of child in text field

* added sanitize function

* fixed unique-key warning

* added validation

* updated to identify the change whenthe state changes

* suggestions

* added onCLick function snippet

* removed error popup by react-view

* removed lint err

* removed commented code

src-docs/src/routes.js

@@ -1,4 +1,4 @@
-import React, { createElement } from 'react';
+import React, { createElement, Fragment } from 'react';
 
 import { GuidePage, GuideSection } from './components';
 
@@ -263,7 +263,11 @@ const createExample = (example, customTitle) => {
 
   let playgroundComponent;
   if (playground) {
-    playgroundComponent = playgroundCreator(playground());
+    if (Array.isArray(playground)) {
+      playgroundComponent = playground.map((elm, idx) => {
+        return <Fragment key={idx}>{playgroundCreator(elm())}</Fragment>;
+      });
+    } else playgroundComponent = playgroundCreator(playground());
   }
 
   const component = () => (

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { assertUnreachable, PropTypes, useValueDebounce } from 'react-view';
+import React, { useState, useEffect } from 'react';
+import { assertUnreachable, PropTypes } from 'react-view';
 import {
   EuiSpacer,
   EuiSwitch,
@@ -15,6 +15,8 @@ import {
   EuiTableHeaderCell,
   EuiTableRow,
   EuiTableRowCell,
+  EuiTextColor,
+  EuiFormRow,
 } from '../../../../src/components/';
 
 import {
@@ -44,17 +46,26 @@ const Label = ({ children, tooltip }) => {
 
 const Knob = ({
   name,
-  error,
+  error: errorMsg,
   type,
   defaultValue,
-  val: globalVal,
-  set: globalSet,
+  val,
+  set,
   options = {},
   description,
   placeholder,
   custom,
+  state,
 }) => {
-  const [val, set] = useValueDebounce(globalVal, globalSet);
+  const [error, setError] = useState(errorMsg);
+
+  useEffect(() => {
+    if (custom && custom.checkDep) {
+      setError(custom.checkDep(val, state));
+    }
+  }, [state, val, custom]);
+
+  let knobProps = {};
   switch (type) {
     case PropTypes.Ref:
       return (
@@ -92,27 +103,45 @@ const Knob = ({
 
     case PropTypes.String:
     case PropTypes.Date:
+      if (custom && custom.validator) {
+        knobProps = {};
+        knobProps.onChange = e => {
+          const value = e.target.value;
+          if (custom.validator(value)) set(value);
+          else set(undefined);
+        };
+      } else if (custom && custom.sanitize) {
+        knobProps = {};
+        knobProps.value = val;
+        knobProps.onChange = e => {
+          const value = e.target.value;
+          set(custom.sanitize(value));
+        };
+      } else {
+        knobProps = {};
+        knobProps.value = val;
+        knobProps.onChange = e => {
+          const value = e.target.value;
+          set(value);
+        };
+      }
+
       return (
-        <>
+        <EuiFormRow
+          isInvalid={error && error.length > 0}
+          error={error}
+          fullWidth>
           <EuiFieldText
             placeholder={placeholder}
-            onChange={e => {
-              const value = e.target.value;
-              if (custom && custom.validator) {
-                if (custom.validator(value)) set(value);
-                else set(undefined);
-              } else {
-                set(value);
-              }
-            }}
             aria-label={description}
+            isInvalid={error && error.length > 0}
             compressed
             fullWidth
+            {...knobProps}
           />
-
-          {error && <div>error {error}</div>}
-        </>
+        </EuiFormRow>
       );
+
     case PropTypes.Boolean:
       return (
         <>
@@ -121,13 +150,14 @@ const Knob = ({
             label=""
             checked={val}
             onChange={e => {
-              globalSet(e.target.checked);
+              set(e.target.checked);
             }}
             compressed
           />
           {error && <div>error {error}</div>}
         </>
       );
+
     case PropTypes.Enum:
       const optionsKeys = Object.keys(options);
       const numberOfOptions = optionsKeys.length;
@@ -151,7 +181,7 @@ const Knob = ({
               onChange={id => {
                 let val = id;
                 if (val.includes('__')) val = val.split('__')[0];
-                globalSet(val);
+                set(val);
               }}
               name={`Select ${name}`}
             />
@@ -165,28 +195,52 @@ const Knob = ({
         }));
 
         return (
-          <>
+          <EuiFormRow
+            isInvalid={error && error.length > 0}
+            error={error}
+            fullWidth>
             <EuiSelect
               fullWidth
               id={name}
               options={flattenedOptions}
               value={valueKey}
               onChange={e => {
-                globalSet(e.target.value);
+                set(e.target.value);
               }}
+              isInvalid={error && error.length > 0}
               aria-label={`Select ${name}`}
               compressed
             />
-            {error && <div>error {error}</div>}
-          </>
+          </EuiFormRow>
         );
       }
 
+    case PropTypes.Custom:
+      if (custom && custom.use) {
+        switch (custom.use) {
+          case 'switch':
+            return (
+              <>
+                <EuiSwitch
+                  id={name}
+                  label={custom.label || ''}
+                  checked={typeof val !== 'undefined' && val}
+                  onChange={e => {
+                    const value = e.target.checked;
+
+                    set(value ? value : undefined);
+                  }}
+                  compressed
+                />
+              </>
+            );
+        }
+      }
+
     case PropTypes.ReactNode:
     case PropTypes.Function:
     case PropTypes.Array:
     case PropTypes.Object:
-    case PropTypes.Custom:
       return null;
     default:
       return assertUnreachable();
@@ -210,13 +264,30 @@ const KnobColumn = ({ state, knobNames, error, set }) => {
           <span className="eui-textBreakNormal">{markup(humanizedType)}</span>
         );
 
+        let humanizedName = (
+          <strong className="eui-textBreakNormal">{name}</strong>
+        );
+
+        if (
+          state[name].custom &&
+          state[name].custom.origin &&
+          state[name].custom.origin.required
+        ) {
+          humanizedName = (
+            <span>
+              {humanizedName}{' '}
+              <EuiTextColor color="danger">(required)</EuiTextColor>
+            </span>
+          );
+        }
+
         return (
           <EuiTableRow key={name}>
             <EuiTableRowCell
               key={`prop__${name}-${idx}`}
               header="Prop"
               className="playgroundKnobs__rowCell">
-              <strong className="eui-textBreakNormal">{name}</strong>
+              {humanizedName}
               {state[name].description && (
                 <>
                   <br />
@@ -257,7 +328,9 @@ const KnobColumn = ({ state, knobNames, error, set }) => {
                 set={value => set(value, name)}
                 enumName={state[name].enumName}
                 defaultValue={state[name].defaultValue}
-                custom={state[name].custom}
+                custom={state[name] && state[name].custom}
+                state={state}
+                orgSet={set}
               />
             </EuiTableRowCell>
           </EuiTableRow>

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

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import format from 'html-format';
 
-import { useView, Compiler, Error, Placeholder } from 'react-view';
+import { useView, Compiler, Placeholder } from 'react-view';
 import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components';
 import Knobs from './knobs';
 
@@ -61,15 +61,9 @@ export default ({ config, setGhostBackground }) => {
             placeholder={Placeholder}
           />
         </div>
-        <Error msg={params.errorProps.msg} isPopup />
         <EuiSpacer />
 
-        <EuiCodeBlock
-          language="html"
-          fontSize="m"
-          paddingSize="m"
-          overflowHeight={300}
-          isCopyable>
+        <EuiCodeBlock language="html" fontSize="m" paddingSize="m" isCopyable>
           {getSnippet(params.editorProps.code)}
         </EuiCodeBlock>
         <EuiSpacer />

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

@@ -1,7 +1,7 @@
 /* eslint-disable guard-for-in */
 import { PropTypes } from 'react-view';
 
-const getProp = (prop, propName) => {
+const getProp = prop => {
   const newProp = {};
   if (prop.description) newProp.description = prop.description;
   newProp.custom = { origin: prop };
@@ -23,13 +23,8 @@ const getProp = (prop, propName) => {
       newProp.required = prop.required;
       if (prop.defaultValue) {
         newProp.defaultValue = prop.defaultValue.value;
-        newProp.value = prop.defaultValue.value.substring(
-          1,
-          prop.defaultValue.value.length - 1
-        );
-      } else {
-        newProp.value = undefined;
       }
+      newProp.value = undefined;
       newProp.options = {};
       for (const i in prop.type.value) {
         const val = prop.type.value[i].value;
@@ -40,30 +35,24 @@ const getProp = (prop, propName) => {
 
     case 'number':
       newProp.type = PropTypes.Number;
-      newProp.placeholder = propName;
-      if (prop.defaultValue) newProp.value = prop.defaultValue.value;
-      else newProp.value = 0;
+      if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value;
       break;
 
     case 'string':
       newProp.type = PropTypes.String;
-      newProp.placeholder = propName;
-      if (prop.defaultValue) newProp.value = prop.defaultValue.value;
-      else newProp.value = '';
+      if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value;
       break;
 
     case 'func':
       newProp.type = PropTypes.Function;
-      newProp.placeholder = propName;
 
       break;
 
     case 'node':
     case 'element':
       newProp.type = PropTypes.ReactNode;
-      newProp.placeholder = propName;
-      if (prop.defaultValue) newProp.value = prop.defaultValue.value;
-      else newProp.value = undefined;
+      if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value;
+      newProp.value = undefined;
       break;
 
     default:
@@ -78,7 +67,7 @@ const propUtilityForPlayground = props => {
   const modifiedProps = {};
 
   for (const key in props) {
-    if (props[key].type) modifiedProps[key] = getProp(props[key], key);
+    if (props[key].type) modifiedProps[key] = getProp(props[key]);
   }
   return modifiedProps;
 };

src-docs/src/views/badge/badge_example.js

@@ -14,6 +14,11 @@ import {
   EuiBadgeGroup,
   EuiCallOut,
 } from '../../../../src/components';
+import {
+  badgeConfig,
+  betaBadgeConfig,
+  notificationBadgeConfig,
+} from './playground';
 
 import Badge from './badge';
 
@@ -317,4 +322,5 @@ export const BadgeExample = {
       demo: <NotificationBadge />,
     },
   ],
+  playground: [badgeConfig, betaBadgeConfig, notificationBadgeConfig],
 };