diff --git a/src-docs/src/views/page_template/_page_demo.tsx b/src-docs/src/views/page_template/_page_demo.tsx index 41b53270a3c..f2f94bc6f9f 100644 --- a/src-docs/src/views/page_template/_page_demo.tsx +++ b/src-docs/src/views/page_template/_page_demo.tsx @@ -43,11 +43,14 @@ const ExitFullscreenDemoButton = () => { type toggles = { pageHeader?: boolean; - panelled?: boolean; restrictedWidth?: boolean; sidebar?: boolean; sidebarSticky?: boolean; border?: boolean; + // If a sidebar is present, a basic switch can be used + panelledSwitch?: boolean; + // If a sidebar is not present, `undefined` matters - use a group instead + panelledGroup?: boolean; }; type showing = { @@ -75,11 +78,12 @@ export const PageDemo: FunctionComponent< }, toggle = { pageHeader: false, - panelled: false, restrictedWidth: false, sidebar: false, sidebarSticky: false, border: false, + panelledSwitch: false, + panelledGroup: false, }, template: Template = CustomTemplateExample, source = CustomTemplateExampleSource, @@ -88,7 +92,9 @@ export const PageDemo: FunctionComponent< const isMobileSize = useIsWithinBreakpoints(['xs', 's']); const [showHeader, setShowHeader] = useState(true); - const [showPanelled, setShowPanelled] = useState(true); + const [showPanelled, setShowPanelled] = useState( + toggle.panelledGroup ? undefined : true + ); const [showSidebar, setShowSidebar] = useState( Boolean(show.sidebar) ); @@ -288,16 +294,59 @@ export const PageDemo: FunctionComponent< /> )} - {toggle.panelled && ( + {toggle.panelledSwitch && ( setShowPanelled((showing) => !showing)} compressed /> )} + {toggle.panelledGroup && ( + +
+ Panelled:  + + setShowPanelled( + id === 'radioTrue' + ? true + : id === 'radioFalse' + ? false + : undefined + ) + } + name="panelledGroup" + legend="Panelled" + buttonSize="compressed" + color="primary" + /> +
+
+ )} ); diff --git a/src-docs/src/views/page_template/examples.tsx b/src-docs/src/views/page_template/examples.tsx index e6066f1fb28..8710a56cc5f 100644 --- a/src-docs/src/views/page_template/examples.tsx +++ b/src-docs/src/views/page_template/examples.tsx @@ -45,7 +45,7 @@ export const pageTemplateExamplesSections = [ slug="full-page" fullscreen toggle={{ - panelled: true, + panelledGroup: true, restrictedWidth: true, }} show={{ @@ -67,7 +67,7 @@ export const pageTemplateExamplesSections = [ fullscreen template={Sidebar} toggle={{ - panelled: true, + panelledSwitch: true, sidebar: true, sidebarSticky: true, border: true, @@ -116,7 +116,7 @@ export const pageTemplateExamplesSections = [ template={Empty} toggle={{ pageHeader: true, - panelled: true, + panelledSwitch: true, sidebar: true, }} show={{ @@ -236,7 +236,7 @@ export const PageTemplateExample = () => ( ( ( source={EmptySource} toggle={{ pageHeader: true, - panelled: true, + panelledSwitch: true, sidebar: true, }} show={{ 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 066c4c1a886..028a8b2b3e0 100644 --- a/src/components/page_template/__snapshots__/page_template.test.tsx.snap +++ b/src/components/page_template/__snapshots__/page_template.test.tsx.snap @@ -12,6 +12,18 @@ exports[`EuiPageTemplate _EuiPageInnerProps is rendered 1`] = ` `; +exports[`EuiPageTemplate _EuiPageInnerProps renders as panelled 1`] = ` +
+
+
+`; + exports[`EuiPageTemplate _EuiPageOuterProps is rendered 1`] = `
{ expect(container.firstChild).toMatchSnapshot(); }); - test('_EuiPageInnerProps is rendered', () => { - const { container } = render( - - ); + describe('_EuiPageInnerProps', () => { + it('is rendered', () => { + const { container } = render( + + ); - expect(container.firstChild).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); + }); + + it('renders as panelled', () => { + const { container } = render( + + ); + + expect(container.firstChild).toMatchSnapshot(); + }); }); describe('restrict width', () => { diff --git a/src/components/page_template/page_template.tsx b/src/components/page_template/page_template.tsx index 8132e7d3628..c7ca8162070 100644 --- a/src/components/page_template/page_template.tsx +++ b/src/components/page_template/page_template.tsx @@ -157,8 +157,7 @@ export const _EuiPageTemplate: FunctionComponent = ({ parent: `#${pageInnerId}`, }); - const innerPanelled = () => - panelled === false ? false : Boolean(sidebar.length > 0); + const innerPanelled = () => panelled ?? Boolean(sidebar.length > 0); const innerBordered = () => contentBorder !== undefined ? contentBorder : Boolean(sidebar.length > 0); diff --git a/upcoming_changelogs/7044.md b/upcoming_changelogs/7044.md new file mode 100644 index 00000000000..98b07c30f4a --- /dev/null +++ b/upcoming_changelogs/7044.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- `EuiPageTemplate` now correctly displays `panelled={true}`