Merge pull request #3020 from eduardmarcinco/issue/2726

fix: breadcrumb overflow menu icon alignment

Author: zvonimirfras

src/breadcrumb/breadcrumb.component.ts

@@ -71,7 +71,14 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
 				</ng-template>
 			</cds-breadcrumb-item>
 			<cds-breadcrumb-item>
-				<cds-overflow-menu>
+				<ng-template #overflowMenuTrigger>
+					<svg class="cds--overflow-menu__icon" cdsIcon="overflow-menu--horizontal" size="16"></svg>
+				</ng-template>
+				<cds-overflow-menu
+					[customTrigger]="overflowMenuTrigger"
+					triggerClass="cds--btn--icon-only"
+					[description]="description"
+					[autoAlign]="autoAlign">
 					<li class="cds--overflow-menu-options__option"
 						*ngFor="let item of overflowItems">
 						<a class="cds--overflow-menu-options__btn"
@@ -150,6 +157,12 @@ export class Breadcrumb implements AfterContentInit {
 		return this._threshold;
 	}
 
+	/**
+	 * **Experimental**: Auto align menu tooltip position
+	 */
+	@Input() autoAlign = false;
+	@Input() description: string = this.i18n.get().BREADCRUMB.OVERFLOW_MENU_DESCRIPTION;
+
 	/**
 	 * Emits the navigation status promise when the link is activated
 	 */

src/breadcrumb/breadcrumb.module.ts

@@ -6,6 +6,8 @@ import { I18nModule } from "carbon-components-angular/i18n";
 
 import { Breadcrumb } from "./breadcrumb.component";
 import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
+import { ButtonModule } from "carbon-components-angular/button";
+import { IconModule } from "carbon-components-angular/icon";
 
 @NgModule({
 	declarations: [
@@ -18,8 +20,10 @@ import { BreadcrumbItemComponent } from "./breadcrumb-item.component";
 	],
 	imports: [
 		CommonModule,
+		ButtonModule,
 		DialogModule,
-		I18nModule
+		I18nModule,
+		IconModule
 	]
 })
 export class BreadcrumbModule { }

src/dialog/dialog.module.ts

@@ -17,6 +17,8 @@ import { PlaceholderModule } from "carbon-components-angular/placeholder";
 import { ExperimentalModule } from "carbon-components-angular/experimental";
 import { UtilsModule } from "carbon-components-angular/utils";
 import { IconModule } from "carbon-components-angular/icon";
+import { ButtonModule } from "carbon-components-angular/button";
+import { TooltipModule } from "carbon-components-angular/tooltip";
 
 @NgModule({
 	declarations: [
@@ -44,7 +46,9 @@ import { IconModule } from "carbon-components-angular/icon";
 		PlaceholderModule,
 		ExperimentalModule,
 		UtilsModule,
-		IconModule
+		IconModule,
+		ButtonModule,
+		TooltipModule
 	]
 })
 export class DialogModule {}

src/dialog/overflow-menu/overflow-menu.component.ts

@@ -10,6 +10,7 @@ import {
 } from "@angular/core";
 import { I18n } from "carbon-components-angular/i18n";
 import { OverflowMenuDirective } from "./overflow-menu.directive";
+import { BaseIconButton } from "carbon-components-angular/button";
 
 /**
  * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component.
@@ -32,22 +33,36 @@ import { OverflowMenuDirective } from "./overflow-menu.directive";
 @Component({
 	selector: "cds-overflow-menu, ibm-overflow-menu",
 	template: `
-		<button
-			[cdsOverflowMenu]="options"
-			[ngClass]="{'cds--overflow-menu--open': open}"
-			class="cds--overflow-menu {{triggerClass}}"
-			[attr.aria-label]="buttonLabel"
-			[flip]="flip"
-			[isOpen]="open"
-			(isOpenChange)="handleOpenChange($event)"
-			[offset]="offset"
-			[wrapperClass]="wrapperClass"
-			aria-haspopup="true"
-			class="cds--overflow-menu"
-			type="button"
-			[placement]="placement">
-			<ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template>
-		</button>
+		<cds-tooltip
+			class="cds--icon-tooltip"
+			[description]="description"
+			[caret]="caret"
+			[dropShadow]="dropShadow"
+			[highContrast]="highContrast"
+			[isOpen]="isOpen"
+			[align]="align"
+			[autoAlign]="autoAlign"
+			[enterDelayMs]="enterDelayMs"
+			[leaveDelayMs]="leaveDelayMs">
+			<button
+				cdsButton="ghost"
+				[cdsOverflowMenu]="options"
+				[ngClass]="{'cds--overflow-menu--open': open}"
+				class="cds--overflow-menu {{triggerClass}}"
+				[iconOnly]="true"
+				[attr.aria-label]="buttonLabel"
+				[flip]="flip"
+				[isOpen]="open"
+				(isOpenChange)="handleOpenChange($event)"
+				[offset]="offset"
+				[wrapperClass]="wrapperClass"
+				aria-haspopup="true"
+				type="button"
+				[placement]="placement">
+				<ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template>
+			</button>
+		</cds-tooltip>
+
 		<ng-template #options>
 			<ng-content></ng-content>
 		</ng-template>
@@ -74,9 +89,11 @@ import { OverflowMenuDirective } from "./overflow-menu.directive";
 	`],
 	encapsulation: ViewEncapsulation.None
 })
-export class OverflowMenu {
+export class OverflowMenu extends BaseIconButton {
 	@Input() buttonLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;
 
+	@Input() description = this.i18n.get().OVERFLOW_MENU.ICON_DESCRIPTION;
+
 	@Input() flip = false;
 
 	@Input() placement: "bottom" | "top" = "bottom";
@@ -103,7 +120,9 @@ export class OverflowMenu {
 
 	@ContentChild(OverflowMenuDirective) overflowMenuDirective: OverflowMenuDirective;
 
-	constructor(protected elementRef: ElementRef, protected i18n: I18n) {}
+	constructor(protected elementRef: ElementRef, protected i18n: I18n) {
+		super();
+	}
 
 	handleOpenChange(event: boolean) {
 		this.open = event;

src/i18n/en.ts

@@ -1,6 +1,7 @@
 export default {
 	"BREADCRUMB": {
-		"LABEL": "Breadcrumb"
+		"LABEL": "Breadcrumb",
+		"OVERFLOW_MENU_DESCRIPTION": "Options"
 	},
 	"CODE_SNIPPET": {
 		"CODE_SNIPPET_TEXT": "Code Snippet Text",
@@ -54,7 +55,8 @@ export default {
 		"DECREMENT": "Decrement value"
 	},
 	"OVERFLOW_MENU": {
-		"OVERFLOW": "Overflow"
+		"OVERFLOW": "Overflow",
+		"ICON_DESCRIPTION": "Options"
 	},
 	"SEARCH": {
 		"LABEL": "Search",