From 392e64de18493dd3ad53a645d784e103eb5e9978 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Mon, 3 Feb 2020 14:19:17 -0700
Subject: [PATCH] Remove extra div wrapping around EuiCode contents (#2820)

* Remove extra div wrapping around EuiCode contents

* changelog

* unchangelog

* kinda changelog
---
 CHANGELOG.md                                  |  2 +-
 .../__snapshots__/_code_block.test.js.snap    | 24 ++------
 .../code/__snapshots__/code.test.js.snap      |  4 +-
 .../__snapshots__/code_block.test.js.snap     | 60 +++++--------------
 src/components/code/_code_block.js            |  4 +-
 5 files changed, 26 insertions(+), 68 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1030746d3b8..398e39290be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,7 @@
 **Bug fixes**
 
 - Exported missing `EuiSelectProps` type ([#2815](https://github.com/elastic/eui/pull/2815))
-- Fixed `EuiCode`'s & `EuiCodeBlock`'s ability to accept non-string children ([#2792](https://github.com/elastic/eui/pull/2792))
+- Fixed `EuiCode`'s & `EuiCodeBlock`'s ability to accept non-string children ([#2792](https://github.com/elastic/eui/pull/2792)) ([#2820](https://github.com/elastic/eui/pull/2820))
 - Fixed `EuiSearchBar`, `Query`, and `AST`'s ability to accept literal parenthesis characters ([#2791](https://github.com/elastic/eui/pull/2791))
 
 **Breaking changes**
diff --git a/src/components/code/__snapshots__/_code_block.test.js.snap b/src/components/code/__snapshots__/_code_block.test.js.snap
index 061ef4b8564..71853e13d0a 100644
--- a/src/components/code/__snapshots__/_code_block.test.js.snap
+++ b/src/components/code/__snapshots__/_code_block.test.js.snap
@@ -9,9 +9,7 @@ exports[`EuiCodeBlockImpl block highlights javascript code, adding "js" class 1`
   >
     <code
       class="euiCodeBlock__code js hljs javascript"
-    >
-      <div />
-    </code>
+    />
   </pre>
 </div>
 `;
@@ -28,10 +26,8 @@ exports[`EuiCodeBlockImpl block renders a pre block tag 1`] = `
       class="euiCodeBlock__code"
       data-test-subj="test subject string"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -46,9 +42,7 @@ exports[`EuiCodeBlockImpl block renders with transparent background 1`] = `
   >
     <code
       class="euiCodeBlock__code"
-    >
-      <div />
-    </code>
+    />
   </pre>
 </div>
 `;
@@ -59,9 +53,7 @@ exports[`EuiCodeBlockImpl inline highlights javascript code, adding "js" class 1
 >
   <code
     class="euiCodeBlock__code js hljs javascript"
-  >
-    <div />
-  </code>
+  />
 </span>
 `;
 
@@ -74,10 +66,8 @@ exports[`EuiCodeBlockImpl inline renders an inline code tag 1`] = `
     class="euiCodeBlock__code"
     data-test-subj="test subject string"
   >
-    <div>
-      var some = 'code';
+    var some = 'code';
 console.log(some);
-    </div>
   </code>
 </span>
 `;
@@ -88,8 +78,6 @@ exports[`EuiCodeBlockImpl inline renders with transparent background 1`] = `
 >
   <code
     class="euiCodeBlock__code"
-  >
-    <div />
-  </code>
+  />
 </span>
 `;
diff --git a/src/components/code/__snapshots__/code.test.js.snap b/src/components/code/__snapshots__/code.test.js.snap
index 500e653a4fc..09b5bfe4f3a 100644
--- a/src/components/code/__snapshots__/code.test.js.snap
+++ b/src/components/code/__snapshots__/code.test.js.snap
@@ -9,10 +9,8 @@ exports[`EuiCode renders a code snippet 1`] = `
     class="euiCodeBlock__code"
     data-test-subj="test subject string"
   >
-    <div>
-      var some = 'code';
+    var some = 'code';
 console.log(some);
-    </div>
   </code>
 </span>
 `;
diff --git a/src/components/code/__snapshots__/code_block.test.js.snap b/src/components/code/__snapshots__/code_block.test.js.snap
index 3ef7eb0328a..e279826b59a 100644
--- a/src/components/code/__snapshots__/code_block.test.js.snap
+++ b/src/components/code/__snapshots__/code_block.test.js.snap
@@ -5,10 +5,8 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 1`] = `
   <div class=\\"euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge\\">
     <pre class=\\"euiCodeBlock__pre\\">
       <code class=\\"euiCodeBlock__code javascript hljs\\">
-        <div>
-          <span class=\\"hljs-keyword\\">const</span>value =
-          <span class=\\"hljs-string\\">'State 1'</span>
-        </div>
+        <span class=\\"hljs-keyword\\">const</span>value =
+        <span class=\\"hljs-string\\">'State 1'</span>
       </code>
     </pre>
   </div>
@@ -20,10 +18,8 @@ exports[`EuiCodeBlock dynamic content updates DOM when input changes 2`] = `
   <div class=\\"euiCodeBlock euiCodeBlock--fontSmall euiCodeBlock--paddingLarge\\">
     <pre class=\\"euiCodeBlock__pre\\">
       <code class=\\"euiCodeBlock__code javascript hljs\\">
-        <div>
-          <span class=\\"hljs-keyword\\">const</span>value =
-          <span class=\\"hljs-string\\">'State 2'</span>
-        </div>
+        <span class=\\"hljs-keyword\\">const</span>value =
+        <span class=\\"hljs-string\\">'State 2'</span>
       </code>
     </pre>
   </div>
@@ -40,10 +36,8 @@ exports[`EuiCodeBlock props fontSize l is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -59,10 +53,8 @@ exports[`EuiCodeBlock props fontSize m is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -78,10 +70,8 @@ exports[`EuiCodeBlock props fontSize s is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -97,10 +87,8 @@ exports[`EuiCodeBlock props isCopyable is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
   <div
@@ -144,10 +132,8 @@ exports[`EuiCodeBlock props language is rendered 1`] = `
     <code
       class="euiCodeBlock__code html hljs xml"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -165,10 +151,8 @@ exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
   <div
@@ -204,10 +188,8 @@ exports[`EuiCodeBlock props paddingSize l is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -223,10 +205,8 @@ exports[`EuiCodeBlock props paddingSize m is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -242,10 +222,8 @@ exports[`EuiCodeBlock props paddingSize none is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -261,10 +239,8 @@ exports[`EuiCodeBlock props paddingSize s is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -280,10 +256,8 @@ exports[`EuiCodeBlock props transparentBackground is rendered 1`] = `
     <code
       class="euiCodeBlock__code"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
@@ -301,10 +275,8 @@ exports[`EuiCodeBlock renders a code block 1`] = `
       class="euiCodeBlock__code"
       data-test-subj="test subject string"
     >
-      <div>
-        var some = 'code';
+      var some = 'code';
 console.log(some);
-      </div>
     </code>
   </pre>
 </div>
diff --git a/src/components/code/_code_block.js b/src/components/code/_code_block.js
index 95858a8845c..56129571c50 100644
--- a/src/components/code/_code_block.js
+++ b/src/components/code/_code_block.js
@@ -152,7 +152,7 @@ export class EuiCodeBlockImpl extends Component {
     if (inline) {
       return (
         <>
-          {createPortal(<div>{children}</div>, this.codeTarget)}
+          {createPortal(children, this.codeTarget)}
           <span {...wrapperProps}>{codeSnippet}</span>
         </>
       );
@@ -272,7 +272,7 @@ export class EuiCodeBlockImpl extends Component {
 
     return (
       <>
-        {createPortal(<div>{children}</div>, this.codeTarget)}
+        {createPortal(children, this.codeTarget)}
         <EuiInnerText fallback="">
           {(innerTextRef, innerText) => {
             const codeBlockControls = getCodeBlockControls(innerText);