diff --git a/CHANGELOG.md b/CHANGELOG.md index 148b6546c47..073b2645091 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ - Updated `EuiComboBox` to WAI-ARIA 1.2 pattern and improved keyboard navigation ([#5636](https://github.com/elastic/eui/pull/5636)) - Added `readOnly` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627)) +- Added support for supplying `breadcrumbs` and `breadcrumbProps` directly to `EuiPageHeader` ([#5634](https://github.com/elastic/eui/pull/5634)) +- Extended props of `EuiBreadcrumb` to include `HTMLElement` and `color` inherited from `EuiLink` ([#5634](https://github.com/elastic/eui/pull/5634)) ## [`49.0.0`](https://github.com/elastic/eui/tree/v49.0.0) diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs.js b/src-docs/src/views/breadcrumbs/breadcrumbs.js index fe8e9ac9e73..225f6be9ac4 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs.js @@ -13,7 +13,6 @@ export default () => { { text: 'Animals', href: '#', - color: 'primary', onClick: (e) => { e.preventDefault(); }, diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js index aa9428e7242..df01a1d5adb 100644 --- a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js +++ b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js @@ -25,6 +25,9 @@ import Max from './max'; import { EuiCallOut } from '../../../../src/components/call_out'; const maxSource = require('!!raw-loader!./max'); +import Color from './color'; +const colorSource = require('!!raw-loader!./color'); + const breadcrumpProps = { EuiBreadcrumbs, EuiBreadcrumb: BreadcrumbProps, @@ -241,5 +244,30 @@ export const BreadcrumbsExample = { ], demo: , }, + { + title: 'Color for emphasis', + text: ( + <> +

+ Each breadcrumb extends the color options from{' '} + + EuiLink + {' '} + when either an href or onClick{' '} + is applied . You can change the default color of a breadcrumb to add + emphasis or indicate state like {"'danger'"} for + an error. However, use caution not to use color alone. +

+ + ), + props: breadcrumpProps, + demo: , + source: [ + { + type: GuideSectionTypes.JS, + code: colorSource, + }, + ], + }, ], }; diff --git a/src-docs/src/views/breadcrumbs/color.tsx b/src-docs/src/views/breadcrumbs/color.tsx new file mode 100644 index 00000000000..44bbc61a348 --- /dev/null +++ b/src-docs/src/views/breadcrumbs/color.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import { EuiBreadcrumbs, EuiBreadcrumb, EuiIcon } from '../../../../src'; + +const breadcrumbs: EuiBreadcrumb[] = [ + { + text: 'Animals', + href: '#', + color: 'primary', + onClick: (e) => e.preventDefault(), + }, + { + text: 'Reptiles', + color: 'primary', + }, + { + text: ( + <> + Boa constrictor + + ), + title: 'Boa constrictor has an error', + href: '#', + color: 'danger', + onClick: (e) => e.preventDefault(), + }, + { + text: 'Edit', + }, +]; + +export default () => ; diff --git a/src-docs/src/views/page_header/page_header.tsx b/src-docs/src/views/page_header/page_header.tsx index b20247d11e5..166a51943e9 100644 --- a/src-docs/src/views/page_header/page_header.tsx +++ b/src-docs/src/views/page_header/page_header.tsx @@ -4,6 +4,7 @@ import { EuiPageHeader, EuiButton } from '../../../../src/components'; export default () => ( ( + e.preventDefault(), + }, + { + text: 'Breadcrumb 2', + href: '#', + onClick: (e) => e.preventDefault(), + }, + { + text: 'Current', + href: '#', + onClick: (e) => e.preventDefault(), + }, + ]} + rightSideItems={[ + Add something, + Do something, + ]} + breadcrumbProps={requiredProps} + /> +); diff --git a/src-docs/src/views/page_header/page_header_breadcrumbs_return.tsx b/src-docs/src/views/page_header/page_header_breadcrumbs_return.tsx new file mode 100644 index 00000000000..3dd640f1674 --- /dev/null +++ b/src-docs/src/views/page_header/page_header_breadcrumbs_return.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { EuiPageHeader, EuiButton, EuiIcon } from '../../../../src/components'; + +export default () => ( + + Return + + ), + color: 'primary', + 'aria-current': false, + href: '#', + onClick: (e) => e.preventDefault(), + }, + ]} + rightSideItems={[ + Add something, + Do something, + ]} + /> +); diff --git a/src-docs/src/views/page_header/page_header_custom.tsx b/src-docs/src/views/page_header/page_header_custom.tsx index f1642afe595..72eea4ddbb8 100644 --- a/src-docs/src/views/page_header/page_header_custom.tsx +++ b/src-docs/src/views/page_header/page_header_custom.tsx @@ -7,7 +7,7 @@ import { } from '../../../../src/components'; export default () => ( - +

Page title

diff --git a/src-docs/src/views/page_header/page_header_example.js b/src-docs/src/views/page_header/page_header_example.js index bdd87823076..90ac08d10d1 100644 --- a/src-docs/src/views/page_header/page_header_example.js +++ b/src-docs/src/views/page_header/page_header_example.js @@ -7,6 +7,7 @@ import { EuiCode, EuiPageHeader, EuiPageHeaderSection, + EuiText, } from '../../../../src/components'; import { pageHeaderConfig } from './playground'; @@ -20,9 +21,13 @@ import PageHeaderTabsTitle from './page_header_tabs_title'; const pageHeaderTabsTitleSource = require('!!raw-loader!./page_header_tabs_title'); import PageHeaderCustom from './page_header_custom'; -import { EuiText } from '../../../../src/components/text'; const pageHeaderCustomSource = require('!!raw-loader!./page_header_custom'); +import PageBreadcrumbs from './page_header_breadcrumbs'; +const pageBreadcrumbsSource = require('!!raw-loader!./page_header_breadcrumbs'); +import PageBreadcrumbsReturn from './page_header_breadcrumbs_return'; +const pageBreadcrumbsReturnSource = require('!!raw-loader!./page_header_breadcrumbs_return'); + export const PageHeaderExample = { title: 'Page header', intro: ( @@ -76,14 +81,6 @@ export const PageHeaderExample = { ), demo: , props: { EuiPageHeader }, - snippet: `Button 1, - Button 2 - ]} -/>`, }, { title: 'Tabs in the page header', @@ -113,14 +110,6 @@ export const PageHeaderExample = { ), demo: , props: { EuiPageHeader }, - snippet: ``, }, { source: [ @@ -143,14 +132,45 @@ export const PageHeaderExample = { ), demo: , props: { EuiPageHeader }, - snippet: ``, + }, + { + title: 'Breadcrumbs in the page header', + source: [ + { + type: GuideSectionTypes.JS, + code: pageBreadcrumbsSource, + }, + ], + text: ( + <> +

+ Breadcrumbs are useful for + tracking in-page flows that{' '} + are not part of the entire application architecture + . To make this easy EuiPageHeader provides a{' '} + breadcrumbs prop that accepts the same + configuration as EuiBreadrumbs.breadcrumbs. +

+ + ), + demo: , + props: { EuiPageHeader }, + }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: pageBreadcrumbsReturnSource, + }, + ], + text: ( +

+ A common pattern is to use a single breadcrumb to return the user to a + listing page from which the current page was navigated to. +

+ ), + demo: , + props: { EuiPageHeader }, }, { title: 'Customizing the page header', diff --git a/src-docs/src/views/page_header/page_header_tabs.tsx b/src-docs/src/views/page_header/page_header_tabs.tsx index 9398ac7ef4f..48ab179dfca 100644 --- a/src-docs/src/views/page_header/page_header_tabs.tsx +++ b/src-docs/src/views/page_header/page_header_tabs.tsx @@ -4,6 +4,7 @@ import { EuiPageHeader } from '../../../../src/components'; export default () => ( ( }, ]} description="This description should be describing the current page as depicted by the current tab. It has grow set to false to ensure a readable line-length." - bottomBorder /> ); diff --git a/src-docs/src/views/page_header/page_header_tabs_title.tsx b/src-docs/src/views/page_header/page_header_tabs_title.tsx index 35b44e08bcd..e6cf99ad1b7 100644 --- a/src-docs/src/views/page_header/page_header_tabs_title.tsx +++ b/src-docs/src/views/page_header/page_header_tabs_title.tsx @@ -4,6 +4,7 @@ import { EuiPageHeader, EuiButton } from '../../../../src/components'; export default () => ( ( Add something, Do something, ]} - bottomBorder /> ); diff --git a/src-docs/src/views/page_header/playground.js b/src-docs/src/views/page_header/playground.js index 6dd833b84de..763dee42265 100644 --- a/src-docs/src/views/page_header/playground.js +++ b/src-docs/src/views/page_header/playground.js @@ -8,6 +8,7 @@ import { EuiButton, EuiTabs, EuiImage, + EuiBreadcrumbs, } from '../../../../src/components/'; import { propUtilityForPlayground, @@ -17,6 +18,16 @@ import { createOptionalEnum, } from '../../services/playground'; +const breadcrumbs = `[ + { + text: 'Breadcrumb', + href: '#', + }, + { + text: 'Current', + }, +]`; + const tabs = `[ { label: 'Tab 1', @@ -73,6 +84,14 @@ export const pageHeaderConfig = () => { }, }); + propsToUse.breadcrumbs = simulateFunction({ + ...propsToUse.breadcrumbs, + custom: { + ...propsToUse.breadcrumbs.custom, + value: breadcrumbs, + }, + }); + propsToUse.tabs = simulateFunction({ ...propsToUse.tabs, custom: { @@ -97,13 +116,24 @@ export const pageHeaderConfig = () => { EuiButton, EuiTabs, EuiImage, + EuiBreadcrumbs, }, imports: { '@elastic/eui': { - named: ['EuiPageHeader', 'EuiButton', 'EuiTabs', 'EuiImage'], + named: [ + 'EuiPageHeader', + 'EuiButton', + 'EuiTabs', + 'EuiImage', + 'EuiBreadcrumbs', + ], }, }, - customProps: generateCustomProps(['rightSideItems', 'tabs']), + customProps: generateCustomProps([ + 'rightSideItems', + 'tabs', + 'breadcrumbs', + ]), }, }; }; diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap index 03e6b45122a..19afa698a2d 100644 --- a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap +++ b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap @@ -13,7 +13,7 @@ exports[`EuiBreadcrumbs is rendered 1`] = ` class="euiBreadcrumb" > Boa constrictor @@ -101,7 +102,7 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = ` class="euiBreadcrumb" > Boa constrictor @@ -189,7 +191,7 @@ exports[`EuiBreadcrumbs props max doesn't break when max exceeds the number of b class="euiBreadcrumb" > Boa constrictor @@ -328,7 +331,7 @@ exports[`EuiBreadcrumbs props max renders all items with null 1`] = ` class="euiBreadcrumb" > Boa constrictor @@ -422,7 +426,7 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = ` class="euiBreadcrumb" > Boa constrictor @@ -510,7 +515,7 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = ` class="euiBreadcrumb" > Boa constrictor @@ -643,7 +649,7 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = ` class="euiBreadcrumb" > Boa constrictor diff --git a/src/components/breadcrumbs/breadcrumbs.test.tsx b/src/components/breadcrumbs/breadcrumbs.test.tsx index 709f2708bac..f0f7a118f7b 100644 --- a/src/components/breadcrumbs/breadcrumbs.test.tsx +++ b/src/components/breadcrumbs/breadcrumbs.test.tsx @@ -10,9 +10,9 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test'; -import { EuiBreadcrumbs } from './breadcrumbs'; +import { EuiBreadcrumbs, EuiBreadcrumb } from './breadcrumbs'; -const breadcrumbs = [ +const breadcrumbs: EuiBreadcrumb[] = [ { text: 'Animals', href: '#', @@ -22,6 +22,7 @@ const breadcrumbs = [ }, 'data-test-subj': 'breadcrumbsAnimals', className: 'customClass', + color: 'primary', }, { text: 'Metazoans', @@ -46,6 +47,7 @@ const breadcrumbs = [ }, { text: 'Boa constrictor', + title: 'Boa constrictor has an error', href: '#', truncate: true, }, diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx index b064fa7401d..8f0f08ecb0a 100644 --- a/src/components/breadcrumbs/breadcrumbs.tsx +++ b/src/components/breadcrumbs/breadcrumbs.tsx @@ -9,6 +9,7 @@ import React, { AriaAttributes, FunctionComponent, + HTMLAttributes, MouseEventHandler, ReactNode, useEffect, @@ -19,7 +20,7 @@ import classNames from 'classnames'; import { CommonProps } from '../common'; import { useEuiI18n } from '../i18n'; import { EuiInnerText } from '../inner_text'; -import { EuiLink } from '../link'; +import { EuiLink, EuiLinkColor } from '../link'; import { EuiPopover } from '../popover'; import { EuiIcon } from '../icon'; import { throttle } from '../../services'; @@ -35,22 +36,27 @@ export type EuiBreadcrumbResponsiveMaxCount = { [key in EuiBreakpointSize]?: number; }; -export type EuiBreadcrumb = CommonProps & { - /** - * Visible label of the breadcrumb - */ - text: ReactNode; - href?: string; - onClick?: MouseEventHandler; - /** - * Force a max-width on the breadcrumb text - */ - truncate?: boolean; - /** - * Override the existing `aria-current` which defaults to `page` for the last breadcrumb - */ - 'aria-current'?: AriaAttributes['aria-current']; -}; +export type EuiBreadcrumb = HTMLAttributes & + CommonProps & { + href?: string; + onClick?: MouseEventHandler; + /** + * Visible label of the breadcrumb + */ + text: ReactNode; + /** + * Force a max-width on the breadcrumb text + */ + truncate?: boolean; + /** + * Accepts any EuiLink `color` when rendered as one (has `href` or `onClick`) + */ + color?: EuiLinkColor; + /** + * Override the existing `aria-current` which defaults to `page` for the last breadcrumb + */ + 'aria-current'?: AriaAttributes['aria-current']; + }; export type EuiBreadcrumbsProps = CommonProps & { /** diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index 4acd61718aa..3cbfc30c111 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -201,6 +201,41 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
+ +
diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap index 5520d7379c8..ec4f9a2f440 100644 --- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap @@ -184,6 +184,55 @@ exports[`EuiPageHeaderContent props alignItems top is rendered 1`] = `
`; +exports[`EuiPageHeaderContent props breadcrumbs is rendered 1`] = ` +
+ +
+
+
+
+
+`; + exports[`EuiPageHeaderContent props children is rendered 1`] = `
{ + e.preventDefault(); + console.log('You clicked Animals'); + }, + 'data-test-subj': 'breadcrumbsAnimals', + className: 'customClass', + color: 'primary', + }, + { + text: 'Edit', + }, +]; + export const rightSideItems: EuiPageHeaderProps['rightSideItems'] = [ , , @@ -51,6 +69,8 @@ describe('EuiPageHeader', () => { description="Description" rightSideItems={rightSideItems} rightSideGroupProps={{ responsive: true, ...requiredProps }} + breadcrumbs={breadcrumbs} + breadcrumbProps={requiredProps} >

Anything

diff --git a/src/components/page/page_header/page_header.tsx b/src/components/page/page_header/page_header.tsx index 6211d7bf78d..e6574eae86d 100644 --- a/src/components/page/page_header/page_header.tsx +++ b/src/components/page/page_header/page_header.tsx @@ -11,7 +11,7 @@ import classNames from 'classnames'; import { CommonProps, keysOf } from '../../common'; import { EuiPageHeaderContent, - EuiPageHeaderContentProps, + _EuiPageHeaderContentProps, } from './page_header_content'; import { _EuiPageRestrictWidth, @@ -27,20 +27,21 @@ const paddingSizeToClassNameMap = { export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); -export type EuiPageHeaderProps = CommonProps & - HTMLAttributes & - EuiPageHeaderContentProps & - _EuiPageRestrictWidth & { - /** - * Adjust the padding. - * When using this setting it's best to be consistent throughout all similar usages - */ - paddingSize?: typeof PADDING_SIZES[number]; - /** - * Adds a bottom border to separate it from the content after - */ - bottomBorder?: boolean; - }; +export interface EuiPageHeaderProps + extends CommonProps, + HTMLAttributes, + _EuiPageHeaderContentProps, + _EuiPageRestrictWidth { + /** + * Adjust the padding. + * When using this setting it's best to be consistent throughout all similar usages + */ + paddingSize?: typeof PADDING_SIZES[number]; + /** + * Adds a bottom border to separate it from the content after + */ + bottomBorder?: boolean; +} export const EuiPageHeader: FunctionComponent = ({ className, @@ -61,6 +62,8 @@ export const EuiPageHeader: FunctionComponent = ({ iconProps, tabs, tabsProps, + breadcrumbs, + breadcrumbProps, description, rightSideItems, rightSideGroupProps, @@ -109,6 +112,8 @@ export const EuiPageHeader: FunctionComponent = ({ description={description} rightSideItems={rightSideItems} rightSideGroupProps={rightSideGroupProps} + breadcrumbs={breadcrumbs} + breadcrumbProps={breadcrumbProps} > {children} diff --git a/src/components/page/page_header/page_header_content.test.tsx b/src/components/page/page_header/page_header_content.test.tsx index fc72ced4a6c..049441b3602 100644 --- a/src/components/page/page_header/page_header_content.test.tsx +++ b/src/components/page/page_header/page_header_content.test.tsx @@ -15,6 +15,7 @@ import { EuiPageHeaderContent, EuiPageHeaderContentProps, } from './page_header_content'; +import { EuiBreadcrumb } from '../../breadcrumbs'; const tabs: EuiPageHeaderContentProps['tabs'] = [ { @@ -31,6 +32,23 @@ const rightSideItems: EuiPageHeaderContentProps['rightSideItems'] = [ , ]; +const breadcrumbs: EuiBreadcrumb[] = [ + { + text: 'Animals', + href: '#', + onClick: (e: React.MouseEvent) => { + e.preventDefault(); + console.log('You clicked Animals'); + }, + 'data-test-subj': 'breadcrumbsAnimals', + className: 'customClass', + color: 'primary', + }, + { + text: 'Edit', + }, +]; + describe('EuiPageHeaderContent', () => { test('is rendered', () => { const component = render(); @@ -96,6 +114,19 @@ describe('EuiPageHeaderContent', () => { }); }); + describe('breadcrumbs', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + describe('children', () => { test('is rendered', () => { const component = render( diff --git a/src/components/page/page_header/page_header_content.tsx b/src/components/page/page_header/page_header_content.tsx index 993a5aa3051..0d92ac5d313 100644 --- a/src/components/page/page_header/page_header_content.tsx +++ b/src/components/page/page_header/page_header_content.tsx @@ -18,6 +18,7 @@ import { EuiTitle, EuiTitleProps } from '../../title'; import { EuiText } from '../../text'; import { useIsWithinBreakpoints } from '../../../services/hooks'; import { EuiScreenReaderOnly } from '../../accessibility'; +import { EuiBreadcrumbs, EuiBreadcrumbsProps } from '../../breadcrumbs'; export const ALIGN_ITEMS = ['top', 'bottom', 'center', 'stretch'] as const; @@ -29,7 +30,7 @@ type Tab = EuiTabProps & { label: ReactNode; }; -export type EuiPageHeaderContentTitle = { +export interface EuiPageHeaderContentTitle { /** * Wrapped in an `H1` so choose appropriately. * A simple string is best @@ -47,9 +48,17 @@ export type EuiPageHeaderContentTitle = { * Additional EuiIcon props to apply to the optional icon */ iconProps?: Partial>; -}; + /** + * Optional array breadcrumbs that render before the `pageTitle` + */ + breadcrumbs?: EuiBreadcrumbsProps['breadcrumbs']; + /** + * Adjust the props of [EuiBreadcrumbs](#/navigation/breadcrumbs) + */ + breadcrumbProps?: Partial>; +} -export type EuiPageHeaderContentTabs = { +export interface EuiPageHeaderContentTabs { /** * In-app navigation presented as large borderless tabs. * Accepts an array of `EuiTab` objects; @@ -60,50 +69,54 @@ export type EuiPageHeaderContentTabs = { * Extends `EuiTabs` */ tabsProps?: Omit; -}; +} /** * The left side can either be a title with optional description and/or icon; * Or a list of tabs, * Or a custom node */ -type EuiPageHeaderContentLeft = EuiPageHeaderContentTitle & - EuiPageHeaderContentTabs & { - /** - * Position is dependent on existing with a `pageTitle` or `tabs` - * Automatically get wrapped in a single paragraph tag inside an EuiText block - */ - description?: string | ReactNode; - }; +interface EuiPageHeaderContentLeft + extends EuiPageHeaderContentTitle, + EuiPageHeaderContentTabs { + /** + * Position is dependent on existing with a `pageTitle` or `tabs` + * Automatically get wrapped in a single paragraph tag inside an EuiText block + */ + description?: string | ReactNode; +} + +export interface _EuiPageHeaderContentProps extends EuiPageHeaderContentLeft { + /** + * Set to false if you don't want the children to stack at small screen sizes. + * Set to `reverse` to display the right side content first for the sake of hierarchy (like global time) + */ + responsive?: boolean | 'reverse'; + /** + * Vertical alignment of the left and right side content; + * Default is `middle` for custom content, but `top` for when `pageTitle` or `tabs` are included + */ + 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 + */ + rightSideItems?: ReactNode[]; + /** + * Additional EuiFlexGroup props to pass to the container of the `rightSideItems` + */ + rightSideGroupProps?: Partial; + /** + * Custom children will be rendered before the `tabs` unless no `pageTitle` is present, then it will be the last item + */ + children?: ReactNode; +} -export type EuiPageHeaderContentProps = CommonProps & - HTMLAttributes & - EuiPageHeaderContentLeft & { - /** - * Set to false if you don't want the children to stack at small screen sizes. - * Set to `reverse` to display the right side content first for the sake of hierarchy (like global time) - */ - responsive?: boolean | 'reverse'; - /** - * Vertical alignment of the left and right side content; - * Default is `middle` for custom content, but `top` for when `pageTitle` or `tabs` are included - */ - 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 - */ - rightSideItems?: ReactNode[]; - /** - * Additional EuiFlexGroup props to pass to the container of the `rightSideItems` - */ - rightSideGroupProps?: Partial; - /** - * Custom children will be rendered before the `tabs` unless no `pageTitle` is present, then it will be the last item - */ - children?: ReactNode; - }; +export interface EuiPageHeaderContentProps + extends CommonProps, + HTMLAttributes, + _EuiPageHeaderContentProps {} export const EuiPageHeaderContent: FunctionComponent = ({ className, @@ -114,6 +127,8 @@ export const EuiPageHeaderContent: FunctionComponent tabs, tabsProps, description, + breadcrumbs, + breadcrumbProps, alignItems = 'top', responsive = true, rightSideItems, @@ -140,6 +155,13 @@ export const EuiPageHeaderContent: FunctionComponent ); } + const optionalBreadcrumbs = breadcrumbs ? ( + <> + + + + ) : undefined; + let pageTitleNode; if (pageTitle) { const icon = iconType ? ( @@ -277,6 +299,7 @@ export const EuiPageHeaderContent: FunctionComponent return alignItems === 'top' || isResponsiveBreakpoint ? (
+ {optionalBreadcrumbs}