Fix EuiSideBar with css props not being detected by EuiPageTemplate (…

…#6324)

* Fix issue where using a `css` prop on EuiPageTemplate.Sidebar causes it to render incorrectly

* Add missing children unit tests

* changelog

* [test] Confirm that non-component JSX does not cause obj errors

src/components/page_template/__snapshots__/page_template.test.tsx.snap

@@ -49,6 +49,69 @@ 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>
+      C
+    </section>
+  </main>
+</div>
+`;
+
 exports[`EuiPageTemplate is rendered 1`] = `
 <div
   aria-label="aria-label"

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>
+          <section>C</section>
+        </EuiPageTemplate>
+      );
+      expect(component).toMatchSnapshot();
+      expect(component.find('main').children()).toHaveLength(3);
+    });
+  });
 });

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);
     }
   });
 

upcoming_changelogs/6324.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiPageTemplate` not recognizing child `EuiPageSidebar`s/`EuiPageTemplate.Sidebar`s with `css` props