Merge pull request #293 from cal-smith/master

fix(overflow-menu): positioning bugs

Author: zvonimirfras

package-lock.json

@@ -96,7 +96,7 @@
     "@types/node": "8.5.2",
     "angular2-template-loader": "0.6.2",
     "babel-loader": "8.0.4",
-    "carbon-components": "9.42.3",
+    "carbon-components": "9.56.2",
     "codelyzer": "4.5.0",
     "commitizen": "2.10.1",
     "core-js": "2.5.5",

package.json

@@ -36,18 +36,15 @@ export class OverflowMenuPane extends Dialog implements AfterViewInit {
 
 	onDialogInit() {
 		/**
-		 *  -20 shifts the menu up to compensate for the
-		 *  extra offset generated by the wrapper component.
-		 *
 		 *  60 shifts the menu right to align the arrow.
 		 * (position service trys it's best to center everything,
 		 * so we need to add some compensation)
 		 */
 		this.addGap["bottom"] = pos => {
 			if (this.dialogConfig.flip) {
-				return position.addOffset(pos, -20, -60);
+				return position.addOffset(pos, 0, -60);
 			}
-			return position.addOffset(pos, -20, 60);
+			return position.addOffset(pos, 0, 60);
 		};
 
 		if (!this.dialogConfig.menuLabel) {
@@ -103,15 +100,19 @@ export class OverflowMenuPane extends Dialog implements AfterViewInit {
 	}
 
 	ngAfterViewInit() {
-		const focusElementList = this.listItems();
-		focusElementList.forEach(button => {
-			// Allows user to set tabindex to 0.
-			if (button.getAttribute("tabindex") === null) {
-				button.tabIndex = -1;
-			}
+		// wait for the menu to exist in the DOM before setting focus
+		// TODO: work on a more elegant solution (afterDialogInit hook maybe?)
+		setTimeout(() => {
+			const focusElementList = this.listItems();
+			focusElementList.forEach(button => {
+				// Allows user to set tabindex to 0.
+				if (button.getAttribute("tabindex") === null) {
+					button.tabIndex = -1;
+				}
+			});
+			focusElementList[0].tabIndex = 0;
+			focusElementList[0].focus();
 		});
-		focusElementList[0].tabIndex = 0;
-		focusElementList[0].focus();
 		super.ngAfterViewInit();
 	}
 

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

@@ -1,4 +1,9 @@
-import { Component, ElementRef, Input } from "@angular/core";
+import {
+	Component,
+	ElementRef,
+	Input,
+	ViewEncapsulation
+} from "@angular/core";
 import { I18n } from "./../../i18n/i18n.module";
 
 /**
@@ -40,7 +45,20 @@ import { I18n } from "./../../i18n/i18n.module";
 		.bx--overflow-menu--open {
 			opacity: 1
 		}
-	`]
+
+		/*
+		Rotate the overflow menu container as well as the icon, since
+		we calculate our menu position based on the container, not the icon.
+		*/
+		.bx--data-table-v2 .bx--overflow-menu {
+			transform: rotate(90deg);
+		}
+
+		.bx--data-table-v2 .bx--overflow-menu__icon {
+			transform: rotate(180deg);
+		}
+	`],
+	encapsulation: ViewEncapsulation.None
 })
 export class OverflowMenu {
 

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

@@ -1,5 +1,5 @@
 import { storiesOf, moduleMetadata } from "@storybook/angular";
-import { withKnobs, boolean, number } from "@storybook/addon-knobs/angular";
+import { withKnobs, boolean, number } from "@storybook/addon-knobs";
 
 import { DialogModule } from "../../";
 
@@ -60,7 +60,8 @@ storiesOf("Overflow Menu", module)
 	.add("Dynamic", () => ({
 		template: `
 			<span>
-				Dynamic <code style="font-family: monospace;">OverflowMenu</code>, using the <code style="font-family: monospace;">optionCount</code> knob <br/>
+				Dynamic <code style="font-family: monospace;">OverflowMenu</code>,
+				using the <code style="font-family: monospace;">optionCount</code> knob <br/>
 				to change the number of menu options
 			</span>
 			<ibm-overflow-menu>