Merge pull request #6 from cchaos/ashikmeerankutty-vertical-scroll

Swap usages of code for code block and fix overflow
ashikmeerankutty · Aug 19, 2020 · 2acc2e0 · 2acc2e0
2 parents f47b025 + eb69f23
commit 2acc2e0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git 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
@@ -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,21 +338,18 @@ 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})`);
         }
       }
 
       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,29 @@ 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>
+              <Fragment>
+                {types[i]} <br />
+              </Fragment>
             );
             elements.push(
-              <EuiCode language="ts">{functionMatches[j][0]}</EuiCode>
+              <Fragment>
+                {functionMatches[j][0]} <br />
+              </Fragment>
             );
             j++;
           } else {
             elements.push(
-              <EuiCode>
-                <span className="eui-textBreakNormal">{types[i]}</span>
-              </EuiCode>
+              <Fragment>
+                {types[i]} <br />
+              </Fragment>
             );
           }
         }
         defaultTypeCell = (
-          <EuiTableRowCell
-            className="guideSection__table-row"
-            key="type"
-            header="Type">
-            {elements}
+          <EuiTableRowCell key="type" header="Type" textOnly={false}>
+            <EuiCodeBlock whiteSpace="pre" {...codeBlockProps}>
+              {elements}
+            </EuiCodeBlock>
           </EuiTableRowCell>
         );
       }

diff --git 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;