[EuiPageTemplate] Allow panelled={true} (#7044)

elastic · Aug 8, 2023 · 299f44e · 299f44e
1 parent a107059
commit 299f44e
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 23 deletions.
diff --git 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<boolean>(true);
-  const [showPanelled, setShowPanelled] = useState<boolean>(true);
+  const [showPanelled, setShowPanelled] = useState<boolean | undefined>(
+    toggle.panelledGroup ? undefined : true
+  );
   const [showSidebar, setShowSidebar] = useState<boolean>(
     Boolean(show.sidebar)
   );
@@ -288,16 +294,59 @@ export const PageDemo: FunctionComponent<
           />
         </EuiFlexItem>
       )}
-      {toggle.panelled && (
+      {toggle.panelledSwitch && (
         <EuiFlexItem grow={false}>
           <EuiSwitch
             label="Panelled"
-            checked={showPanelled}
+            checked={!!showPanelled}
             onChange={() => setShowPanelled((showing) => !showing)}
             compressed
           />
         </EuiFlexItem>
       )}
+      {toggle.panelledGroup && (
+        <EuiFlexItem grow={false}>
+          <div>
+            Panelled:&emsp;
+            <EuiButtonGroup
+              options={[
+                {
+                  id: 'radioTrue',
+                  label: 'true',
+                },
+                {
+                  id: 'radioFalse',
+                  label: 'false',
+                },
+                {
+                  id: 'radioUndefined',
+                  label: 'undefined',
+                },
+              ]}
+              idSelected={
+                showPanelled === true
+                  ? 'radioTrue'
+                  : showPanelled === false
+                  ? 'radioFalse'
+                  : 'radioUndefined'
+              }
+              onChange={(id) =>
+                setShowPanelled(
+                  id === 'radioTrue'
+                    ? true
+                    : id === 'radioFalse'
+                    ? false
+                    : undefined
+                )
+              }
+              name="panelledGroup"
+              legend="Panelled"
+              buttonSize="compressed"
+              color="primary"
+            />
+          </div>
+        </EuiFlexItem>
+      )}
     </EuiFlexGroup>
   );
 

diff --git 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 = () => (
           <PageDemo
             slug="full-page"
             toggle={{
-              panelled: true,
+              panelledGroup: true,
               restrictedWidth: true,
             }}
             show={{
@@ -300,7 +300,7 @@ export const PageTemplateExample = () => (
           <PageDemo
             slug="sidebar"
             toggle={{
-              panelled: true,
+              panelledSwitch: true,
               sidebar: true,
               border: true,
             }}
@@ -410,7 +410,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
@@ -12,6 +12,18 @@ exports[`EuiPageTemplate _EuiPageInnerProps is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiPageTemplate _EuiPageInnerProps renders as panelled 1`] = `
+<div
+  class="euiPageTemplate emotion-euiPageOuter-row-grow"
+  style="min-block-size: max(460px, 100vh); padding-block-start: 0;"
+>
+  <div
+    class="emotion-euiPageInner-panelled"
+    id="EuiPageTemplateInner_generated-id"
+  />
+</div>
+`;
+
 exports[`EuiPageTemplate _EuiPageOuterProps is rendered 1`] = `
 <div
   class="euiPageTemplate emotion-euiPageOuter-column-grow"

diff --git a/src/components/page_template/page_template.test.tsx b/src/components/page_template/page_template.test.tsx
@@ -32,17 +32,27 @@ describe('EuiPageTemplate', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('_EuiPageInnerProps is rendered', () => {
-    const { container } = render(
-      <EuiPageTemplate
-        component="div"
-        contentBorder={true}
-        panelled={false}
-        mainProps={{ id: 'customID', className: 'customClassName' }}
-      />
-    );
+  describe('_EuiPageInnerProps', () => {
+    it('is rendered', () => {
+      const { container } = render(
+        <EuiPageTemplate
+          component="div"
+          contentBorder={true}
+          panelled={false}
+          mainProps={{ id: 'customID', className: 'customClassName' }}
+        />
+      );
 
-    expect(container.firstChild).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it('renders as panelled', () => {
+      const { container } = render(
+        <EuiPageTemplate component="div" panelled />
+      );
+
+      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
@@ -157,8 +157,7 @@ export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps> = ({
     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
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- `EuiPageTemplate` now correctly displays `panelled={true}`
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- `EuiPageTemplate` now correctly displays `panelled={true}`