From 5f81246a88584ba2e591d26ff8a4dbb4b607a2f0 Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Tue, 23 Aug 2022 15:06:34 +0200
Subject: [PATCH 1/5] Set min-width on header section items only when they are
 not empty

---
 .../header/header_section/_header_section_item.scss           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss
index f68b4a17672..3143ea78642 100644
--- a/src/components/header/header_section/_header_section_item.scss
+++ b/src/components/header/header_section/_header_section_item.scss
@@ -31,7 +31,7 @@
 }
 
 @include euiBreakpoint('xs') {
-  .euiHeaderSectionItem {
+  .euiHeaderSectionItem:not(:empty) {
     min-width: $euiHeaderChildSize * .75;
   }
 
@@ -41,4 +41,4 @@
       display: none;
     }
   }
-}
\ No newline at end of file
+}

From 04a39131e6d16397146de9a8fa96b9fe0c8ee12f Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Tue, 23 Aug 2022 16:30:09 +0200
Subject: [PATCH 2/5] Added the changelog

---
 upcoming_changelogs/6158.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 upcoming_changelogs/6158.md

diff --git a/upcoming_changelogs/6158.md b/upcoming_changelogs/6158.md
new file mode 100644
index 00000000000..a7b54ea33ec
--- /dev/null
+++ b/upcoming_changelogs/6158.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Updated the header section item to have `min-width` only when non-empty

From f2512bd5e34a024632566785773c10cb6d4015bf Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Wed, 24 Aug 2022 16:13:26 +0200
Subject: [PATCH 3/5] Added the changelog

---
 .../header/header_section/_header_section_item.scss          | 2 +-
 src/components/header/header_section/header_section_item.tsx | 5 +++--
 upcoming_changelogs/6158.md                                  | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss
index 3143ea78642..7966dade3c2 100644
--- a/src/components/header/header_section/_header_section_item.scss
+++ b/src/components/header/header_section/_header_section_item.scss
@@ -31,7 +31,7 @@
 }
 
 @include euiBreakpoint('xs') {
-  .euiHeaderSectionItem:not(:empty) {
+  .euiHeaderSectionItem {
     min-width: $euiHeaderChildSize * .75;
   }
 
diff --git a/src/components/header/header_section/header_section_item.tsx b/src/components/header/header_section/header_section_item.tsx
index 068d312517f..89920574d82 100644
--- a/src/components/header/header_section/header_section_item.tsx
+++ b/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;
 };
diff --git a/upcoming_changelogs/6158.md b/upcoming_changelogs/6158.md
index a7b54ea33ec..a9a4e2286ce 100644
--- a/upcoming_changelogs/6158.md
+++ b/upcoming_changelogs/6158.md
@@ -1,3 +1,3 @@
 **Bug fixes**
 
-- Updated the header section item to have `min-width` only when non-empty
+- Updated the header section item to not render if empty

From 103ab4f7122e579df19ac331cb74caac765c25ad Mon Sep 17 00:00:00 2001
From: Yulia Cech <yulia.cech@elastic.co>
Date: Wed, 24 Aug 2022 17:24:41 +0200
Subject: [PATCH 4/5] Updated tests and snapshots

---
 .../header_section_item.test.tsx.snap         | 20 ++++++++++---------
 .../header_section_item.test.tsx              | 12 +++++++++--
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/components/header/header_section/__snapshots__/header_section_item.test.tsx.snap b/src/components/header/header_section/__snapshots__/header_section_item.test.tsx.snap
index 4b832899b40..dfe5b277617 100644
--- a/src/components/header/header_section/__snapshots__/header_section_item.test.tsx.snap
+++ b/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
diff --git a/src/components/header/header_section/header_section_item.test.tsx b/src/components/header/header_section/header_section_item.test.tsx
index 1f50bdf7214..9b8938d6a45 100644
--- a/src/components/header/header_section/header_section_item.test.tsx
+++ b/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();
     });

From 979238e5a47a1b4e1d93cb531e30f23ac7a3384b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yulia=20=C4=8Cech?=
 <6585477+yuliacech@users.noreply.github.com>
Date: Thu, 25 Aug 2022 11:18:32 +0200
Subject: [PATCH 5/5] Update upcoming_changelogs/6158.md

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>
---
 upcoming_changelogs/6158.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/upcoming_changelogs/6158.md b/upcoming_changelogs/6158.md
index a9a4e2286ce..21e04ddf3f0 100644
--- a/upcoming_changelogs/6158.md
+++ b/upcoming_changelogs/6158.md
@@ -1,3 +1,3 @@
 **Bug fixes**
 
-- Updated the header section item to not render if empty
+- Updated the `EuiHeaderSectionItem` to not render if empty