Adding conditional rendering in EuiCallOut component based on title (#…

…3549)
elastic · Jun 4, 2020 · b1ae07e · b1ae07e
1 parent 33d87de
commit b1ae07e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 123 deletions.
diff --git 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
@@ -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
@@ -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>