[Playground] EuiForm family (#3939)

* [Playground] EuiFieldText, EuiFieldSearch, EuiFieldNumber, EuiFieldPassword, * removed unnecessary import * EuiTextArea, EuiCheckbox, EuiRadio * Update src-docs/src/views/form_controls/playground.js Co-authored-by: Greg Thompson <[email protected]> * Update src-docs/src/views/form_controls/playground.js Co-authored-by: Greg Thompson <[email protected]> * Updated type prop for EuiFieldPassword * type type * props for type are now correct [EuiFieldPassword] * Update src-docs/src/views/form_controls/playground.js Co-authored-by: Greg Thompson <[email protected]>
elastic · Aug 21, 2020 · b7c0ccf · b7c0ccf
1 parent c404e43
commit b7c0ccf
Show file tree

Hide file tree

Showing 4 changed files with 339 additions and 5 deletions.
diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
@@ -266,7 +266,7 @@ const KnobColumn = ({ state, knobNames, error, set }) => {
   return (
     <>
       {knobNames.map((name, idx) => {
-        let humanizedType = '';
+        let humanizedType;
 
         if (
           state[name].custom &&
@@ -275,8 +275,10 @@ const KnobColumn = ({ state, knobNames, error, set }) => {
         )
           humanizedType = humanizeType(state[name].custom.origin.type);
 
-        const typeMarkup = (
-          <span className="eui-textBreakNormal">{markup(humanizedType)}</span>
+        const typeMarkup = humanizedType && (
+          <EuiCode>
+            <span className="eui-textBreakNormal">{markup(humanizedType)}</span>
+          </EuiCode>
         );
 
         let humanizedName = (
@@ -330,7 +332,7 @@ const KnobColumn = ({ state, knobNames, error, set }) => {
               key={`type__${name}-${idx}`}
               header="Type"
               className="playgroundKnobs__rowCell">
-              <EuiCode>{typeMarkup}</EuiCode>
+              {typeMarkup}
             </EuiTableRowCell>
             <EuiTableRowCell
               key={`default__${name}-${idx}`}

diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
@@ -30,6 +30,8 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import playgrounds from './playground';
+
 import FieldSearch from './field_search';
 const fieldSearchSource = require('!!raw-loader!./field_search');
 const fieldSearchHtml = renderToHtml(FieldSearch);
@@ -632,4 +634,5 @@ export const FormControlsExample = {
       demo: <FormControlLayoutRange />,
     },
   ],
+  playground: playgrounds,
 };
diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js
@@ -0,0 +1,329 @@
+import {
+  propUtilityForPlayground,
+  dummyFunction,
+  simulateFunction,
+  iconValidator,
+} from '../../services/playground';
+import {
+  EuiFieldText,
+  EuiFieldSearch,
+  EuiFieldNumber,
+  EuiFieldPassword,
+  EuiTextArea,
+  EuiCheckbox,
+  EuiRadio,
+} from '../../../../src/components/';
+import { PropTypes } from 'react-view';
+
+const fieldTextConfig = () => {
+  const docgenInfo = Array.isArray(EuiFieldText.__docgenInfo)
+    ? EuiFieldText.__docgenInfo[0]
+    : EuiFieldText.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.append = {
+    ...propsToUse.append,
+    type: PropTypes.String,
+  };
+  propsToUse.prepend = {
+    ...propsToUse.prepend,
+    type: PropTypes.String,
+  };
+
+  propsToUse.value = {
+    ...propsToUse.value,
+    stateful: false,
+    type: PropTypes.String,
+    value: '',
+  };
+
+  propsToUse.onChange = simulateFunction(propsToUse.onChange);
+  propsToUse.icon = iconValidator(propsToUse.icon);
+
+  return {
+    config: {
+      componentName: 'EuiFieldText',
+      props: propsToUse,
+      scope: {
+        EuiFieldText,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiFieldText'],
+        },
+      },
+      customProps: {
+        onChange: dummyFunction,
+      },
+    },
+  };
+};
+
+export const fieldSearchConfig = () => {
+  const docgenInfo = Array.isArray(EuiFieldSearch.__docgenInfo)
+    ? EuiFieldSearch.__docgenInfo[0]
+    : EuiFieldSearch.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.append = {
+    ...propsToUse.append,
+    type: PropTypes.String,
+  };
+  propsToUse.prepend = {
+    ...propsToUse.prepend,
+    type: PropTypes.String,
+  };
+
+  propsToUse.value = {
+    ...propsToUse.value,
+    stateful: false,
+    type: PropTypes.String,
+    value: '',
+  };
+
+  propsToUse.onSearch = simulateFunction(propsToUse.onSearch);
+  propsToUse.onChange = simulateFunction(propsToUse.onChange);
+
+  return {
+    config: {
+      componentName: 'EuiFieldSearch',
+      props: propsToUse,
+      scope: {
+        EuiFieldSearch,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiFieldSearch'],
+        },
+      },
+      customProps: {
+        onChange: dummyFunction,
+      },
+    },
+  };
+};
+
+export const fieldNumberConfig = () => {
+  const docgenInfo = Array.isArray(EuiFieldNumber.__docgenInfo)
+    ? EuiFieldNumber.__docgenInfo[0]
+    : EuiFieldNumber.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.append = {
+    ...propsToUse.append,
+    type: PropTypes.String,
+  };
+  propsToUse.prepend = {
+    ...propsToUse.prepend,
+    type: PropTypes.String,
+  };
+
+  propsToUse.icon = iconValidator(propsToUse.icon);
+  propsToUse.onChange = simulateFunction(propsToUse.onChange);
+
+  propsToUse.value = {
+    ...propsToUse.value,
+    stateful: false,
+    type: PropTypes.Number,
+  };
+  propsToUse.step = {
+    ...propsToUse.step,
+    type: PropTypes.Number,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiFieldNumber',
+      props: propsToUse,
+      scope: {
+        EuiFieldNumber,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiFieldNumber'],
+        },
+      },
+      customProps: {
+        onChange: dummyFunction,
+      },
+    },
+  };
+};
+
+export const fieldPasswordConfig = () => {
+  const docgenInfo = Array.isArray(EuiFieldPassword.__docgenInfo)
+    ? EuiFieldPassword.__docgenInfo[0]
+    : EuiFieldPassword.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.append = {
+    ...propsToUse.append,
+    type: PropTypes.String,
+  };
+  propsToUse.prepend = {
+    ...propsToUse.prepend,
+    type: PropTypes.String,
+  };
+
+  propsToUse.value = {
+    ...propsToUse.value,
+    stateful: false,
+    type: PropTypes.String,
+    value: '',
+  };
+
+  propsToUse.type = {
+    ...propsToUse.type,
+    value: 'password',
+    defaultValue: 'password',
+  };
+
+  propsToUse.onChange = simulateFunction(propsToUse.onChange);
+
+  return {
+    config: {
+      componentName: 'EuiFieldPassword',
+      props: propsToUse,
+      scope: {
+        EuiFieldPassword,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiFieldPassword'],
+        },
+      },
+      customProps: {
+        onChange: dummyFunction,
+      },
+    },
+  };
+};
+
+export const textAreaConfig = () => {
+  const docgenInfo = Array.isArray(EuiTextArea.__docgenInfo)
+    ? EuiTextArea.__docgenInfo[0]
+    : EuiTextArea.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.value = {
+    ...propsToUse.value,
+    stateful: false,
+    type: PropTypes.String,
+    value: '',
+  };
+  propsToUse.placeholder = {
+    ...propsToUse.placeholder,
+    type: PropTypes.String,
+  };
+
+  propsToUse.resize = {
+    ...propsToUse.resize,
+    defaultValue: 'vertical',
+  };
+
+  propsToUse.onChange = simulateFunction(propsToUse.onChange);
+
+  return {
+    config: {
+      componentName: 'EuiTextArea',
+      props: propsToUse,
+      scope: {
+        EuiTextArea,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiTextArea'],
+        },
+      },
+      customProps: {
+        onChange: dummyFunction,
+      },
+    },
+  };
+};
+
+export const checkboxConfig = () => {
+  const docgenInfo = Array.isArray(EuiCheckbox.__docgenInfo)
+    ? EuiCheckbox.__docgenInfo[0]
+    : EuiCheckbox.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.id = {
+    ...propsToUse.id,
+    value: 'Playground__checkbox',
+  };
+  propsToUse.label = {
+    ...propsToUse.label,
+    type: PropTypes.String,
+    value: 'Label',
+  };
+
+  propsToUse.onChange = simulateFunction(propsToUse.onChange);
+
+  return {
+    config: {
+      componentName: 'EuiCheckbox',
+      props: propsToUse,
+      scope: {
+        EuiCheckbox,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiCheckbox'],
+        },
+      },
+      customProps: {
+        onChange: dummyFunction,
+      },
+    },
+  };
+};
+
+export const radioConfig = () => {
+  const docgenInfo = Array.isArray(EuiRadio.__docgenInfo)
+    ? EuiRadio.__docgenInfo[0]
+    : EuiRadio.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.id = {
+    ...propsToUse.id,
+    type: PropTypes.String,
+    value: 'Playground__radio',
+  };
+
+  propsToUse.label = {
+    ...propsToUse.label,
+    type: PropTypes.String,
+    value: 'Label',
+  };
+
+  propsToUse.onChange = simulateFunction(propsToUse.onChange);
+
+  return {
+    config: {
+      componentName: 'EuiRadio',
+      props: propsToUse,
+      scope: {
+        EuiRadio,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiRadio'],
+        },
+      },
+      customProps: {
+        onChange: dummyFunction,
+      },
+    },
+  };
+};
+
+export default [
+  fieldTextConfig,
+  fieldSearchConfig,
+  fieldNumberConfig,
+  fieldPasswordConfig,
+  textAreaConfig,
+  checkboxConfig,
+  radioConfig,
+];
diff --git a/src/components/form/field_password/field_password.tsx b/src/components/form/field_password/field_password.tsx
@@ -38,7 +38,7 @@ import { useCombinedRefs } from '../../../services';
 
 export type EuiFieldPasswordProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
-  'value'
+  'type' | 'value'
 > &
   CommonProps & {
     isInvalid?: boolean;