[Playground] EuiFlexGroup, EuiFlexItem (#3892)

* [Playground] EuiFlexGroup,EuiFlexItem

* used guideDemo__highlightGrid

* background fix

src-docs/src/views/flex/flex_example.js

@@ -16,6 +16,8 @@ import {
   EuiLink,
 } from '../../../../src/components';
 
+import { flexGroupConfig, flexGridConfig } from './playground';
+
 import FlexGroup from './flex_group';
 const flexGroupSource = require('!!raw-loader!./flex_group');
 const flexGroupHtml = renderToHtml(FlexGroup);
@@ -624,4 +626,5 @@ export const FlexExample = {
       ),
     },
   ],
+  playground: [flexGroupConfig, flexGridConfig],
 };

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

@@ -0,0 +1,89 @@
+import { PropTypes } from 'react-view';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlexGrid,
+} from '../../../../src/components/';
+import { propUtilityForPlayground } from '../../services/playground';
+
+export const flexGroupConfig = () => {
+  const docgenInfo = Array.isArray(EuiFlexGroup.__docgenInfo)
+    ? EuiFlexGroup.__docgenInfo[0]
+    : EuiFlexGroup.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.children = {
+    type: PropTypes.ReactNode,
+    value: `<EuiFlexItem>Content grid item</EuiFlexItem>
+    <EuiFlexItem style={{ minWidth: 100 }}>Min-width 300px</EuiFlexItem>
+    <EuiFlexItem component="span">
+    This is a span component
+  </EuiFlexItem>
+    <EuiFlexItem>
+      <p>Another content grid item</p>
+      <p>
+        Note how both of these are the same width and height despite having
+        different content?
+      </p>
+    </EuiFlexItem>`,
+    hidden: false,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiFlexGroup',
+      props: propsToUse,
+      scope: {
+        EuiFlexGroup,
+        EuiFlexItem,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiFlexGroup', 'EuiFlexItem'],
+        },
+      },
+    },
+    playgroundClassName: 'guideDemo__highlightGrid',
+  };
+};
+
+export const flexGridConfig = () => {
+  const docgenInfo = Array.isArray(EuiFlexGrid.__docgenInfo)
+    ? EuiFlexGrid.__docgenInfo[0]
+    : EuiFlexGrid.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.children = {
+    type: PropTypes.ReactNode,
+    value: `<EuiFlexItem>Content grid item</EuiFlexItem>
+      <EuiFlexItem style={{ minWidth: 100 }}>Min-width 300px</EuiFlexItem>
+      <EuiFlexItem component="span">
+      This is a span component
+    </EuiFlexItem>
+      <EuiFlexItem>
+        <p>Another content grid item</p>
+        <p>
+          Note how both of these are the same width and height despite having
+          different content?
+        </p>
+      </EuiFlexItem>`,
+    hidden: false,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiFlexGrid',
+      props: propsToUse,
+      scope: {
+        EuiFlexGrid,
+        EuiFlexItem,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiFlexGrid', 'EuiFlexItem'],
+        },
+      },
+    },
+    playgroundClassName: 'guideDemo__highlightGrid',
+  };
+};