[EuiPageHeaderContent] Ensure restrictWidth applies to children only usage

packages/eui/changelogs/upcoming/8965.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `restrictWidth` not applying to `EuiPageHeaderContent` when only `children` are used as content
+

packages/eui/src/components/page/page_header/page_header_content.stories.tsx

@@ -8,17 +8,49 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
 
 import { hideStorybookControls } from '../../../../.storybook/utils';
 import { EuiButton } from '../../button';
 import { EuiCallOut } from '../../call_out';
 import { EuiTitle } from '../../title';
-import { EuiPageHeaderSection } from './page_header_section';
+import { EuiFlexGroup, EuiFlexItem } from '../../flex';
+import { EuiBreadcrumbs } from '../../breadcrumbs';
+import { EuiIcon } from '../../icon';
+import { EuiSpacer } from '../../spacer';
+import { EuiTab, EuiTabs } from '../../tabs';
+import { EuiText } from '../../text';
+
 import {
   EuiPageHeaderContent,
   EuiPageHeaderContentProps,
 } from './page_header_content';
 
+const tabs = [
+  {
+    label: 'Tab 1',
+    isSelected: true,
+  },
+  {
+    label: 'Tab 2',
+  },
+];
+
+const breadcrumbs = [
+  {
+    text: 'Breadcrumb 1',
+    href: '#',
+  },
+  {
+    text: 'Breadcrumb 2',
+    href: '#',
+  },
+  {
+    text: 'Current',
+    href: '#',
+  },
+];
+
 const meta: Meta<EuiPageHeaderContentProps> = {
   title: 'Layout/EuiPage/EuiPageHeader/EuiPageHeaderContent',
   component: EuiPageHeaderContent,
@@ -35,6 +67,10 @@ const meta: Meta<EuiPageHeaderContentProps> = {
       control: 'select',
       options: [true, false, 'reverse'],
     },
+    restrictWidth: {
+      control: 'select',
+      options: [true, false, 500, 900, 1800, '25%', '50%', '75%'],
+    },
   },
   args: {
     // Component defaults
@@ -60,55 +96,65 @@ export const Playground: Story = {
       <EuiButton fill>Add something</EuiButton>,
       <EuiButton>Do something</EuiButton>,
     ],
-    tabs: [
-      {
-        label: 'Tab 1',
-        isSelected: true,
-      },
-      {
-        label: 'Tab 2',
-      },
-    ],
-    breadcrumbs: [
-      {
-        text: 'Breadcrumb 1',
-        href: '#',
-      },
-      {
-        text: 'Breadcrumb 2',
-        href: '#',
-      },
-      {
-        text: 'Current',
-        href: '#',
-      },
-    ],
+    tabs,
+    breadcrumbs,
   },
 };
 
 export const LegacyChildrenOnly: Story = {
   parameters: {
     controls: {
-      include: ['alignItems', 'responsive', 'bottomBorder', 'paddingSize'],
+      include: [
+        'alignItems',
+        'responsive',
+        'bottomBorder',
+        'paddingSize',
+        'restrictWidth',
+      ],
     },
   },
   args: {
     children: (
-      <>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>Page title</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>
-          <EuiButton
-            fill
-            size="s" // Better demonstrates alignItems
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiBreadcrumbs breadcrumbs={breadcrumbs} />
+        <EuiFlexGroup alignItems="stretch">
+          <EuiFlexItem>
+            <EuiFlexGroup>
+              <EuiFlexGroup gutterSize="m" alignItems="center">
+                <EuiIcon type="logoKibana" size="original" />
+                <EuiTitle size="l">
+                  <h1>Page title</h1>
+                </EuiTitle>
+              </EuiFlexGroup>
+            </EuiFlexGroup>
+            <EuiSpacer size="l" />
+            <EuiText size="m">Example of a description.</EuiText>
+            <EuiSpacer size="l" />
+            <EuiCallOut
+              size="s"
+              iconType="info"
+              title="Example of custom children"
+            />
+          </EuiFlexItem>
+          <EuiFlexGroup
+            gutterSize="m"
+            responsive={false}
+            wrap
+            css={css`
+              flex: 0 1 auto;
+            `}
           >
-            Add something
-          </EuiButton>
-        </EuiPageHeaderSection>
-      </>
+            <EuiButton fill>Add something</EuiButton>
+            <EuiButton>Do something</EuiButton>
+          </EuiFlexGroup>
+        </EuiFlexGroup>
+        <EuiSpacer size="s" />
+        <EuiTabs size="l">
+          {tabs.map((tab) => (
+            <EuiTab isSelected={tab.isSelected}>{tab.label}</EuiTab>
+          ))}
+        </EuiTabs>
+      </EuiFlexGroup>
     ),
   },
 };

packages/eui/src/components/page/page_header/page_header_content.tsx

@@ -225,7 +225,7 @@ export const EuiPageHeaderContent: FunctionComponent<
   // Don't go any further if there's no other content than children
   if (onlyChildren) {
     return (
-      <div css={cssStyles} {...rest}>
+      <div css={cssStyles} style={styles} {...rest}>
         <div css={childrenOnlyStyles}>{children}</div>
       </div>
     );

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

@@ -98,6 +98,7 @@ exports[`EuiPageTemplate children renders all other types within the main EuiPag
     >
       <div
         class="emotion-euiPageHeaderContent-l"
+        style="max-width: 1200px;"
       >
         <div
           class="css-acb1mh-flex-center"

packages/eui/src/components/page_template/page_template.stories.tsx

@@ -16,9 +16,13 @@ import {
 import { EuiSkeletonText } from '../skeleton';
 import { EuiButton } from '../button';
 import { EuiText } from '../text';
+import { PAGE_DIRECTIONS } from './outer/page_outer';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiSpacer } from '../spacer';
+import { EuiIcon } from '../icon';
+import { EuiTitle } from '../title';
 
 import { EuiPageTemplate, EuiPageTemplateProps } from './page_template';
-import { PAGE_DIRECTIONS } from './outer/page_outer';
 
 const headerContent = (
   <EuiPageTemplate.Header
@@ -29,6 +33,31 @@ const headerContent = (
     tabs={[{ label: 'Tab 1', isSelected: true }, { label: 'Tab 2' }]}
   />
 );
+
+const customHeaderContent = (
+  <EuiPageTemplate.Header>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={2}>
+            <EuiFlexGroup gutterSize="m">
+              <EuiIcon type="logoKibana" size="original" />
+              <EuiTitle size="l">
+                <h1>Page Title</h1>
+              </EuiTitle>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton>Button</EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiSpacer size="l" />
+        <EuiText size="m">Example of a description.</EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiPageTemplate.Header>
+);
+
 const sectionContent = (
   <>
     <EuiPageTemplate.Section grow={false}>
@@ -47,6 +76,7 @@ const sectionContent = (
     </EuiPageTemplate.Section>
   </>
 );
+
 const sidebarContent = (
   <EuiPageTemplate.Sidebar>
     <EuiSkeletonText lines={10} contentAriaLabel="Page sidebar example text" />
@@ -128,6 +158,7 @@ export const Playground: Story = {
         'Without header',
         'Without bottom bar',
         'With empty prompt content',
+        'With custom header content',
       ],
       mapping: {
         'With everything': [
@@ -145,6 +176,7 @@ export const Playground: Story = {
           emptyPromptContent,
           bottomBarContent,
         ],
+        'With custom header content': [customHeaderContent, sectionContent],
       },
     },
   },