Merge pull request #486 from youda97/overflow-links

feat(overflow-menu): Add overflow with links

Author: zvonimirfras

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

@@ -24,6 +24,7 @@ import {
 	selector: "ibm-overflow-menu-option",
 	template: `
 		<button
+			*ngIf="!href"
 			class="bx--overflow-menu-options__btn"
 			role="menuitem"
 			[tabindex]="tabIndex"
@@ -32,8 +33,26 @@ import {
 			(click)="onClick($event)"
 			[disabled]="disabled"
 			[attr.title]="title">
-			<ng-content></ng-content>
+			<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>
 		</button>
+
+		<a
+			*ngIf="href"
+			class="bx--overflow-menu-options__btn"
+			role="menuitem"
+			[tabindex]="tabIndex"
+			(focus)="tabIndex = 0"
+			(blur)="tabIndex = -1"
+			(click)="onClick($event)"
+			[attr.disabled]="disabled"
+			[href]="href"
+			[attr.title]="title">
+			<ng-container *ngTemplateOutlet="tempOutlet"></ng-container>
+		</a>
+
+		<ng-template #tempOutlet>
+			<ng-content></ng-content>
+		</ng-template>
 	`
 })
 export class OverflowMenuOption implements AfterViewInit {
@@ -58,6 +77,8 @@ export class OverflowMenuOption implements AfterViewInit {
 	 */
 	@Input() disabled = false;
 
+	@Input() href: string;
+
 	@Output() selected: EventEmitter<any> = new EventEmitter();
 
 	public tabIndex = -1;
@@ -72,9 +93,9 @@ export class OverflowMenuOption implements AfterViewInit {
 	}
 
 	ngAfterViewInit() {
-		const button = this.elementRef.nativeElement.querySelector("button");
+		const button = this.elementRef.nativeElement.querySelector("button, a");
 		if (button.scrollWidth > button.offsetWidth) {
-			this.title = this.elementRef.nativeElement.querySelector("button").textContent;
+			this.title = button.textContent;
 		}
 	}
 }

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

@@ -119,6 +119,7 @@ export class OverflowMenuPane extends Dialog implements AfterViewInit {
 	}
 
 	protected listItems() {
-		return Array.from<any>(this.elementRef.nativeElement.querySelectorAll(".bx--overflow-menu-options__btn:not([disabled])"));
+		const selector = ".bx--overflow-menu-options__option:not([disabled]) .bx--overflow-menu-options__btn";
+		return Array.from<HTMLElement>(this.elementRef.nativeElement.querySelectorAll(selector));
 	}
 }

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

@@ -49,7 +49,28 @@ storiesOf("Overflow Menu", module)
 		props: {
 			click: () => console.log("click"),
 			selected: () => console.log("selected"),
-			flip: boolean("Flip overflow to open on the left", false)
+			flip: boolean("Flipped", false)
+		}
+	}))
+	.add("With links", () => ({
+		template: `
+			<app-experimental-component></app-experimental-component>
+			<ibm-overflow-menu [flip]="flip" >
+				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)" (click)="click($event)">
+					An example option that is really long to show what should be done to handle long text
+				</ibm-overflow-menu-option>
+				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 2</ibm-overflow-menu-option>
+				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 3</ibm-overflow-menu-option>
+				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 4</ibm-overflow-menu-option>
+				<ibm-overflow-menu-option href="https://www.ibm.com" disabled="true" (selected)="selected($event)">Disabled</ibm-overflow-menu-option>
+				<ibm-overflow-menu-option href="https://www.ibm.com" type="danger" (selected)="selected($event)">Danger option</ibm-overflow-menu-option>
+			</ibm-overflow-menu>
+			<ibm-placeholder></ibm-placeholder>
+		`,
+		props: {
+			click: () => console.log("click"),
+			selected: () => console.log("selected"),
+			flip: boolean("Flipped", false)
 		}
 	}))
 	.add("Dynamic", () => ({