[EuiPageTemplate] Fix ignored component prop (#6352)

* Fix `component` prop on EuiPageTemplate not being passed down to EuiPageInner

* Fix `component` type complaints between EuiPageTemplate and EuiPageInner

- EuiPageTemplate does not need the generics logic, EuiPageInner does(?)

* Write better unit tests for `component` prop

* misc cleanup

- add `.` because props docgen is combining the `responsive` props documentation between both EuiPageOuter and EuiPageInner

- be more specific on page inner prop docs, since those docs appear on EuiPageTemplate props

- move `responsive` prop up because both inner & outer use it

* changelog

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

@@ -3,10 +3,9 @@
 exports[`EuiPageTemplate _EuiPageInnerProps is rendered 1`] = `
 <div
   class="euiPageTemplate emotion-euiPageOuter-row-grow"
-  component="main"
   style="min-block-size:max(460px, 100vh)"
 >
-  <main
+  <div
     class="customClassName emotion-euiPageInner-left"
     id="customID"
   />

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

@@ -6,12 +6,23 @@ exports[`_EuiPageInner border is rendered 1`] = `
 />
 `;
 
-exports[`_EuiPageInner component is rendered 1`] = `
+exports[`_EuiPageInner component renders HTML tag strings 1`] = `
 <div
   class="emotion-euiPageInner"
 />
 `;
 
+exports[`_EuiPageInner component renders custom React components 1`] = `
+Array [
+  <div>
+    hello
+  </div>,
+  <div>
+    world
+  </div>,
+]
+`;
+
 exports[`_EuiPageInner is rendered 1`] = `
 <main
   aria-label="aria-label"

src/components/page_template/inner/page_inner.test.tsx

@@ -35,10 +35,26 @@ describe('_EuiPageInner', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('component is rendered', () => {
-    const component = render(<EuiPageInner component="div" />);
+  describe('component', () => {
+    it('renders HTML tag strings', () => {
+      const component = render(<EuiPageInner component="div" />);
 
-    expect(component).toMatchSnapshot();
+      expect(component).toMatchSnapshot();
+    });
+
+    it('renders custom React components', () => {
+      const TestComponent: React.FC<{ test?: boolean }> = ({ test }) => (
+        <div>{test ? 'hello' : 'world'}</div>
+      );
+
+      const component = render(
+        <>
+          <EuiPageInner component={TestComponent} test />
+          <EuiPageInner component={TestComponent} />
+        </>
+      );
+      expect(component).toMatchSnapshot();
+    });
   });
 
   describe('paddingSize', () => {

src/components/page_template/inner/page_inner.tsx

@@ -16,7 +16,7 @@ import {
 import { useEuiTheme, useIsWithinBreakpoints } from '../../../services';
 import { euiPageInnerStyles } from './page_inner.styles';
 
-type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType;
+export type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType;
 
 export type _EuiPageInnerProps<
   T extends ComponentTypes = 'main'
@@ -40,7 +40,7 @@ export type _EuiPageInnerProps<
      */
     paddingSize?: EuiPaddingSize;
     /**
-     * Decides at which point the component will be 100vw.
+     * Decides at which point the main content wrapper will be 100vw.
      */
     responsive?: _EuiThemeBreakpoint[];
   };

src/components/page_template/outer/page_outer.tsx

@@ -26,7 +26,7 @@ export interface _EuiPageOuterProps
    */
   direction?: 'row' | 'column';
   /**
-   * When direction is `row`, it will flip to `column` when within these breakpoints
+   * When direction is `row`, it will flip to `column` when within these breakpoints.
    */
   responsive?: _EuiThemeBreakpoint[];
 }

src/components/page_template/page_template.test.tsx

@@ -35,7 +35,7 @@ describe('EuiPageTemplate', () => {
   test('_EuiPageInnerProps is rendered', () => {
     const component = render(
       <EuiPageTemplate
-        component="main"
+        component="div"
         contentBorder={true}
         panelled={false}
         mainProps={{ id: 'customID', className: 'customClassName' }}

src/components/page_template/page_template.tsx

@@ -19,6 +19,7 @@ import classNames from 'classnames';
 
 import { _EuiPageOuter as EuiPageOuter, _EuiPageOuterProps } from './outer';
 import { _EuiPageInner as EuiPageInner, _EuiPageInnerProps } from './inner';
+import { ComponentTypes } from './inner/page_inner';
 import {
   _EuiPageBottomBar as EuiPageBottomBar,
   _EuiPageBottomBarProps,
@@ -49,7 +50,7 @@ export const TemplateContext = createContext({
 
 export type EuiPageTemplateProps = _EuiPageOuterProps &
   // We re-define the `border` prop below to be named more appropriately
-  Omit<_EuiPageInnerProps, 'border'> &
+  Omit<_EuiPageInnerProps, 'border' | 'component'> &
   _EuiPageRestrictWidth &
   _EuiPageBottomBorder & {
     /**
@@ -71,6 +72,11 @@ export type EuiPageTemplateProps = _EuiPageOuterProps &
      * Passes through some common HTML attributes to the `main` content wrapper
      */
     mainProps?: CommonProps & HTMLAttributes<HTMLElement>;
+    /**
+     * Sets which HTML element to render for the `main` content wrapper
+     * @default main
+     */
+    component?: ComponentTypes;
   };
 
 /**
@@ -80,6 +86,7 @@ export type EuiPageTemplateProps = _EuiPageOuterProps &
 export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
   children,
   // Shared props
+  responsive = ['xs', 's'],
   restrictWidth = true,
   paddingSize = 'l',
   grow = true,
@@ -88,11 +95,11 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
   panelled,
   // Inner props
   contentBorder,
+  component,
   mainProps,
   // Outer props
   className,
   minHeight = '460px',
-  responsive = ['xs', 's'],
   ...rest
 }) => {
   const { euiTheme } = useEuiTheme();
@@ -205,6 +212,7 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
 
         <EuiPageInner
           {...mainProps}
+          component={component}
           id={pageInnerId}
           border={innerBordered()}
           panelled={innerPanelled()}

upcoming_changelogs/6352.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiPageTemplate` not correctly passing the `component` prop to the inner main content wrapper.