Revert "[Playground] EuiBadge, EuiNotificationBadge, EuiBetaBadge (el…

…astic#3722)"

This reverts commit d332ce1.

src-docs/src/routes.js

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

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

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { assertUnreachable, PropTypes } from 'react-view';
+import React from 'react';
+import { assertUnreachable, PropTypes, useValueDebounce } from 'react-view';
 import {
   EuiSpacer,
   EuiSwitch,
@@ -15,8 +15,6 @@ import {
   EuiTableHeaderCell,
   EuiTableRow,
   EuiTableRowCell,
-  EuiTextColor,
-  EuiFormRow,
 } from '../../../../src/components/';
 
 import {
@@ -46,26 +44,17 @@ const Label = ({ children, tooltip }) => {
 
 const Knob = ({
   name,
-  error: errorMsg,
+  error,
   type,
   defaultValue,
-  val,
-  set,
+  val: globalVal,
+  set: globalSet,
   options = {},
   description,
   placeholder,
   custom,
-  state,
 }) => {
-  const [error, setError] = useState(errorMsg);
-
-  useEffect(() => {
-    if (custom && custom.checkDep) {
-      setError(custom.checkDep(val, state));
-    }
-  }, [state, val, custom]);
-
-  let knobProps = {};
+  const [val, set] = useValueDebounce(globalVal, globalSet);
   switch (type) {
     case PropTypes.Ref:
       return (
@@ -103,45 +92,27 @@ 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}
           />
-        </EuiFormRow>
-      );
 
+          {error && <div>error {error}</div>}
+        </>
+      );
     case PropTypes.Boolean:
       return (
         <>
@@ -150,14 +121,13 @@ const Knob = ({
             label=""
             checked={val}
             onChange={e => {
-              set(e.target.checked);
+              globalSet(e.target.checked);
             }}
             compressed
           />
           {error && <div>error {error}</div>}
         </>
       );
-
     case PropTypes.Enum:
       const optionsKeys = Object.keys(options);
       const numberOfOptions = optionsKeys.length;
@@ -181,7 +151,7 @@ const Knob = ({
               onChange={id => {
                 let val = id;
                 if (val.includes('__')) val = val.split('__')[0];
-                set(val);
+                globalSet(val);
               }}
               name={`Select ${name}`}
             />
@@ -195,52 +165,28 @@ const Knob = ({
         }));
 
         return (
-          <EuiFormRow
-            isInvalid={error && error.length > 0}
-            error={error}
-            fullWidth>
+          <>
             <EuiSelect
               fullWidth
               id={name}
               options={flattenedOptions}
               value={valueKey}
               onChange={e => {
-                set(e.target.value);
+                globalSet(e.target.value);
               }}
-              isInvalid={error && error.length > 0}
               aria-label={`Select ${name}`}
               compressed
             />
-          </EuiFormRow>
+            {error && <div>error {error}</div>}
+          </>
         );
       }
 
-    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();
@@ -264,30 +210,13 @@ 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">
-              {humanizedName}
+              <strong className="eui-textBreakNormal">{name}</strong>
               {state[name].description && (
                 <>
                   <br />
@@ -328,9 +257,7 @@ const KnobColumn = ({ state, knobNames, error, set }) => {
                 set={value => set(value, name)}
                 enumName={state[name].enumName}
                 defaultValue={state[name].defaultValue}
-                custom={state[name] && state[name].custom}
-                state={state}
-                orgSet={set}
+                custom={state[name].custom}
               />
             </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, Placeholder } from 'react-view';
+import { useView, Compiler, Error, Placeholder } from 'react-view';
 import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components';
 import Knobs from './knobs';
 
@@ -61,9 +61,15 @@ export default ({ config, setGhostBackground }) => {
             placeholder={Placeholder}
           />
         </div>
+        <Error msg={params.errorProps.msg} isPopup />
         <EuiSpacer />
 
-        <EuiCodeBlock language="html" fontSize="m" paddingSize="m" isCopyable>
+        <EuiCodeBlock
+          language="html"
+          fontSize="m"
+          paddingSize="m"
+          overflowHeight={300}
+          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 => {
+const getProp = (prop, propName) => {
   const newProp = {};
   if (prop.description) newProp.description = prop.description;
   newProp.custom = { origin: prop };
@@ -23,8 +23,13 @@ const getProp = prop => {
       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;
@@ -35,24 +40,30 @@ const getProp = prop => {
 
     case 'number':
       newProp.type = PropTypes.Number;
-      if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value;
+      newProp.placeholder = propName;
+      if (prop.defaultValue) newProp.value = prop.defaultValue.value;
+      else newProp.value = 0;
       break;
 
     case 'string':
       newProp.type = PropTypes.String;
-      if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value;
+      newProp.placeholder = propName;
+      if (prop.defaultValue) newProp.value = prop.defaultValue.value;
+      else newProp.value = '';
       break;
 
     case 'func':
       newProp.type = PropTypes.Function;
+      newProp.placeholder = propName;
 
       break;
 
     case 'node':
     case 'element':
       newProp.type = PropTypes.ReactNode;
-      if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value;
-      newProp.value = undefined;
+      newProp.placeholder = propName;
+      if (prop.defaultValue) newProp.value = prop.defaultValue.value;
+      else newProp.value = undefined;
       break;
 
     default:
@@ -67,7 +78,7 @@ const propUtilityForPlayground = props => {
   const modifiedProps = {};
 
   for (const key in props) {
-    if (props[key].type) modifiedProps[key] = getProp(props[key]);
+    if (props[key].type) modifiedProps[key] = getProp(props[key], key);
   }
   return modifiedProps;
 };

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

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