feat(breadcrumb): add overflow menu support

carbon-design-system · Oct 19, 2020 · f486cf1 · f486cf1
1 parent 5bba369
commit f486cf1
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git a/packages/components/src/components/breadcrumb/_breadcrumb.scss b/packages/components/src/components/breadcrumb/_breadcrumb.scss
@@ -37,6 +37,10 @@
 
   .#{$prefix}--breadcrumb-item .#{$prefix}--link:visited {
     color: $link-01;
+
+    &:hover {
+      color: $hover-primary-text;
+    }
   }
 
   .#{$prefix}--breadcrumb-item::after {
@@ -70,6 +74,69 @@
     }
   }
 
+  // Overflow Menu overrides
+  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu {
+    position: relative;
+    width: rem(20px);
+    height: rem(20px);
+
+    &:focus {
+      outline: 1px solid $focus;
+    }
+
+    &:hover {
+      background: transparent;
+    }
+
+    // Used to mimic link underline
+    &::after {
+      position: absolute;
+      top: calc(100% - 3px);
+      width: 1rem;
+      height: 1px;
+      background: $hover-primary-text;
+      opacity: 0;
+      transition: opacity $duration--fast-01 motion(standard, productive);
+      content: '';
+    }
+  }
+
+  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu:hover::after {
+    opacity: 1;
+  }
+
+  .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .#{$prefix}--breadcrumb-item .#{$prefix}--overflow-menu__icon {
+    position: relative;
+    margin-top: rem(8px);
+    transform: rotate(90deg);
+    fill: $link-01;
+  }
+
+  .#{$prefix}--breadcrumb-item
+    .#{$prefix}--overflow-menu:hover
+    .#{$prefix}--overflow-menu__icon {
+    fill: $hover-primary-text;
+  }
+
+  $caret-size: rem(6.875px);
+  .#{$prefix}--breadcrumb-menu-options.#{$prefix}--overflow-menu-options::after {
+    top: calc(#{$caret-size * (-1)});
+    left: rem(13px);
+    width: 0;
+    height: 0;
+    margin: 0 auto;
+    background: transparent;
+    border-right: $caret-size solid transparent;
+    border-bottom: $caret-size solid $field-01;
+    border-left: $caret-size solid transparent;
+  }
+
   // Skeleton State
   .#{$prefix}--breadcrumb.#{$prefix}--skeleton .#{$prefix}--link {
     @include skeleton;

diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js
@@ -11,6 +11,8 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb';
+import OverflowMenu from '../OverflowMenu';
+import OverflowMenuItem from '../OverflowMenuItem';
 import mdx from './Breadcrumb.mdx';
 
 export default {
@@ -38,6 +40,28 @@ export const breadcrumb = () => (
   </Breadcrumb>
 );
 
+export const breadcrumbWithOverflowMenu = () => (
+  <Breadcrumb>
+    <BreadcrumbItem>
+      <a href="/#">Breadcrumb 1</a>
+    </BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
+    <BreadcrumbItem>
+      <OverflowMenu>
+        <OverflowMenuItem itemText="Option 1" id="two" />
+        <OverflowMenuItem
+          itemText="Option 2 is an example of a really long string and how we recommend handling this"
+          requireTitle
+        />
+        <OverflowMenuItem itemText="Option 3" />
+        <OverflowMenuItem itemText="Option 4" />
+        <OverflowMenuItem itemText="Danger option" hasDivider isDelete />
+      </OverflowMenu>
+    </BreadcrumbItem>
+    <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
+  </Breadcrumb>
+);
+
 export const skeleton = () => <BreadcrumbSkeleton />;
 
 const props = () => ({

diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.js b/packages/react/src/components/Breadcrumb/BreadcrumbItem.js
@@ -30,6 +30,21 @@ const BreadcrumbItem = ({
     [customClassName]: !!customClassName,
   });
 
+  if (
+    children.type &&
+    children.type.displayName !== undefined &&
+    children.type.displayName === 'OverflowMenu'
+  ) {
+    return (
+      <li className={className} {...rest}>
+        {React.cloneElement(children, {
+          menuOptionsClass: `${prefix}--breadcrumb-menu-options`,
+          menuOffset: { top: 10, left: 60 },
+        })}
+      </li>
+    );
+  }
+
   if (typeof children === 'string' && href) {
     return (
       <li className={className} {...rest}>