From a69621c9fa403943e536fe3d40b7d5853230d32f Mon Sep 17 00:00:00 2001
From: Isha Kasliwal <ikasliwal@salesforce.com>
Date: Tue, 26 Sep 2017 17:20:23 -0700
Subject: [PATCH] feat(breadcrumbs): Added overflow menu breadcrumb variant

---
 ui/components/breadcrumbs/_doc.scss        |  3 +
 ui/components/breadcrumbs/base/_index.scss |  4 ++
 ui/components/breadcrumbs/base/example.jsx | 67 ++++++++++++++++++++--
 ui/components/breadcrumbs/index.react.jsx  | 12 +++-
 4 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/ui/components/breadcrumbs/_doc.scss b/ui/components/breadcrumbs/_doc.scss
index 27b5c74059..1e33b68f4c 100644
--- a/ui/components/breadcrumbs/_doc.scss
+++ b/ui/components/breadcrumbs/_doc.scss
@@ -7,6 +7,9 @@
  * utility. When you add the `.slds-breadcrumb` class, the separators are
  * automatically generated.
  *
+ * **Overflow Menu Variant**
+ * The overflow menu breadcrumbs variant is a composition of the overflow menu with actions example of the menus component and breadcrumbs component. To implement this, include the overflow menu as the first `<li>` in the breadcrumb component. In order to vertically align all of the breadcrumb items to the center, add the `.slds-grid_vertical-align-center` class to the `<ol>`.
+ *
  * #### Accessibility
  *
  * Place the breadcrumb in a `nav` element with `role="navigation"`.
diff --git a/ui/components/breadcrumbs/base/_index.scss b/ui/components/breadcrumbs/base/_index.scss
index 70378e3219..1ba33ffa5d 100644
--- a/ui/components/breadcrumbs/base/_index.scss
+++ b/ui/components/breadcrumbs/base/_index.scss
@@ -48,4 +48,8 @@
       }
     }
   }
+
+  .slds-dropdown-trigger {
+    margin-right: $spacing-x-small;
+  }
 }
diff --git a/ui/components/breadcrumbs/base/example.jsx b/ui/components/breadcrumbs/base/example.jsx
index a08b8afb2a..a3196181a0 100644
--- a/ui/components/breadcrumbs/base/example.jsx
+++ b/ui/components/breadcrumbs/base/example.jsx
@@ -4,10 +4,67 @@
 import React from 'react';
 import BreadCrumbs from '../index.react';
 const { Crumb } = BreadCrumbs;
+import { ButtonIcon } from '../../button-icons/base/example';
+import { Trigger } from '../../menus/dropdown/example';
+import { Menu } from '../../menus/dropdown/example';
+import { MenuList } from '../../menus/dropdown/example';
+import { MenuItem } from '../../menus/dropdown/example';
 
-export default (
-  <BreadCrumbs>
-    <Crumb href="javascript:void(0);">Parent Entity</Crumb>
-    <Crumb href="javascript:void(0);">Parent Record Name</Crumb>
-  </BreadCrumbs>
+const moreIcon = (
+  <ButtonIcon
+    className="slds-button_icon-border-filled slds-button_icon-x-small"
+    sprite="utility"
+    symbol="threedots"
+    assistiveText="Show More"
+    aria-haspopup="true"
+    title="Show More"
+  />
 );
+
+let BreadcrumbMenu = props => (
+  <Trigger className="slds-is-open" triggerIcon={moreIcon}>
+    <Menu className="slds-dropdown_left slds-dropdown_actions">
+      <MenuList>
+        <MenuItem tabIndex="0">Menu Item One</MenuItem>
+        <MenuItem>Menu Item Two</MenuItem>
+        <MenuItem>Menu Item Three</MenuItem>
+      </MenuList>
+    </Menu>
+  </Trigger>
+);
+
+export let examples = [
+  {
+    id: 'base',
+    label: 'Base',
+    element: (
+      <BreadCrumbs>
+        <Crumb className="slds-text-title_caps" href="javascript:void(0);">
+          Parent Entity
+        </Crumb>
+        <Crumb className="slds-text-title_caps" href="javascript:void(0);">
+          Parent Record Name
+        </Crumb>
+      </BreadCrumbs>
+    )
+  },
+  {
+    id: 'overflow-breadcrumbs',
+    label: 'Breadcrumbs with Overflow Menu',
+    element: (
+      <div style={{ height: '250px' }}>
+        <BreadCrumbs listClassNames="slds-grid_vertical-align-center">
+          <Crumb hasMenu>
+            <BreadcrumbMenu />
+          </Crumb>
+          <Crumb className="slds-text-title_caps" href="javascript:void(0);">
+            Parent Entity
+          </Crumb>
+          <Crumb className="slds-text-title_caps" href="javascript:void(0);">
+            Parent Record Name
+          </Crumb>
+        </BreadCrumbs>
+      </div>
+    )
+  }
+];
diff --git a/ui/components/breadcrumbs/index.react.jsx b/ui/components/breadcrumbs/index.react.jsx
index a118277271..f2776d8265 100644
--- a/ui/components/breadcrumbs/index.react.jsx
+++ b/ui/components/breadcrumbs/index.react.jsx
@@ -2,10 +2,11 @@
 // Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 import React from 'react';
+import classNames from 'classnames';
 
 const Crumb = props => (
-  <li className="slds-breadcrumb__item slds-text-title_caps">
-    <a href={props.href}>{props.children}</a>
+  <li className={classNames('slds-breadcrumb__item', props.className)}>
+    {props.hasMenu ? props.children : <a href={props.href}>{props.children}</a>}
   </li>
 );
 
@@ -13,7 +14,12 @@ Crumb.propTypes = { href: React.PropTypes.string };
 
 const BreadCrumbs = props => (
   <nav {...props} role="navigation" aria-label="Breadcrumbs">
-    <ol className="slds-breadcrumb slds-list_horizontal slds-wrap">
+    <ol
+      className={classNames(
+        'slds-breadcrumb slds-list_horizontal slds-wrap',
+        props.listClassNames
+      )}
+    >
       {props.children}
     </ol>
   </nav>