feat(breadcrumb): introduce overflow menu

src/components/breadcrumb/breadcrumb-overflow-menu.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { customElement, html } from 'lit-element';
+import settings from 'carbon-components/es/globals/js/settings';
+import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16';
+import BXOverflowMenu from '../overflow-menu/overflow-menu';
+import styles from './breadcrumb.scss';
+
+const { prefix } = settings;
+
+/**
+ * Overflow menu in breadcrumb.
+ * @element bx-breadcrumb-overflow-menu
+ */
+@customElement(`${prefix}-breadcrumb-overflow-menu`)
+class BXBreadcrumbOverflowMenu extends BXOverflowMenu {
+  render() {
+    return html`
+      <slot name="icon">
+        ${OverflowMenuHorizontal16({
+          class: `${prefix}--overflow-menu__icon`,
+        })}
+      </slot>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default BXBreadcrumbOverflowMenu;

src/components/breadcrumb/breadcrumb-story-angular.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -36,3 +36,27 @@ export default Object.assign(baseStory, {
     }),
   ],
 });
+
+export const withOverflowMenu = () => ({
+  template: `
+    <bx-breadcrumb>
+      <bx-breadcrumb-item>
+        <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
+      </bx-breadcrumb-item>
+      <bx-breadcrumb-item>
+        <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
+      </bx-breadcrumb-item>
+      <bx-breadcrumb-item>
+        <bx-breadcrumb-overflow-menu>
+          <bx-overflow-menu-body>
+            <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
+            <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
+          </bx-overflow-menu-body>
+        </bx-breadcrumb-overflow-menu>
+      </bx-breadcrumb-item>
+      <bx-breadcrumb-item>
+        <bx-breadcrumb-link href="/#" aria-current="page">Breadcrumb 3</bx-breadcrumb-link>
+      </bx-breadcrumb-item>
+    </bx-breadcrumb>
+  `,
+});

src/components/breadcrumb/breadcrumb-story-react.tsx

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -16,6 +16,12 @@ import BXBreadcrumb from 'carbon-web-components/es/components-react/breadcrumb/b
 import BXBreadcrumbItem from 'carbon-web-components/es/components-react/breadcrumb/breadcrumb-item';
 // @ts-ignore
 import BXBreadcrumbLink from 'carbon-web-components/es/components-react/breadcrumb/breadcrumb-link';
+// @ts-ignore
+import BXBreadcrumbOverflowMenu from 'carbon-web-components/es/components-react/breadcrumb/breadcrumb-overflow-menu';
+// @ts-ignore
+import BXOverflowMenuBody from 'carbon-web-components/es/components-react/overflow-menu/overflow-menu-body';
+// @ts-ignore
+import BXOverflowMenuItem from 'carbon-web-components/es/components-react/overflow-menu/overflow-menu-item';
 import { Default as baseDefault } from './breadcrumb-story';
 
 export { default } from './breadcrumb-story';
@@ -28,6 +34,14 @@ export const Default = () => (
     <BXBreadcrumbItem>
       <BXBreadcrumbLink href="/#">Breadcrumb 2</BXBreadcrumbLink>
     </BXBreadcrumbItem>
+    <BXBreadcrumbItem>
+      <BXBreadcrumbOverflowMenu>
+        <BXOverflowMenuBody>
+          <BXOverflowMenuItem>Option 1</BXOverflowMenuItem>
+          <BXOverflowMenuItem>Option 2</BXOverflowMenuItem>
+        </BXOverflowMenuBody>
+      </BXBreadcrumbOverflowMenu>
+    </BXBreadcrumbItem>
     <BXBreadcrumbItem>
       <BXBreadcrumbLink href="/#" aria-current="page">
         Breadcrumb 3

src/components/breadcrumb/breadcrumb-story-vue.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -28,3 +28,27 @@ export const Default = () => ({
 });
 
 Object.assign(Default, baseDefault);
+
+export const withOverflowMenu = () => ({
+  template: `
+    <bx-breadcrumb>
+      <bx-breadcrumb-item>
+        <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
+      </bx-breadcrumb-item>
+      <bx-breadcrumb-item>
+        <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
+      </bx-breadcrumb-item>
+      <bx-breadcrumb-item>
+        <bx-breadcrumb-overflow-menu>
+          <bx-overflow-menu-body>
+            <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
+            <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
+          </bx-overflow-menu-body>
+        </bx-breadcrumb-overflow-menu>
+      </bx-breadcrumb-item>
+      <bx-breadcrumb-item>
+        <bx-breadcrumb-link href="/#" aria-current="page">Breadcrumb 3</bx-breadcrumb-link>
+      </bx-breadcrumb-item>
+    </bx-breadcrumb>
+  `,
+});

src/components/breadcrumb/breadcrumb-story.mdx

@@ -39,6 +39,30 @@ import 'carbon-web-components/es/components/breadcrumb/index.js';
 </bx-breadcrumb>
 ```
 
+### HTML (with overflow-menu)
+
+```html
+<bx-breadcrumb>
+  <bx-breadcrumb-item>
+    <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
+  </bx-breadcrumb-item>
+  <bx-breadcrumb-item>
+    <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
+  </bx-breadcrumb-item>
+  <bx-breadcrumb-item>
+    <bx-breadcrumb-overflow-menu>
+      <bx-overflow-menu-body>
+        <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
+        <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
+      </bx-overflow-menu-body>
+    </bx-breadcrumb-overflow-menu>
+  </bx-breadcrumb-item>
+  <bx-breadcrumb-item>
+    <bx-breadcrumb-link href="/#" aria-current="page">Breadcrumb 3</bx-breadcrumb-link>
+  </bx-breadcrumb-item>
+</bx-breadcrumb>
+```
+
 ## `<bx-breadcrumb-link>` attributes, properties and events
 
 <Props of="bx-breadcrumb-link" />

src/components/breadcrumb/breadcrumb-story.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2021
+ * Copyright IBM Corp. 2019, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,6 +11,7 @@ import { html } from 'lit-element';
 import './breadcrumb';
 import './breadcrumb-item';
 import './breadcrumb-link';
+import './breadcrumb-overflow-menu';
 import storyDocs from './breadcrumb-story.mdx';
 
 export const Default = () =>
@@ -36,3 +37,27 @@ export default {
     ...storyDocs.parameters,
   },
 };
+
+export const withOverflowMenu = () => html`
+  <bx-breadcrumb>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
+    </bx-breadcrumb-item>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
+    </bx-breadcrumb-item>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-overflow-menu>
+        <bx-overflow-menu-body>
+          <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
+          <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
+        </bx-overflow-menu-body>
+      </bx-breadcrumb-overflow-menu>
+    </bx-breadcrumb-item>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-link href="/#" aria-current="page">Breadcrumb 3</bx-breadcrumb-link>
+    </bx-breadcrumb-item>
+  </bx-breadcrumb>
+`;
+
+withOverflowMenu.storyName = 'with Overflow Menu';

src/components/breadcrumb/breadcrumb.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2021
+// Copyright IBM Corp. 2019, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -9,6 +9,7 @@ $css--plex: true !default;
 
 @import 'carbon-components/scss/components/link/link';
 @import 'carbon-components/scss/components/breadcrumb/breadcrumb';
+@import '../overflow-menu/overflow-menu';
 
 :host(#{$prefix}-breadcrumb) {
   @extend .#{$prefix}--breadcrumb;
@@ -18,6 +19,50 @@ $css--plex: true !default;
   @extend .#{$prefix}--breadcrumb-item;
 }
 
+:host(#{$prefix}-breadcrumb-overflow-menu) {
+  position: relative;
+  width: rem(20px);
+  height: rem(18px);
+
+  &:focus {
+    outline: 1px solid $focus;
+  }
+
+  &:hover {
+    background: transparent;
+    ::after {
+      opacity: 1;
+    }
+  }
+
+  // Used to mimic link underline
+  ::after {
+    position: absolute;
+    bottom: 2px;
+    width: rem(12px);
+    height: 1px;
+    background: $link-primary-hover;
+    content: '';
+    opacity: 0;
+    transition: opacity $duration--fast-01 motion(standard, productive);
+  }
+}
+
+:host(#{$prefix}-breadcrumb-overflow-menu[open]) {
+  background: transparent;
+  box-shadow: none;
+}
+
+:host(#{$prefix}-breadcrumb-overflow-menu) svg {
+  position: relative;
+  fill: $link-01;
+  transform: translateY(4px);
+}
+
+:host(#{$prefix}-breadcrumb-overflow-menu):hover svg {
+  fill: $link-primary-hover;
+}
+
 :host(#{$prefix}-breadcrumb-item:last-of-type)::after {
   content: '';
 }

src/components/overflow-menu/overflow-menu.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2021
+// Copyright IBM Corp. 2019, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -9,19 +9,23 @@ $css--plex: true !default;
 
 @import 'carbon-components/scss/components/overflow-menu/overflow-menu';
 
-:host(#{$prefix}-overflow-menu) {
+:host(#{$prefix}-overflow-menu),
+:host(#{$prefix}-breadcrumb-overflow-menu) {
   @extend .#{$prefix}--overflow-menu;
 }
 
-:host(#{$prefix}-overflow-menu)[size='sm'] {
+:host(#{$prefix}-overflow-menu)[size='sm'],
+:host(#{$prefix}-breadcrumb-overflow-menu)[size='sm'] {
   @extend .#{$prefix}--overflow-menu--sm;
 }
 
-:host(#{$prefix}-overflow-menu)[size='xl'] {
+:host(#{$prefix}-overflow-menu)[size='xl'],
+:host(#{$prefix}-breadcrumb-overflow-menu)[size='xl'] {
   @extend .#{$prefix}--overflow-menu--xl;
 }
 
-:host(#{$prefix}-overflow-menu[disabled]) {
+:host(#{$prefix}-overflow-menu[disabled]),
+:host(#{$prefix}-breadcrumb-overflow-menu[disabled]) {
   cursor: not-allowed;
 
   svg {
@@ -30,17 +34,20 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-overflow-menu[disabled]:hover) {
+:host(#{$prefix}-overflow-menu[disabled]:hover),
+:host(#{$prefix}-breadcrumb-overflow-menu[disabled]:hover) {
   background-color: transparent;
 }
 
-:host(#{$prefix}-overflow-menu[open]) {
+:host(#{$prefix}-overflow-menu[open]),
+:host(#{$prefix}-breadcrumb-overflow-menu[open]) {
   background-color: $ui-01;
   transition: none;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
 }
 
-:host(#{$prefix}-overflow-menu[color-scheme='light'][open]) {
+:host(#{$prefix}-overflow-menu[color-scheme='light'][open]),
+:host(#{$prefix}-breadcrumb-overflow-menu[color-scheme='light'][open]) {
   background-color: $ui-02;
 }