Show all breadcrumbs in a popover

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added a popover option for `EuiBreadcrumbs` to display all items when a `max` is set. ([#2342](https://github.com/elastic/eui/pull/2342))
 - Add `compressed` option to `buttonSize` prop of EuiButtonGroup ([#2343](https://github.com/elastic/eui/pull/2343))
 
 **Bug fixes**

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

@@ -47,6 +47,15 @@ const maxSnippet = `<EuiBreadcrumbs
 />
 `;
 
+import Popover from './popover';
+const popoverSource = require('!!raw-loader!./popover');
+const popoverHtml = renderToHtml(Popover);
+const popoverSnippet = `<EuiBreadcrumbs
+  breadcrumbs={breadcrumbs}
+  showPopover
+/>
+`;
+
 export const BreadcrumbsExample = {
   title: 'Breadcrumbs',
   sections: [
@@ -152,5 +161,30 @@ export const BreadcrumbsExample = {
       snippet: maxSnippet,
       demo: <Max />,
     },
+    {
+      title: 'Show the full list in a popover',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: popoverSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: popoverHtml,
+        },
+      ],
+      text: (
+        <p>
+          When the breadcrumbs need to be truncated, but you wish to still allow
+          users to navigate to any item in the list, you can use the{' '}
+          <EuiCode>showPopover</EuiCode> prop. When used with the{' '}
+          <EuiCode>max</EuiCode> prop, the entire list of breadcrumbs will be
+          rendered into an <EuiCode>EuiPopover</EuiCode>.
+        </p>
+      ),
+      props: { EuiBreadcrumbs },
+      snippet: popoverSnippet,
+      demo: <Popover />,
+    },
   ],
 };

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

@@ -0,0 +1,63 @@
+import React, { Fragment } from 'react';
+
+import { EuiBreadcrumbs } from '../../../../src/components';
+
+export default () => {
+  const breadcrumbs = [
+    {
+      text: 'root',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked root');
+      },
+      'data-test-subj': 'breadcrumbsroot',
+    },
+    {
+      text: 'src',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked src');
+      },
+    },
+    {
+      text: 'components',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked components');
+      },
+    },
+    {
+      text: 'button',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked button');
+      },
+    },
+    {
+      text: 'button_empty',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked button_empty');
+      },
+    },
+    {
+      text: 'button_empty.tsx',
+    },
+  ];
+
+  return (
+    <Fragment>
+      <EuiBreadcrumbs
+        breadcrumbs={breadcrumbs}
+        truncate={false}
+        max={4}
+        showMaxPopover
+      />
+    </Fragment>
+  );
+};

src/components/breadcrumbs/_breadcrumbs.scss

@@ -1,5 +1,9 @@
 .euiBreadcrumbs {
   @include euiFontSizeS;
+
+  &.euiBreadcrumbs--wrap {
+    flex-wrap: wrap;
+  }
 }
 
 .euiBreadcrumb {
@@ -29,6 +33,16 @@
   background: $euiColorLightShade;
 }
 
+.euiBreadcrumbBadge {
+  height: $euiSize;
+  margin-top: -$euiSizeM / 2;
+  background-color: transparentize($euiColorDarkestShade, .85);
+
+  .euiBadge__content {
+    margin-top: -$euiSizeXS / 2;
+  }
+}
+
 /**
  * 1. Can't target separator vs breadcrumb with -of-type because it takes
  *    the dom element into consideration too and there could be divs, or spans, or a's
@@ -96,6 +110,10 @@
     // Align with flex versus inline-block misaligns the separator slightly
     transform: translateY(0) rotate(15deg);
   }
+
+  .euiBreadcrumbBadge {
+    margin-top: -$euiSizeXS / 2;
+  }
 }
 
 .euiBreadcrumb--truncate {

src/components/breadcrumbs/breadcrumbs.js

@@ -1,10 +1,13 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { EuiBadge } from '../badge';
+import { EuiI18n } from '../i18n';
 import { EuiLink } from '../link';
+import { EuiPopover } from '../popover';
 
-const limitBreadcrumbs = (breadcrumbs, max) => {
+const limitBreadcrumbs = (breadcrumbs, max, showMaxPopover, allBreadcrumbs) => {
   const breadcrumbsAtStart = [];
   const breadcrumbsAtEnd = [];
   const limit = Math.min(max, breadcrumbs.length);
@@ -30,20 +33,58 @@ const limitBreadcrumbs = (breadcrumbs, max) => {
     }
   }
 
+  const EuiBreadcrumbCollapsed = () => {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+    const ellipsisButton = (
+      <EuiI18n token="euiBreadcrumbs.ariaLabel" default="Show all breadcrumbs">
+        {ariaLabel => (
+          <EuiBadge
+            aria-label={ariaLabel}
+            onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+            onClickAriaLabel={ariaLabel}
+            className="euiBreadcrumb euiBreadcrumbBadge">
+            &hellip;
+          </EuiBadge>
+        )}
+      </EuiI18n>
+    );
+
+    if (showMaxPopover) {
+      return (
+        <Fragment>
+          <EuiPopover
+            id="showAllBreadcrumbsPopover"
+            button={ellipsisButton}
+            isOpen={isPopoverOpen}
+            closePopover={() => setIsPopoverOpen(false)}>
+            <EuiBreadcrumbs
+              breadcrumbs={allBreadcrumbs}
+              responsive={false}
+              truncate={false}
+              max={0}
+            />
+          </EuiPopover>
+          <EuiBreadcrumbSeparator />
+        </Fragment>
+      );
+    } else {
+      return (
+        <Fragment>
+          <div className="euiBreadcrumb euiBreadcrumb--collapsed">&hellip;</div>
+          <EuiBreadcrumbSeparator />
+        </Fragment>
+      );
+    }
+  };
+
   if (max < breadcrumbs.length) {
     breadcrumbsAtStart.push(<EuiBreadcrumbCollapsed key="collapsed" />);
   }
 
   return [...breadcrumbsAtStart, ...breadcrumbsAtEnd];
 };
 
-const EuiBreadcrumbCollapsed = () => (
-  <Fragment>
-    <div className="euiBreadcrumb euiBreadcrumb--collapsed">&#8230;</div>
-    <EuiBreadcrumbSeparator />
-  </Fragment>
-);
-
 const EuiBreadcrumbSeparator = () => <div className="euiBreadcrumbSeparator" />;
 
 export const EuiBreadcrumbs = ({
@@ -52,6 +93,7 @@ export const EuiBreadcrumbs = ({
   responsive,
   truncate,
   max,
+  showMaxPopover,
   ...rest
 }) => {
   const breadcrumbElements = breadcrumbs.map((breadcrumb, index) => {
@@ -83,6 +125,7 @@ export const EuiBreadcrumbs = ({
           {text}
         </span>
       );
+      // if limitedBreadcrumbs && displayHidden
     } else {
       link = (
         <EuiLink
@@ -112,7 +155,7 @@ export const EuiBreadcrumbs = ({
   });
 
   const limitedBreadcrumbs = max
-    ? limitBreadcrumbs(breadcrumbElements, max)
+    ? limitBreadcrumbs(breadcrumbElements, max, showMaxPopover, breadcrumbs)
     : breadcrumbElements;
 
   const classes = classNames('euiBreadcrumbs', className, {
@@ -148,6 +191,12 @@ EuiBreadcrumbs.propTypes = {
    */
   max: PropTypes.number,
 
+  /**
+   * Allows the entire list of breadcrumbs to be shown when
+   * a `max` is set and the ellipsis is clicked in responsive mode.
+   */
+  showMaxPopover: PropTypes.bool,
+
   /**
    * The array of individual breadcrumbs, takes the following props.
    * `text` (node) (required): visible label of the breadcrumb,
@@ -167,5 +216,6 @@ EuiBreadcrumbs.propTypes = {
 EuiBreadcrumbs.defaultProps = {
   responsive: true,
   truncate: true,
+  showMaxPopover: false,
   max: 5,
 };