diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png new file mode 100644 index 00000000000..ed528607a65 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png index 523483bf0f4..db2b5d6758b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png new file mode 100644 index 00000000000..235f1b63ffc Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png new file mode 100644 index 00000000000..235f1b63ffc Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png new file mode 100644 index 00000000000..849bfb38ec7 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png index 44d2144f974..9c54c51967c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png index 62e155bec74..50f7c4030d0 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png index 5c276071414..06374effd2b 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png new file mode 100644 index 00000000000..b19c8eaf6d6 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Legacy_Children_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png index 9795a6b299f..278209f056a 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png new file mode 100644 index 00000000000..546a9b30701 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png new file mode 100644 index 00000000000..4d020781596 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png new file mode 100644 index 00000000000..4f37df7406e Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png index c8a4dccc67a..5ac9bd60532 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png index 3f46bcda282..0f4bb03bf6d 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png index e7cd9b6b11e..eeeace8a941 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png differ diff --git a/packages/eui/changelogs/upcoming/8044.md b/packages/eui/changelogs/upcoming/8044.md new file mode 100644 index 00000000000..a72e3306098 --- /dev/null +++ b/packages/eui/changelogs/upcoming/8044.md @@ -0,0 +1,3 @@ +- Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive UX: + - `rightSideItems` are no longer pushed to the side by wide `tabs` content + - `rightSideItems` now wrap more responsively at smaller container widths diff --git a/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index b9c78d34837..c7ca5bf8992 100644 --- a/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -10,7 +10,7 @@ exports[`EuiPageHeader is rendered 1`] = ` class="emotion-euiPageHeaderContent" >
Anything
@@ -26,10 +26,10 @@ exports[`EuiPageHeader props alignItems bottom is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

-
- -
-
- -
+ +
+
+
@@ -72,10 +68,10 @@ exports[`EuiPageHeader props alignItems center is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

-
- -
-
- -
+ +
+
+
@@ -118,10 +110,10 @@ exports[`EuiPageHeader props alignItems stretch is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

-
- -
-
- -
+ +
+
+
@@ -164,10 +152,10 @@ exports[`EuiPageHeader props alignItems top is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

-
- -
-
- -
+ +
+
+
@@ -210,10 +194,10 @@ exports[`EuiPageHeader props bottomBorder is rendered as extended 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >
@@ -228,10 +212,10 @@ exports[`EuiPageHeader props bottomBorder is rendered as true 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent-border-l" >
@@ -285,10 +269,10 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`] class="euiSpacer euiSpacer--s emotion-euiSpacer-s" />

+

+ Anything +

+
+
+
-
-

- Anything -

-
-
- - -
+ +
+
+
+
+
+
- + Tab 2 + +
@@ -396,10 +376,10 @@ exports[`EuiPageHeader props responsive is rendered as false 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >
@@ -414,10 +394,10 @@ exports[`EuiPageHeader props responsive is rendered as reverse 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >
@@ -433,10 +413,10 @@ exports[`EuiPageHeader props restrictWidth is rendered as custom 1`] = ` style="max-width: 100px;" >
@@ -452,10 +432,10 @@ exports[`EuiPageHeader props restrictWidth is rendered as true 1`] = ` style="max-width: 1200px;" >
diff --git a/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap index cf43138e637..15bd847b16c 100644 --- a/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap +++ b/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap @@ -7,10 +7,10 @@ exports[`EuiPageHeaderContent is rendered 1`] = ` data-test-subj="test subject string" >
@@ -21,10 +21,10 @@ exports[`EuiPageHeaderContent props alignItems bottom is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

-
- -
-
- -
+ +
+
+
@@ -63,10 +59,10 @@ exports[`EuiPageHeaderContent props alignItems center is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

-
- -
-
- -
+ +
+
+
@@ -105,10 +97,10 @@ exports[`EuiPageHeaderContent props alignItems stretch is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

-
- -
-
- -
+ +
+
+
@@ -147,10 +135,10 @@ exports[`EuiPageHeaderContent props alignItems top is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

-
- -
-
- -
+ +
+
+
@@ -228,10 +212,10 @@ exports[`EuiPageHeaderContent props breadcrumbs is rendered 1`] = ` class="euiSpacer euiSpacer--s emotion-euiSpacer-s" />
@@ -242,7 +226,7 @@ exports[`EuiPageHeaderContent props children is rendered 1`] = ` class="emotion-euiPageHeaderContent" >

Anything @@ -256,7 +240,7 @@ exports[`EuiPageHeaderContent props children is rendered 2`] = ` class="emotion-euiPageHeaderContent" >

Child
@@ -268,10 +252,10 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a class="euiPageHeaderContent emotion-euiPageHeaderContent-border" >

+ Child +
+
+
-
- Child -
-
- - -
+ +
+
+
+
+
+
- + Tab 2 + +
@@ -350,10 +330,10 @@ exports[`EuiPageHeaderContent props description is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

@@ -479,10 +459,10 @@ exports[`EuiPageHeaderContent props responsive is rendered as reverse 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >
@@ -493,31 +473,27 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >
-
- -
-
- -
+ +
+
+
@@ -529,33 +505,29 @@ exports[`EuiPageHeaderContent props rightSideItems is rendered with rightSideGro class="euiPageHeaderContent emotion-euiPageHeaderContent" >
-
- -
-
- -
+ +
+
+
@@ -567,10 +539,10 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = ` class="euiPageHeaderContent emotion-euiPageHeaderContent" >

= { control: 'select', options: ['center', 'bottom', 'top', 'stretch', undefined], }, + bottomBorder: { + control: 'select', + options: [true, false, undefined], + }, + responsive: { + control: 'select', + options: [true, false, 'reverse'], + }, }, args: { // Component defaults paddingSize: 'none', responsive: true, restrictWidth: false, - alignItems: undefined, - bottomBorder: false, }, }; hideStorybookControls(meta, ['aria-label']); @@ -44,7 +53,13 @@ export const Playground: Story = { pageTitle: 'Page title', iconType: 'logoKibana', description: 'Example of a description.', - bottomBorder: false, + children: ( + + ), rightSideItems: [ Add something, Do something, @@ -74,3 +89,78 @@ export const Playground: Story = { ], }, }; + +export const LegacyChildrenOnly: Story = { + parameters: { + controls: { + include: ['alignItems', 'responsive', 'bottomBorder', 'paddingSize'], + }, + }, + args: { + children: ( + <> + + +

Page title

+ + + + + Add something + + + + ), + }, +}; + +/** + * Visual regression tests + */ + +export const WrappingContent: Story = { + tags: ['vrt-only'], + args: { + pageTitle: 'Lots of wrapping content', + description: + 'Lorem ipsum odor amet, consectetuer adipiscing elit. Montes justo potenti per himenaeos non nascetur nulla taciti consequat. Curae blandit integer molestie quis taciti curabitur facilisi ullamcorper mi. Mus parturient ultrices lacus nascetur tellus scelerisque. Auctor senectus eu rhoncus eget laoreet nunc amet potenti penatibus. Mi ad iaculis diam feugiat egestas malesuada. Commodo a cras malesuada duis vel tempus per! Rhoncus montes aptent vitae efficitur eget ornare eu curae. Ut semper sed augue mattis proin imperdiet tempus.', + tabs: Array.from({ length: 7 }).map(() => ({ + label: 'Long loooong tab', + })), + rightSideItems: Array.from({ length: 5 }).map(() => ( + Lotsa buttons + )), + }, + render: (args) => ( + // Screenshot wrapping behavior +
+ +
+ ), +}; + +export const ResponsiveReverse: Story = { + tags: ['vrt-only'], + args: { + ...Playground.args, + responsive: 'reverse', + }, + render: (args) => ( + // Simulate smaller containers (e.g. flyouts) that restrict width but not the media query +
+ +
+ ), +}; + +export const ResponsiveFalse: Story = { + tags: ['vrt-only'], + ...ResponsiveReverse, + args: { + ...Playground.args, + responsive: false, + }, +}; diff --git a/packages/eui/src/components/page/page_header/page_header_content.styles.ts b/packages/eui/src/components/page/page_header/page_header_content.styles.ts index 838e0b02f73..81d91952c5e 100644 --- a/packages/eui/src/components/page/page_header/page_header_content.styles.ts +++ b/packages/eui/src/components/page/page_header/page_header_content.styles.ts @@ -31,24 +31,42 @@ export const euiPageHeaderContentStyles = ({ euiTheme }: UseEuiTheme) => ({ `, // Children only (legacy) expects EuiPageHeaderSections as children - flex: css` - flex-direction: row; - display: flex; - gap: ${euiTheme.size.base}; - justify-content: space-between; - `, + childrenOnly: { + flex: css` + flex-direction: row; + display: flex; + gap: ${euiTheme.size.base}; + justify-content: space-between; + `, + // Responsive (what to do at the smaller breakpoint) + responsive: css` + flex-direction: column; + align-items: flex-start; + `, + responsiveReverse: css` + flex-direction: column-reverse; + align-items: flex-start; + `, + }, - // Responsive (what to do at the smaller breakpoint) - responsive: css` - flex-direction: column; - align-items: flex-start; + euiPageHeaderContent__top: css` + container-type: inline-size; `, - responsiveReverse: css` - flex-direction: column-reverse; - align-items: flex-start; + euiPageHeaderContent__leftSideItems: css` + @container (max-width: ${euiTheme.breakpoint.m}px) { + ${logicalCSS('min-width', '50%')} + } + `, + euiPageHeaderContent__rightSideItems: css` + flex: 0 1 auto; + align-content: flex-start; + + @container (min-width: ${euiTheme.breakpoint.m}px) { + ${logicalCSS('max-width', '50%')} + justify-content: flex-end; + } `, - // Content euiPageHeaderContent__titleIcon: css` position: relative; ${logicalCSS('top', `-${euiTheme.size.xs}`)} diff --git a/packages/eui/src/components/page/page_header/page_header_content.tsx b/packages/eui/src/components/page/page_header/page_header_content.tsx index edf60e74099..744d5ad3343 100644 --- a/packages/eui/src/components/page/page_header/page_header_content.tsx +++ b/packages/eui/src/components/page/page_header/page_header_content.tsx @@ -16,7 +16,10 @@ import { EuiFlexGroup, EuiFlexItem, EuiFlexGroupProps } from '../../flex'; import { EuiSpacer } from '../../spacer'; import { EuiTitle, EuiTitleProps } from '../../title'; import { EuiText } from '../../text'; -import { useIsWithinBreakpoints, useEuiTheme } from '../../../services'; +import { + useIsWithinBreakpoints, + useEuiMemoizedStyles, +} from '../../../services'; import { EuiScreenReaderOnly } from '../../accessibility'; import { EuiBreadcrumbs, EuiBreadcrumbsProps } from '../../breadcrumbs'; import { @@ -102,7 +105,8 @@ export interface _EuiPageHeaderContentProps extends EuiPageHeaderContentLeft, _EuiPageRestrictWidth { /** - * The only option is on/off + * If not set, defaults to true if `tabs` are passed and render at the bottom of the page. + * Otherwise, defaults to false. */ bottomBorder?: boolean; /** @@ -122,8 +126,8 @@ export interface _EuiPageHeaderContentProps alignItems?: (typeof ALIGN_ITEMS)[number]; /** * Pass custom an array of content to this side usually up to 3 buttons. - * The first button should be primary, usually with `fill` and will be visually displayed as the last item, - * but first in the tab order + * The first button should be primary, usually with `fill`. At larger breakpoints, items will + * render from right to left, but will collapse vertically and render left to right on smaller mobile screens. */ rightSideItems?: ReactNode[]; /** @@ -170,10 +174,9 @@ export const EuiPageHeaderContent: FunctionComponent< !!responsive ); - const useTheme = useEuiTheme(); const classes = classNames('euiPageHeaderContent', className); - const pageHeaderStyles = euiPageHeaderStyles(useTheme); - const contentStyles = euiPageHeaderContentStyles(useTheme); + const pageHeaderStyles = useEuiMemoizedStyles(euiPageHeaderStyles); + const contentStyles = useEuiMemoizedStyles(euiPageHeaderContentStyles); const styles = setStyleForRestrictedPageWidth(restrictWidth, style); let paddingSides: LogicalSides = 'vertical'; @@ -210,12 +213,13 @@ export const EuiPageHeaderContent: FunctionComponent< ]; const childrenOnlyStyles = [ - contentStyles.flex, + contentStyles.childrenOnly.flex, contentStyles[alignItems || 'center'], - responsive === true && isResponsiveBreakpoint && contentStyles.responsive, - responsive === 'reverse' && - isResponsiveBreakpoint && - contentStyles.responsiveReverse, + isResponsiveBreakpoint && + responsive && + (responsive === 'reverse' + ? contentStyles.childrenOnly.responsiveReverse + : contentStyles.childrenOnly.responsive), ]; // Don't go any further if there's no other content than children @@ -313,10 +317,9 @@ export const EuiPageHeaderContent: FunctionComponent< ); let bottomContentNode; - if (childrenNode || (tabsNode && pageTitleNode)) { + if (tabsNode && pageTitleNode) { bottomContentNode = (
- {childrenNode} {pageTitleNode && tabsNode}
); @@ -332,6 +335,7 @@ export const EuiPageHeaderContent: FunctionComponent< <> {tabsNode} {descriptionNode} + {childrenNode} ); } else { @@ -339,9 +343,18 @@ export const EuiPageHeaderContent: FunctionComponent< <> {pageTitleNode} {descriptionNode} + {childrenNode} ); } + const leftSideFlexItem = ( + + {leftSideOrder} + + ); let rightSideFlexItem; if (rightSideItems && rightSideItems.length) { @@ -355,53 +368,54 @@ export const EuiPageHeaderContent: FunctionComponent< )); + const cssStyles = [ + contentStyles.euiPageHeaderContent__rightSideItems, + rightSideGroupProps?.css, + ]; + rightSideFlexItem = ( - - - {rightSideFlexItems} - - + + {rightSideFlexItems} + ); } - return alignItems === 'top' || isResponsiveBreakpoint ? ( + return (
{optionalBreadcrumbs} {isResponsiveBreakpoint && responsive === 'reverse' ? ( <> {rightSideFlexItem} - {leftSideOrder} + {leftSideFlexItem} ) : ( <> - {leftSideOrder} + {leftSideFlexItem} {rightSideFlexItem} )} {bottomContentNode}
- ) : ( -
- {optionalBreadcrumbs} - - - {leftSideOrder} - {bottomContentNode} - - {rightSideFlexItem} - -
); }; diff --git a/packages/eui/src/components/page_template/__snapshots__/page_template.test.tsx.snap b/packages/eui/src/components/page_template/__snapshots__/page_template.test.tsx.snap index 95a1ba11907..6ee2ef85931 100644 --- a/packages/eui/src/components/page_template/__snapshots__/page_template.test.tsx.snap +++ b/packages/eui/src/components/page_template/__snapshots__/page_template.test.tsx.snap @@ -100,7 +100,7 @@ exports[`EuiPageTemplate children renders all other types within the main EuiPag class="emotion-euiPageHeaderContent-l" >
A