feat: wrap overflow menu button in tooltip

Signed-off-by: Akshat Patel <[email protected]>

Author: Akshat55

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

@@ -55,7 +55,8 @@ export default {
 		"DECREMENT": "Decrement value"
 	},
 	"OVERFLOW_MENU": {
-		"OVERFLOW": "Overflow"
+		"OVERFLOW": "Overflow",
+		"ICON_DESCRIPTION": "Options"
 	},
 	"SEARCH": {
 		"LABEL": "Search",