From 9154dfca4ca67a3703da30a96e3e340d7d8aba45 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 25 Oct 2022 12:36:42 -0700
Subject: [PATCH 1/4] Fix issue where using a `css` prop on
 EuiPageTemplate.Sidebar causes it to render incorrectly

---
 .../page_template/page_template.tsx           | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/page_template/page_template.tsx b/src/components/page_template/page_template.tsx
index 7458be8c342..324bc56bacb 100644
--- a/src/components/page_template/page_template.tsx
+++ b/src/components/page_template/page_template.tsx
@@ -159,20 +159,20 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
   React.Children.toArray(children).forEach((child, index) => {
     if (!React.isValidElement(child)) return; // Skip non-components
 
-    switch (child.type) {
-      case EuiPageSidebar:
-        sidebar.push(
-          React.cloneElement(child, {
-            key: `sidebar${index}`,
-            ...getSideBarProps(),
-            // Allow their props overridden by appending the child props spread at the end
-            ...child.props,
-          })
-        );
-        break;
-
-      default:
-        sections.push(child);
+    if (
+      child.type === EuiPageSidebar ||
+      child.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ === EuiPageSidebar
+    ) {
+      sidebar.push(
+        React.cloneElement(child, {
+          key: `sidebar${index}`,
+          ...getSideBarProps(),
+          // Allow their props overridden by appending the child props spread at the end
+          ...child.props,
+        })
+      );
+    } else {
+      sections.push(child);
     }
   });
 

From ec495cc9202ce24bee53f5daba7a6828ab5fbeae Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 25 Oct 2022 12:39:36 -0700
Subject: [PATCH 2/4] Add missing children unit tests

---
 .../__snapshots__/page_template.test.tsx.snap | 70 +++++++++++++++++++
 .../page_template/page_template.test.tsx      | 30 ++++++++
 2 files changed, 100 insertions(+)

diff --git a/src/components/page_template/__snapshots__/page_template.test.tsx.snap b/src/components/page_template/__snapshots__/page_template.test.tsx.snap
index ef6099a9718..999cc16a92e 100644
--- a/src/components/page_template/__snapshots__/page_template.test.tsx.snap
+++ b/src/components/page_template/__snapshots__/page_template.test.tsx.snap
@@ -49,6 +49,76 @@ exports[`EuiPageTemplate bottomBorder is rendered as true 1`] = `
 </div>
 `;
 
+exports[`EuiPageTemplate children detects sidebars and does not place them in the main EuiPageInner 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiPageTemplate testClass1 testClass2 emotion-euiPageOuter-row-grow"
+  data-test-subj="test subject string"
+  style="min-block-size:max(460px, 100vh)"
+>
+  <div
+    class="emotion-euiPageSidebar-l"
+    style="min-inline-size:248px"
+  />
+  <div
+    class="emotion-euiPageSidebar-l-component"
+    style="min-inline-size:248px"
+  />
+  <main
+    class="emotion-euiPageInner-panelled-left"
+    id="EuiPageTemplateInner_generated-id"
+  />
+</div>
+`;
+
+exports[`EuiPageTemplate children renders all other types within the main EuiPageInner 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiPageTemplate testClass1 testClass2 emotion-euiPageOuter-row-grow"
+  data-test-subj="test subject string"
+  style="min-block-size:max(460px, 100vh)"
+>
+  <main
+    class="emotion-euiPageInner"
+    id="EuiPageTemplateInner_generated-id"
+  >
+    <header
+      class="euiPageHeader emotion-euiPageHeader-l-border"
+    >
+      <div
+        class="emotion-euiPageHeaderContent-l"
+      >
+        <div
+          class="css-ljpjbj-flex-center"
+        >
+          A
+        </div>
+      </div>
+    </header>
+    <section
+      class="emotion-euiPageSection-grow-l-top-plain"
+    >
+      <div
+        class="emotion-euiPageSection__content-l-restrictWidth"
+        style="max-width:1200px"
+      >
+        B
+      </div>
+    </section>
+    <section
+      class="emotion-euiPageSection-grow-l-top-plain"
+    >
+      <div
+        class="emotion-euiPageSection__content-l-restrictWidth"
+        style="max-width:1200px"
+      >
+        C
+      </div>
+    </section>
+  </main>
+</div>
+`;
+
 exports[`EuiPageTemplate is rendered 1`] = `
 <div
   aria-label="aria-label"
diff --git a/src/components/page_template/page_template.test.tsx b/src/components/page_template/page_template.test.tsx
index bf349f39b27..1dfe5db80e2 100644
--- a/src/components/page_template/page_template.test.tsx
+++ b/src/components/page_template/page_template.test.tsx
@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { css } from '@emotion/react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 import { shouldRenderCustomStyles } from '../../test/internal';
@@ -99,4 +100,33 @@ describe('EuiPageTemplate', () => {
       });
     });
   });
+
+  describe('children', () => {
+    it('detects sidebars and does not place them in the main EuiPageInner', () => {
+      const component = render(
+        <EuiPageTemplate {...requiredProps}>
+          <EuiPageTemplate.Sidebar />
+          <EuiPageTemplate.Sidebar
+            css={css`
+              color: red;
+            `}
+          />
+        </EuiPageTemplate>
+      );
+      expect(component).toMatchSnapshot();
+      expect(component.find('main').children()).toHaveLength(0);
+    });
+
+    it('renders all other types within the main EuiPageInner', () => {
+      const component = render(
+        <EuiPageTemplate {...requiredProps}>
+          <EuiPageTemplate.Header>A</EuiPageTemplate.Header>
+          <EuiPageTemplate.Section>B</EuiPageTemplate.Section>
+          <EuiPageTemplate.Section>C</EuiPageTemplate.Section>
+        </EuiPageTemplate>
+      );
+      expect(component).toMatchSnapshot();
+      expect(component.find('main').children()).toHaveLength(3);
+    });
+  });
 });

From 2000309d5d4729075dc4483b8db0655ccc1f97e8 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 25 Oct 2022 12:47:11 -0700
Subject: [PATCH 3/4] changelog

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

diff --git a/upcoming_changelogs/6324.md b/upcoming_changelogs/6324.md
new file mode 100644
index 00000000000..72162d942f6
--- /dev/null
+++ b/upcoming_changelogs/6324.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiPageTemplate` not recognizing child `EuiPageSidebar`s/`EuiPageTemplate.Sidebar`s with `css` props

From 37d5ffb586221a809cdf9c07dc57afd8b171f827 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 25 Oct 2022 19:53:24 -0700
Subject: [PATCH 4/4] [test] Confirm that non-component JSX does not cause obj
 errors

---
 .../__snapshots__/page_template.test.tsx.snap         | 11 ++---------
 src/components/page_template/page_template.test.tsx   |  2 +-
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/page_template/__snapshots__/page_template.test.tsx.snap b/src/components/page_template/__snapshots__/page_template.test.tsx.snap
index 999cc16a92e..3d42b4f9565 100644
--- a/src/components/page_template/__snapshots__/page_template.test.tsx.snap
+++ b/src/components/page_template/__snapshots__/page_template.test.tsx.snap
@@ -105,15 +105,8 @@ exports[`EuiPageTemplate children renders all other types within the main EuiPag
         B
       </div>
     </section>
-    <section
-      class="emotion-euiPageSection-grow-l-top-plain"
-    >
-      <div
-        class="emotion-euiPageSection__content-l-restrictWidth"
-        style="max-width:1200px"
-      >
-        C
-      </div>
+    <section>
+      C
     </section>
   </main>
 </div>
diff --git a/src/components/page_template/page_template.test.tsx b/src/components/page_template/page_template.test.tsx
index 1dfe5db80e2..3c011bbf7ad 100644
--- a/src/components/page_template/page_template.test.tsx
+++ b/src/components/page_template/page_template.test.tsx
@@ -122,7 +122,7 @@ describe('EuiPageTemplate', () => {
         <EuiPageTemplate {...requiredProps}>
           <EuiPageTemplate.Header>A</EuiPageTemplate.Header>
           <EuiPageTemplate.Section>B</EuiPageTemplate.Section>
-          <EuiPageTemplate.Section>C</EuiPageTemplate.Section>
+          <section>C</section>
         </EuiPageTemplate>
       );
       expect(component).toMatchSnapshot();