From b1ae07ed4b7d9c6a74b3b3559be9b4e13b31fdd0 Mon Sep 17 00:00:00 2001
From: Shrey Dubey <53302612+shrey@users.noreply.github.com>
Date: Fri, 5 Jun 2020 02:55:00 +0530
Subject: [PATCH] Adding conditional rendering in EuiCallOut component based on
 title (#3549)

---
 CHANGELOG.md                                  |   2 +
 .../__snapshots__/call_out.test.tsx.snap      | 132 ++----------------
 src/components/call_out/call_out.tsx          |  11 +-
 3 files changed, 22 insertions(+), 123 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1295f044732..4d380c51668 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added conditional rendering of the title element in `EuiCallOut` to avoid usage of additional space caused by the rendered `<div>` element ([#3549](https://github.com/elastic/eui/pull/3549))
+
 **Bug fixes**
 
 - Fixed `EuiKeyPadMenu` and `EuiKeyPadMenuItem` aria roles ([#3502](https://github.com/elastic/eui/pull/3502))
diff --git a/src/components/call_out/__snapshots__/call_out.test.tsx.snap b/src/components/call_out/__snapshots__/call_out.test.tsx.snap
index aa847b786ef..12716d53977 100644
--- a/src/components/call_out/__snapshots__/call_out.test.tsx.snap
+++ b/src/components/call_out/__snapshots__/call_out.test.tsx.snap
@@ -6,13 +6,6 @@ exports[`EuiCallOut is rendered 1`] = `
   class="euiCallOut euiCallOut--primary testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div
-    class="euiCallOutHeader"
-  >
-    <span
-      class="euiCallOutHeader__title"
-    />
-  </div>
   <div
     class="euiText euiText--small"
   >
@@ -24,174 +17,73 @@ exports[`EuiCallOut is rendered 1`] = `
 exports[`EuiCallOut props color danger is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--danger"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <span
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props color primary is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--primary"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <span
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props color success is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--success"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <span
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props color warning is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--warning"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <span
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props heading h1 is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--primary"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <h1
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props heading h2 is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--primary"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <h2
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props heading h3 is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--primary"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <h3
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props heading h4 is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--primary"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <h4
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props heading h5 is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--primary"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <h5
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props heading h6 is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--primary"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <h6
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props heading p is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--primary"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <p
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props iconType is rendered 1`] = `
 <div
   class="euiCallOut euiCallOut--primary"
->
-  <div
-    class="euiCallOutHeader"
-  >
-    <div
-      aria-hidden="true"
-      class="euiCallOutHeader__icon"
-      data-euiicon-type="user"
-    />
-    <span
-      class="euiCallOutHeader__title"
-    />
-  </div>
-</div>
+/>
 `;
 
 exports[`EuiCallOut props title is rendered 1`] = `
diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx
index 465d5a42325..35322ecceea 100644
--- a/src/components/call_out/call_out.tsx
+++ b/src/components/call_out/call_out.tsx
@@ -92,14 +92,19 @@ export const EuiCallOut: FunctionComponent<EuiCallOutProps> = ({
   }
 
   const H: any = heading ? `${heading}` : 'span';
+  let header;
 
-  return (
-    <div className={classes} {...rest}>
+  if (title) {
+    header = (
       <div className="euiCallOutHeader">
         {headerIcon}
-
         <H className="euiCallOutHeader__title">{title}</H>
       </div>
+    );
+  }
+  return (
+    <div className={classes} {...rest}>
+      {header}
 
       {optionalChildren}
     </div>