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

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)
 

src-docs/src/views/breadcrumbs/breadcrumbs.js

@@ -13,7 +13,6 @@ export default () => {
     {
       text: 'Animals',
       href: '#',
-      color: 'primary',
       onClick: (e) => {
         e.preventDefault();
       },

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: <ResponsiveCustom />,
     },
+    {
+      title: 'Color for emphasis',
+      text: (
+        <>
+          <p>
+            Each breadcrumb extends the color options from{' '}
+            <Link to="/navigation/link">
+              <strong>EuiLink</strong>
+            </Link>{' '}
+            when either an <EuiCode>href</EuiCode> or <EuiCode>onClick</EuiCode>{' '}
+            is applied . You can change the default color of a breadcrumb to add
+            emphasis or indicate state like <EuiCode>{"'danger'"}</EuiCode> for
+            an error. However, use caution not to use color alone.
+          </p>
+        </>
+      ),
+      props: breadcrumpProps,
+      demo: <Color />,
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: colorSource,
+        },
+      ],
+    },
   ],
 };

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: (
+      <>
+        <EuiIcon type="alert" size="s" /> Boa constrictor
+      </>
+    ),
+    title: 'Boa constrictor has an error',
+    href: '#',
+    color: 'danger',
+    onClick: (e) => e.preventDefault(),
+  },
+  {
+    text: 'Edit',
+  },
+];
+
+export default () => <EuiBreadcrumbs breadcrumbs={breadcrumbs} />;

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,34 @@
+import React from 'react';
+import { requiredProps } from '../../../../src/test';
+
+import { EuiPageHeader, EuiButton } from '../../../../src/components';
+
+export default () => (
+  <EuiPageHeader
+    bottomBorder
+    pageTitle="Page title"
+    description="Example of a description."
+    breadcrumbs={[
+      {
+        text: 'Breadcrumb 1',
+        href: '#',
+        onClick: (e) => e.preventDefault(),
+      },
+      {
+        text: 'Breadcrumb 2',
+        href: '#',
+        onClick: (e) => e.preventDefault(),
+      },
+      {
+        text: 'Current',
+        href: '#',
+        onClick: (e) => e.preventDefault(),
+      },
+    ]}
+    rightSideItems={[
+      <EuiButton fill>Add something</EuiButton>,
+      <EuiButton>Do something</EuiButton>,
+    ]}
+    breadcrumbProps={requiredProps}
+  />
+);

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 () => (
+  <EuiPageHeader
+    bottomBorder
+    pageTitle="Page title"
+    description="Example of a description."
+    breadcrumbs={[
+      {
+        text: (
+          <>
+            <EuiIcon size="s" type="arrowLeft" /> Return
+          </>
+        ),
+        color: 'primary',
+        'aria-current': false,
+        href: '#',
+        onClick: (e) => e.preventDefault(),
+      },
+    ]}
+    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,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',
+      ]),
     },
   };
 };