From 872509a196d286d8bcf4ab041b2de64090d6b723 Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty <ashik9591@gmail.com>
Date: Fri, 14 Aug 2020 21:55:42 +0530
Subject: [PATCH 1/5] Add vertical scroll and text highlighting for functions

---
 .../guide_section/_guide_section.scss         |  4 ++
 .../components/guide_section/guide_section.js | 54 +++++++++++++++++--
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/components/guide_section/_guide_section.scss b/src-docs/src/components/guide_section/_guide_section.scss
index b408a51918e..03026d459ca 100644
--- a/src-docs/src/components/guide_section/_guide_section.scss
+++ b/src-docs/src/components/guide_section/_guide_section.scss
@@ -7,3 +7,7 @@
 .guideSection__space {
   height: $euiSizeL;
 }
+
+.guideSection__table-row {
+  overflow: auto;
+}
diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
index dfe86d289e1..ea942b7caf3 100644
--- a/src-docs/src/components/guide_section/guide_section.js
+++ b/src-docs/src/components/guide_section/guide_section.js
@@ -19,6 +19,7 @@ import {
   EuiTitle,
   EuiLink,
   EuiButtonEmpty,
+  EuiMarkdownFormat,
 } from '../../../../src/components';
 
 import { CodeSandboxLink } from '../codesandbox';
@@ -320,6 +321,11 @@ 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>
       );
@@ -335,13 +341,55 @@ export class GuideSection extends Component {
           defaultValueMarkup.push(`(${defaultValue.comment})`);
         }
       }
+
+      let defaultTypeCell = (
+        <EuiTableRowCell
+          className="guideSection__table-row"
+          key="type"
+          header="Type">
+          <EuiCode>{typeMarkup}</EuiCode>
+        </EuiTableRowCell>
+      );
+      if (functionMatches.length > 0) {
+        const elements = [];
+        let j = 0;
+        for (let i = 0; i < types.length; i++) {
+          if (functionMatches[j]) {
+            elements.push(
+              <EuiCode>
+                <span className="eui-textBreakNormal">{types[i]}</span>
+              </EuiCode>
+            );
+            elements.push(
+              <EuiMarkdownFormat>
+                {`\`\`\` ts
+                ${functionMatches[j][0]} `}
+              </EuiMarkdownFormat>
+            );
+            j++;
+          } else {
+            elements.push(
+              <EuiCode>
+                <span className="eui-textBreakNormal">{types[i]}</span>
+              </EuiCode>
+            );
+          }
+        }
+        defaultTypeCell = (
+          <EuiTableRowCell
+            className="guideSection__table-row"
+            key="type"
+            header="Type">
+            {elements}
+          </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"

From f47b0259991b1c21ae2c1ee722dedde211d8bdfd Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty <ashik9591@gmail.com>
Date: Sat, 15 Aug 2020 15:20:17 +0530
Subject: [PATCH 2/5] use code block instead of markdown

---
 src-docs/src/components/guide_section/guide_section.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
index ea942b7caf3..a0415d20270 100644
--- a/src-docs/src/components/guide_section/guide_section.js
+++ b/src-docs/src/components/guide_section/guide_section.js
@@ -19,7 +19,6 @@ import {
   EuiTitle,
   EuiLink,
   EuiButtonEmpty,
-  EuiMarkdownFormat,
 } from '../../../../src/components';
 
 import { CodeSandboxLink } from '../codesandbox';
@@ -361,10 +360,7 @@ export class GuideSection extends Component {
               </EuiCode>
             );
             elements.push(
-              <EuiMarkdownFormat>
-                {`\`\`\` ts
-                ${functionMatches[j][0]} `}
-              </EuiMarkdownFormat>
+              <EuiCode language="ts">{functionMatches[j][0]}</EuiCode>
             );
             j++;
           } else {

From a657af970a4c7c9e19e4c17bcc72589ee64ce85f Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 19 Aug 2020 14:36:41 -0400
Subject: [PATCH 3/5] Swap usages of code for code block and fix overflow

---
 .../guide_section/_guide_section.scss         |  5 ++-
 .../components/guide_section/guide_section.js | 38 +++++++++----------
 src/components/code/_code_block.scss          |  1 +
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src-docs/src/components/guide_section/_guide_section.scss b/src-docs/src/components/guide_section/_guide_section.scss
index 03026d459ca..8784d0bc8d5 100644
--- a/src-docs/src/components/guide_section/_guide_section.scss
+++ b/src-docs/src/components/guide_section/_guide_section.scss
@@ -8,6 +8,7 @@
   height: $euiSizeL;
 }
 
-.guideSection__table-row {
-  overflow: auto;
+.guideSection__tableCodeBlock {
+  padding-left: $euiSizeXS;
+  padding-right: $euiSizeXS;
 }
diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
index a0415d20270..0176fb9ce4c 100644
--- a/src-docs/src/components/guide_section/guide_section.js
+++ b/src-docs/src/components/guide_section/guide_section.js
@@ -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>
       );
@@ -332,9 +338,9 @@ export class GuideSection extends Component {
       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})`);
@@ -342,11 +348,8 @@ export class GuideSection extends Component {
       }
 
       let defaultTypeCell = (
-        <EuiTableRowCell
-          className="guideSection__table-row"
-          key="type"
-          header="Type">
-          <EuiCode>{typeMarkup}</EuiCode>
+        <EuiTableRowCell key="type" header="Type" textOnly={false}>
+          <EuiCodeBlock {...codeBlockProps}>{typeMarkup}</EuiCodeBlock>
         </EuiTableRowCell>
       );
       if (functionMatches.length > 0) {
@@ -355,28 +358,23 @@ export class GuideSection extends Component {
         for (let i = 0; i < types.length; i++) {
           if (functionMatches[j]) {
             elements.push(
-              <EuiCode>
-                <span className="eui-textBreakNormal">{types[i]}</span>
-              </EuiCode>
+              <EuiCodeBlock {...codeBlockProps}>{types[i]}</EuiCodeBlock>
             );
             elements.push(
-              <EuiCode language="ts">{functionMatches[j][0]}</EuiCode>
+              <EuiCodeBlock {...codeBlockProps}>
+                {functionMatches[j][0]}
+              </EuiCodeBlock>
             );
             j++;
           } else {
             elements.push(
-              <EuiCode>
-                <span className="eui-textBreakNormal">{types[i]}</span>
-              </EuiCode>
+              <EuiCodeBlock {...codeBlockProps}>{types[i]}</EuiCodeBlock>
             );
           }
         }
         defaultTypeCell = (
-          <EuiTableRowCell
-            className="guideSection__table-row"
-            key="type"
-            header="Type">
-            {elements}
+          <EuiTableRowCell key="type" header="Type" textOnly={false}>
+            <div>{elements}</div>
           </EuiTableRowCell>
         );
       }
diff --git a/src/components/code/_code_block.scss b/src/components/code/_code_block.scss
index a70bebba4e7..4886cee4c4d 100644
--- a/src/components/code/_code_block.scss
+++ b/src/components/code/_code_block.scss
@@ -1,4 +1,5 @@
 .euiCodeBlock {
+  max-width: 100%;
   display: block;
   position: relative;
   background: $euiCodeBlockBackgroundColor;

From eb69f230522df8e9584f02c9068d6207de8b920d Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 19 Aug 2020 14:54:26 -0400
Subject: [PATCH 4/5] One codeblock with line breaks when multiple functions

---
 .../components/guide_section/guide_section.js  | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
index 0176fb9ce4c..2d32fe8fcac 100644
--- a/src-docs/src/components/guide_section/guide_section.js
+++ b/src-docs/src/components/guide_section/guide_section.js
@@ -358,23 +358,29 @@ export class GuideSection extends Component {
         for (let i = 0; i < types.length; i++) {
           if (functionMatches[j]) {
             elements.push(
-              <EuiCodeBlock {...codeBlockProps}>{types[i]}</EuiCodeBlock>
+              <Fragment>
+                {types[i]} <br />
+              </Fragment>
             );
             elements.push(
-              <EuiCodeBlock {...codeBlockProps}>
-                {functionMatches[j][0]}
-              </EuiCodeBlock>
+              <Fragment>
+                {functionMatches[j][0]} <br />
+              </Fragment>
             );
             j++;
           } else {
             elements.push(
-              <EuiCodeBlock {...codeBlockProps}>{types[i]}</EuiCodeBlock>
+              <Fragment>
+                {types[i]} <br />
+              </Fragment>
             );
           }
         }
         defaultTypeCell = (
           <EuiTableRowCell key="type" header="Type" textOnly={false}>
-            <div>{elements}</div>
+            <EuiCodeBlock whiteSpace="pre" {...codeBlockProps}>
+              {elements}
+            </EuiCodeBlock>
           </EuiTableRowCell>
         );
       }

From 410afc46c1a13ec8716b1926508e9ad4a88d02ee Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty <ashik9591@gmail.com>
Date: Thu, 20 Aug 2020 01:49:11 +0530
Subject: [PATCH 5/5] Fixed warnings of missing keys

---
 src-docs/src/components/guide_section/guide_section.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
index 2d32fe8fcac..7b54b07bf1a 100644
--- a/src-docs/src/components/guide_section/guide_section.js
+++ b/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" />];
   });
 };
 
@@ -358,19 +358,19 @@ export class GuideSection extends Component {
         for (let i = 0; i < types.length; i++) {
           if (functionMatches[j]) {
             elements.push(
-              <Fragment>
+              <Fragment key={`type-${i}`}>
                 {types[i]} <br />
               </Fragment>
             );
             elements.push(
-              <Fragment>
+              <Fragment key={`function-${i}`}>
                 {functionMatches[j][0]} <br />
               </Fragment>
             );
             j++;
           } else {
             elements.push(
-              <Fragment>
+              <Fragment key={`type-${i}`}>
                 {types[i]} <br />
               </Fragment>
             );