Fix overflowHeight in EuiCodeBlock (#2487)

elastic · Oct 25, 2019 · c7cb88b · c7cb88b
1 parent 54436b2
commit c7cb88b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Normalized button `moz-focus-inner` ([#2445](https://github.com/elastic/eui/pull/2445))
 - Fixed typo to correct `aria-modal` attribute in`EuiPopover` ([#2488](https://github.com/elastic/eui/pull/2488))
 - Fixed position of `EuiCodeBlock` controls and added more tests ([#2459](https://github.com/elastic/eui/pull/2459))
+- Changed `EuiCodeBlock` so that `overflowHeight` now applies a `maxHeight` instead of a `height` on the block ([#2487](https://github.com/elastic/eui/pull/2487))
 
 ## [`14.8.0`](https://github.com/elastic/eui/tree/v14.8.0)
 

diff --git a/src/components/code/__snapshots__/code_block.test.js.snap b/src/components/code/__snapshots__/code_block.test.js.snap
@@ -115,10 +115,11 @@ console.log(some);
 exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
 <div
   class="euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge euiCodeBlock--hasControls"
-  style="height:200px"
+  style="max-height:200px"
 >
   <pre
     class="euiCodeBlock__pre"
+    style="max-height:200px"
   >
     <code
       class="euiCodeBlock__code"

diff --git a/src/components/code/_code_block.js b/src/components/code/_code_block.js
@@ -130,7 +130,7 @@ export class EuiCodeBlockImpl extends Component {
     const optionalStyles = {};
 
     if (overflowHeight) {
-      optionalStyles.height = overflowHeight;
+      optionalStyles.maxHeight = overflowHeight;
     }
 
     const codeSnippet = (
@@ -255,7 +255,9 @@ export class EuiCodeBlockImpl extends Component {
 
     return (
       <div {...wrapperProps}>
-        <pre className="euiCodeBlock__pre">{codeSnippet}</pre>
+        <pre style={optionalStyles} className="euiCodeBlock__pre">
+          {codeSnippet}
+        </pre>
 
         {/*
           If the below fullScreen code renders, it actually attaches to the body because of