[EuiBreadcrumb] Extend HTMLElement and EuiLink.color & [EuiPageHeader] Adding breadcrumbs as an option

src-docs/src/views/page_header/page_header.tsx

@@ -4,6 +4,7 @@ import { EuiPageHeader, EuiButton } from '../../../../src/components';
 
 export default () => (
   <EuiPageHeader
+    bottomBorder
     pageTitle="Page title"
     iconType="logoKibana"
     description="This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content."

src-docs/src/views/page_header/page_header_breadcrumbs.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { EuiPageHeader, EuiButton } from '../../../../src/components';
+
+export default () => (
+  <EuiPageHeader
+    bottomBorder
+    pageTitle="Page title"
+    description="Example of a description."
+    breadcrumbs={[
+      {
+        text: 'Breadcrumb 1',
+        href: '#',
+      },
+      {
+        text: 'Breadcrumb 2',
+        href: '#',
+      },
+      {
+        text: 'Current',
+        href: '#',
+      },
+    ]}
+    rightSideItems={[
+      <EuiButton fill>Add something</EuiButton>,
+      <EuiButton>Do something</EuiButton>,
+    ]}
+  />
+);

src-docs/src/views/page_header/page_header_breadcrumbs_return.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { EuiPageHeader, EuiButton, EuiIcon } from '../../../../src/components';
+
+export default () => (
+  <EuiPageHeader
+    bottomBorder
+    pageTitle="Page title"
+    description="Example of a description."
+    breadcrumbs={[
+      {
+        text: (
+          <>
+            <EuiIcon size="s" type="arrowLeft" /> Return
+          </>
+        ),
+        href: '#',
+        color: 'primary',
+        'aria-current': false,
+      },
+    ]}
+    rightSideItems={[
+      <EuiButton fill>Add something</EuiButton>,
+      <EuiButton>Do something</EuiButton>,
+    ]}
+  />
+);

src-docs/src/views/page_header/page_header_custom.tsx

@@ -7,7 +7,7 @@ import {
 } from '../../../../src/components';
 
 export default () => (
-  <EuiPageHeader alignItems="center">
+  <EuiPageHeader alignItems="center" bottomBorder>
     <EuiPageHeaderSection>
       <EuiTitle size="l">
         <h1>Page title</h1>

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: <PageHeader />,
       props: { EuiPageHeader },
-      snippet: `<EuiPageHeader
-  pageTitle="Page title"
-  description="Example of a description."
-  rightSideItems={[
-    <EuiButton fill>Button 1</EuiButton>,
-    <EuiButton>Button 2</EuiButton>
-  ]}
-/>`,
     },
     {
       title: 'Tabs in the page header',
@@ -113,14 +110,6 @@ export const PageHeaderExample = {
       ),
       demo: <PageHeaderTabsTitle />,
       props: { EuiPageHeader },
-      snippet: `<EuiPageHeader
-  pageTitle="Page title"
-  tabs={[
-    { label:"Tab 1", isSelected: true },
-    { label:"Tab 2" }
-  ]}
-  bottomBorder
-/>`,
     },
     {
       source: [
@@ -143,14 +132,45 @@ export const PageHeaderExample = {
       ),
       demo: <PageHeaderTabs />,
       props: { EuiPageHeader },
-      snippet: `<EuiPageHeader
-  tabs={[
-    { label:"Tab 1", isSelected: true },
-    { label:"Tab 2" }
-  ]}
-  bottomBorder
-  description="Example of a description."
-/>`,
+    },
+    {
+      title: 'Breadcrumbs in the page header',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: pageBreadcrumbsSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            <Link to="/navigation/breadcrumbs">Breadcrumbs</Link> are useful for
+            tracking in-page flows that{' '}
+            <strong>are not part of the entire application architecture</strong>
+            . To make this easy <strong>EuiPageHeader</strong> provides a{' '}
+            <EuiCode>breadcrumbs</EuiCode> prop that accepts the same
+            configuration as <EuiCode>EuiBreadrumbs.breadcrumbs</EuiCode>.
+          </p>
+        </>
+      ),
+      demo: <PageBreadcrumbs />,
+      props: { EuiPageHeader },
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: pageBreadcrumbsReturnSource,
+        },
+      ],
+      text: (
+        <p>
+          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.
+        </p>
+      ),
+      demo: <PageBreadcrumbsReturn />,
+      props: { EuiPageHeader },
     },
     {
       title: 'Customizing the page header',

src-docs/src/views/page_header/page_header_tabs.tsx

@@ -4,6 +4,7 @@ import { EuiPageHeader } from '../../../../src/components';
 
 export default () => (
   <EuiPageHeader
+    bottomBorder
     tabs={[
       {
         label: 'Tab 1',
@@ -14,6 +15,5 @@ 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
   />
 );

src-docs/src/views/page_header/page_header_tabs_title.tsx

@@ -4,6 +4,7 @@ import { EuiPageHeader, EuiButton } from '../../../../src/components';
 
 export default () => (
   <EuiPageHeader
+    bottomBorder
     pageTitle="Page title"
     tabs={[
       {
@@ -18,6 +19,5 @@ export default () => (
       <EuiButton fill>Add something</EuiButton>,
       <EuiButton>Do something</EuiButton>,
     ]}
-    bottomBorder
   />
 );

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,13 @@ export const pageHeaderConfig = () => {
     },
   });
 
+  propsToUse.breadcrumbs = simulateFunction({
+    ...propsToUse.breadcrumbs,
+    custom: {
+      value: breadcrumbs,
+    },
+  });
+
   propsToUse.tabs = simulateFunction({
     ...propsToUse.tabs,
     custom: {
@@ -97,13 +115,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',
+      ]),
     },
   };
 };

src/components/breadcrumbs/breadcrumbs.tsx

@@ -19,7 +19,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';
@@ -36,16 +36,17 @@ export type EuiBreadcrumbResponsiveMaxCount = {
 };
 
 export type EuiBreadcrumb = CommonProps & {
+  href?: string;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
   /**
    * Visible label of the breadcrumb
    */
   text: ReactNode;
-  href?: string;
-  onClick?: MouseEventHandler<HTMLAnchorElement>;
   /**
    * Force a max-width on the breadcrumb text
    */
   truncate?: boolean;
+  color?: EuiLinkColor;
   /**
    * Override the existing `aria-current` which defaults to `page` for the last breadcrumb
    */

src/components/page/page_header/page_header.tsx

@@ -61,6 +61,8 @@ export const EuiPageHeader: FunctionComponent<EuiPageHeaderProps> = ({
   iconProps,
   tabs,
   tabsProps,
+  breadcrumbs,
+  breadcrumbProps,
   description,
   rightSideItems,
   rightSideGroupProps,
@@ -109,6 +111,8 @@ export const EuiPageHeader: FunctionComponent<EuiPageHeaderProps> = ({
         description={description}
         rightSideItems={rightSideItems}
         rightSideGroupProps={rightSideGroupProps}
+        breadcrumbs={breadcrumbs}
+        breadcrumbProps={breadcrumbProps}
       >
         {children}
       </EuiPageHeaderContent>

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;
 
@@ -47,6 +48,14 @@ export type EuiPageHeaderContentTitle = {
    * Additional EuiIcon props to apply to the optional icon
    */
   iconProps?: Partial<Omit<EuiIconProps, 'type'>>;
+  /**
+   * Optional breadcrumbs
+   */
+  breadcrumbs?: EuiBreadcrumbsProps['breadcrumbs'];
+  /**
+   * Adjust the props of EuiBreadcrumbs
+   */
+  breadcrumbProps?: EuiBreadcrumbsProps;
 };
 
 export type EuiPageHeaderContentTabs = {
@@ -114,6 +123,8 @@ export const EuiPageHeaderContent: FunctionComponent<EuiPageHeaderContentProps>
   tabs,
   tabsProps,
   description,
+  breadcrumbs,
+  breadcrumbProps,
   alignItems = 'top',
   responsive = true,
   rightSideItems,
@@ -140,6 +151,14 @@ export const EuiPageHeaderContent: FunctionComponent<EuiPageHeaderContentProps>
     );
   }
 
+  const optionalBreadcrumbs =
+    breadcrumbs || breadcrumbProps ? (
+      <>
+        <EuiBreadcrumbs breadcrumbs={breadcrumbs!} {...breadcrumbProps} />
+        <EuiSpacer size="s" />
+      </>
+    ) : undefined;
+
   let pageTitleNode;
   if (pageTitle) {
     const icon = iconType ? (
@@ -277,6 +296,7 @@ export const EuiPageHeaderContent: FunctionComponent<EuiPageHeaderContentProps>
 
   return alignItems === 'top' || isResponsiveBreakpoint ? (
     <div className={classes} {...rest}>
+      {optionalBreadcrumbs}
       <EuiFlexGroup
         responsive={!!responsive}
         className="euiPageHeaderContent__top"