Show all breadcrumbs in a popover (#2342)

* Conditionally changing the ellipsis to a button. * Adding hook for popover state. * Showing breadcrumbs in a popover * Adding an aria-label * Changelog entry * Updating doc example text. * Using a badge style for the clickable ellipsis * PR review changes * Removing an unused selector * Update src/components/breadcrumbs/breadcrumbs.js Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> * Removing unnecessary ID * Only displaying the hidden items in the popover * Updating tests, removing rogue comment * Copy changes * Update src/components/breadcrumbs/breadcrumbs.js Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com> * Updating a class name. * Refining the method of displaying hidden breadcrumbs.
elastic · Sep 24, 2019 · 1076aeb · 1076aeb
1 parent 6bc63d1
commit 1076aeb
Show file tree

Hide file tree

Showing 7 changed files with 317 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added a `showMaxPopover` option for `EuiBreadcrumbs` to display all items when a `max` is set. ([#2342](https://github.com/elastic/eui/pull/2342))
 - Added `data-test-subj` support for basic and in-memory tables' actions ([#2353](https://github.com/elastic/eui/pull/2353))
 
 **Bug fixes**

diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/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 hidden items 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>showMaxPopover</EuiCode> prop. When used with the{' '}
+          <EuiCode>max</EuiCode> prop, the hidden breadcrumbs will be rendered
+          into an <EuiCode>EuiPopover</EuiCode>.
+        </p>
+      ),
+      props: { EuiBreadcrumbs },
+      snippet: popoverSnippet,
+      demo: <Popover />,
+    },
   ],
 };
diff --git a/src-docs/src/views/breadcrumbs/popover.js b/src-docs/src/views/breadcrumbs/popover.js
@@ -0,0 +1,135 @@
+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: 'item 2',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked src');
+      },
+    },
+    {
+      text: 'item 3',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 3');
+      },
+    },
+    {
+      text: 'item 4',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 4');
+      },
+    },
+    {
+      text: 'item 5',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 5');
+      },
+    },
+    {
+      text: 'item 6',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 6');
+      },
+    },
+    {
+      text: 'item 7',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 7');
+      },
+    },
+    {
+      text: 'item 8',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 8');
+      },
+    },
+    {
+      text: 'item 9',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 9');
+      },
+    },
+    {
+      text: 'item 10',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 10');
+      },
+    },
+    {
+      text: 'item 11',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 11');
+      },
+    },
+    {
+      text: 'item 12',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 12');
+      },
+    },
+    {
+      text: 'item 13',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 13');
+      },
+    },
+    {
+      text: 'item 14',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked item 14');
+      },
+    },
+    {
+      text: 'button_empty.tsx',
+    },
+  ];
+
+  return (
+    <Fragment>
+      <EuiBreadcrumbs
+        breadcrumbs={breadcrumbs}
+        truncate={false}
+        max={5}
+        showMaxPopover
+      />
+    </Fragment>
+  );
+};
diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.js.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.js.snap
@@ -195,6 +195,57 @@ exports[`EuiBreadcrumbs props max renders 3 items 1`] = `
 </nav>
 `;
 
+exports[`EuiBreadcrumbs props render a popover is rendered 1`] = `
+<nav
+  aria-label="breadcrumb"
+  class="euiBreadcrumbs euiBreadcrumbs--truncate euiBreadcrumbs--responsive"
+>
+  <button
+    class="euiLink euiLink--subdued euiBreadcrumb"
+    title="Animals"
+    type="button"
+  >
+    Animals
+  </button>
+  <div
+    class="euiBreadcrumbSeparator"
+  />
+  <div
+    class="euiPopover euiPopover--anchorDownCenter"
+  >
+    <div
+      class="euiPopover__anchor"
+    >
+      <button
+        aria-label="Show all breadcrumbs"
+        class="euiBadge euiBadge-isClickable euiBadge--iconLeft euiBadge--default euiBreadcrumb euiBreadcrumb__collapsedBadge"
+        title="View hidden breadcrumbs"
+      >
+        <span
+          class="euiBadge__content"
+        >
+          <span
+            class="euiBadge__text"
+          >
+            …
+          </span>
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="euiBreadcrumbSeparator"
+  />
+  <span
+    aria-current="page"
+    class="euiBreadcrumb euiBreadcrumb--last"
+    title="Edit"
+  >
+    Edit
+  </span>
+</nav>
+`;
+
 exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
 <nav
   aria-label="breadcrumb"

diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -29,6 +29,23 @@
   background: $euiColorLightShade;
 }
 
+.euiBreadcrumbs__inPopover {
+  .euiBreadcrumb--last.euiLink.euiLink--text {
+    font-weight: $euiFontWeightRegular;
+    color: $euiColorDarkShade;
+  }
+}
+
+.euiBreadcrumb__collapsedBadge {
+  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 +113,10 @@
     // Align with flex versus inline-block misaligns the separator slightly
     transform: translateY(0) rotate(15deg);
   }
+
+  .euiBreadcrumbBadge {
+    margin-top: -$euiSizeXS / 2;
+  }
 }
 
 .euiBreadcrumb--truncate {