Set min-width on header section items only when they are not empty (#…

…6158)

* Set min-width on header section items only when they are not empty

* Added the changelog

* Added the changelog

* Updated tests and snapshots

* Update upcoming_changelogs/6158.md

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

src/components/header/header_section/__snapshots__/header_section_item.test.tsx.snap

@@ -3,22 +3,24 @@
 exports[`EuiHeaderSectionItem border defaults to left 1`] = `
 <div
   class="euiHeaderSectionItem euiHeaderSectionItem--borderLeft"
-/>
+>
+  <span>
+    Left is default
+  </span>
+</div>
 `;
 
 exports[`EuiHeaderSectionItem border renders right 1`] = `
 <div
   class="euiHeaderSectionItem euiHeaderSectionItem--borderRight"
-/>
+>
+  <span>
+    Right section
+  </span>
+</div>
 `;
 
-exports[`EuiHeaderSectionItem is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiHeaderSectionItem euiHeaderSectionItem--borderLeft testClass1 testClass2"
-  data-test-subj="test subject string"
-/>
-`;
+exports[`EuiHeaderSectionItem is rendered 1`] = `null`;
 
 exports[`EuiHeaderSectionItem renders children 1`] = `
 <div

src/components/header/header_section/_header_section_item.scss

@@ -41,4 +41,4 @@
       display: none;
     }
   }
-}
+}

src/components/header/header_section/header_section_item.test.tsx

@@ -31,13 +31,21 @@ describe('EuiHeaderSectionItem', () => {
 
   describe('border', () => {
     test('defaults to left', () => {
-      const component = render(<EuiHeaderSectionItem />);
+      const component = render(
+        <EuiHeaderSectionItem>
+          <span>Left is default</span>
+        </EuiHeaderSectionItem>
+      );
 
       expect(component).toMatchSnapshot();
     });
 
     test('renders right', () => {
-      const component = render(<EuiHeaderSectionItem border="right" />);
+      const component = render(
+        <EuiHeaderSectionItem border="right">
+          <span>Right section</span>
+        </EuiHeaderSectionItem>
+      );
 
       expect(component).toMatchSnapshot();
     });

src/components/header/header_section/header_section_item.tsx

@@ -43,9 +43,10 @@ export const EuiHeaderSectionItem: FunctionComponent<EuiHeaderSectionItemProps>
     className
   );
 
-  return (
+  // we check if there is any children and if not, we don't render anything
+  return children ? (
     <div className={classes} {...rest}>
       {children}
     </div>
-  );
+  ) : null;
 };

upcoming_changelogs/6158.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Updated the `EuiHeaderSectionItem` to not render if empty