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 1/2] 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 2/2] 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>
         );
       }