Add vertical scroll and text highlighting for functions

src-docs/src/components/guide_section/_guide_section.scss

@@ -7,3 +7,8 @@
 .guideSection__space {
   height: $euiSizeL;
 }
+
+.guideSection__tableCodeBlock {
+  padding-left: $euiSizeXS;
+  padding-right: $euiSizeXS;
+}

src-docs/src/components/guide_section/guide_section.js

@@ -54,7 +54,7 @@ export const markup = text => {
       }
       return token;
     });
-    return [...values, <br />];
+    return [...values, <br key="lineBreak" />];
   });
 };
 
@@ -305,6 +305,12 @@ export class GuideSection extends Component {
         type,
       } = props[propName];
 
+      const codeBlockProps = {
+        className: 'guideSection__tableCodeBlock',
+        paddingSize: 'none',
+        language: 'ts',
+      };
+
       let humanizedName = (
         <strong className="eui-textBreakNormal">{propName}</strong>
       );
@@ -320,28 +326,70 @@ export class GuideSection extends Component {
 
       const humanizedType = humanizeType(type);
 
+      const functionMatches = [
+        ...humanizedType.matchAll(/\([^=]*\) =>\s\w*\)*/g),
+      ];
+      const types = humanizedType.split(/\([^=]*\) =>\s\w*\)*/);
+
       const typeMarkup = (
         <span className="eui-textBreakNormal">{markup(humanizedType)}</span>
       );
       const descriptionMarkup = markup(propDescription);
       let defaultValueMarkup = '';
       if (defaultValue) {
         defaultValueMarkup = [
-          <EuiCode key={`defaultValue-${propName}`}>
-            <span className="eui-textBreakNormal">{defaultValue.value}</span>
-          </EuiCode>,
+          <EuiCodeBlock {...codeBlockProps} key={`defaultValue-${propName}`}>
+            {defaultValue.value}
+          </EuiCodeBlock>,
         ];
         if (defaultValue.comment) {
           defaultValueMarkup.push(`(${defaultValue.comment})`);
         }
       }
+
+      let defaultTypeCell = (
+        <EuiTableRowCell key="type" header="Type" textOnly={false}>
+          <EuiCodeBlock {...codeBlockProps}>{typeMarkup}</EuiCodeBlock>
+        </EuiTableRowCell>
+      );
+      if (functionMatches.length > 0) {
+        const elements = [];
+        let j = 0;
+        for (let i = 0; i < types.length; i++) {
+          if (functionMatches[j]) {
+            elements.push(
+              <Fragment key={`type-${i}`}>
+                {types[i]} <br />
+              </Fragment>
+            );
+            elements.push(
+              <Fragment key={`function-${i}`}>
+                {functionMatches[j][0]} <br />
+              </Fragment>
+            );
+            j++;
+          } else {
+            elements.push(
+              <Fragment key={`type-${i}`}>
+                {types[i]} <br />
+              </Fragment>
+            );
+          }
+        }
+        defaultTypeCell = (
+          <EuiTableRowCell key="type" header="Type" textOnly={false}>
+            <EuiCodeBlock whiteSpace="pre" {...codeBlockProps}>
+              {elements}
+            </EuiCodeBlock>
+          </EuiTableRowCell>
+        );
+      }
+
       const cells = [
         <EuiTableRowCell key="name" header="Prop">
           {humanizedName}
         </EuiTableRowCell>,
-        <EuiTableRowCell key="type" header="Type">
-          <EuiCode>{typeMarkup}</EuiCode>
-        </EuiTableRowCell>,
+        defaultTypeCell,
         <EuiTableRowCell
           key="defaultValue"
           header="Default"

src/components/code/_code_block.scss

@@ -1,4 +1,5 @@
 .euiCodeBlock {
+  max-width: 100%;
   display: block;
   position: relative;
   background: $euiCodeBlockBackgroundColor;