refactor tooltip to carbon style

Author: cal-smith

src/dialog/dialog.directive.ts

@@ -26,7 +26,7 @@ import { DialogConfig } from "./dialog-config.interface";
  */
 @Directive({
 	selector: "[ibmDialog]",
-	exportAs: "nDialog",
+	exportAs: "ibmDialog",
 	providers: [
 		DialogService
 	]
@@ -43,7 +43,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	 * @type {(string | TemplateRef<any>)}
 	 * @memberof DialogDirective
 	 */
-	@Input() nDialog: string | TemplateRef<any>;
+	@Input() ibmDialog: string | TemplateRef<any>;
 	/**
 	 * Defines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap)
 	 * @type {("click" | "hover" | "mouseenter")}
@@ -66,7 +66,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	 * @type {number}
 	 * @memberof DialogDirective
 	 */
-	@Input() gap = 10;
+	@Input() gap = 0;
 	/**
 	 * Value `true` sets Dialog be appened to the body (to break out of containers)
 	 * @type {boolean}
@@ -122,7 +122,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 		// set the config object (this can [and should!] be added to in child classes depending on what they need)
 		this.dialogConfig = {
 			title: this.title,
-			content: this.nDialog,
+			content: this.ibmDialog,
 			placement: this.placement,
 			parentRef: this.elementRef,
 			gap: this.gap,
@@ -140,7 +140,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	 * @memberof DialogDirective
 	 */
 	ngOnInit() {
-		// fix for safari highjacking clicks
+		// fix for safari hijacking clicks
 		document.body.firstElementChild.addEventListener("click", () => null, true);
 
 		// bind events for hovering or clicking the host

src/dialog/popover/popover-menu.directive.ts

@@ -73,7 +73,7 @@ import { DialogService } from "./../dialog.service";
  */
 @Directive({
 	selector: "[ibmPopoverMenu]",
-	exportAs: "nPopoverMenu",
+	exportAs: "ibmPopoverMenu",
 	providers: [
 		DialogService
 	]
@@ -90,7 +90,7 @@ export class PopoverMenuDirective extends DialogDirective {
 	 * @type {(string | TemplateRef<any>)}
 	 * @memberof PopoverMenuDirective
 	 */
-	@Input() nPopoverMenu: string | TemplateRef<any>;
+	@Input() ibmPopoverMenu: string | TemplateRef<any>;
 
 	/**
 	 * Creates an instance of PopoverMenuDirective.
@@ -113,6 +113,6 @@ export class PopoverMenuDirective extends DialogDirective {
 	 * @memberof PopoverMenuDirective
 	 */
 	onDialogInit() {
-		this.dialogConfig.content = this.nPopoverMenu;
+		this.dialogConfig.content = this.ibmPopoverMenu;
 	}
 }

src/dialog/popover/popover.directive.ts

@@ -62,7 +62,7 @@ import { DialogService } from "./../dialog.service";
  */
 @Directive({
 	selector: "[ibmPopover]",
-	exportAs: "nPopover",
+	exportAs: "ibmPopover",
 	providers: [
 		DialogService
 	]
@@ -81,7 +81,7 @@ export class PopoverDirective extends DialogDirective {
 	 * @type {(string | TemplateRef<any>)}
 	 * @memberof PopoverDirective
 	 */
-	@Input() nPopover: string | TemplateRef<any>;
+	@Input() ibmPopover: string | TemplateRef<any>;
 
 	/**
 	 * Creates an instance of PopoverDirective.
@@ -106,7 +106,7 @@ export class PopoverDirective extends DialogDirective {
 	onDialogInit() {
 		PopoverDirective.popoverCounter++;
 		this.dialogConfig.compID = "popover-" + PopoverDirective.popoverCounter;
-		this.dialogConfig.content = this.nPopover;
+		this.dialogConfig.content = this.ibmPopover;
 		this.dialogConfig.footer = this.footer;
 	}
 }

src/dialog/tooltip/tooltip.component.ts

@@ -24,55 +24,39 @@ import { Dialog } from "./../dialog.component";
 	selector: "ibm-tooltip",
 	template: `
 		<div
-			[class]="getClass()"
-			role="tooltip"
+			#dialog
 			[id]="dialogConfig.compID"
+			role="tooltip"
 			tabindex="0"
-			#dialog>
-			<div
-				*ngIf="contentTemplate"
-				role="tooltip">
-				<ng-template
+			class="bx--tooltip bx--tooltip--shown">
+			<span class="bx--tooltip__caret" aria-hidden="true"></span>
+			<ng-template
+					*ngIf="hasContentTemplate"
 					[ngTemplateOutlet]="dialogConfig.content"
-					[ngTemplateOutletContext]="{popover: this, filter: dialogConfig.filter}">
-				</ng-template>
-			</div>
+					[ngTemplateOutletContext]="{tooltip: this}">
+			</ng-template>
 			<p
-				*ngIf="!contentTemplate"
-				class="tooltip_text"
-				role="tooltip">
+				*ngIf="!hasContentTemplate">
 				{{dialogConfig.content}}
 			</p>
-			<button
-				*ngIf="dialogConfig.trigger==='click'"
-				class="close--xs"
-				(click)="doClose()"
-				attr.aria-label="{{'DIALOG.TOOLTIP.CLOSE' | translate}}">
-				<ibm-static-icon icon="x" size="sm" classList="close_icon"></ibm-static-icon>
-			</button>
-			<div class="arrow" aria-hidden="true"></div>
 		</div>
 		`
 })
 export class Tooltip extends Dialog {
-	/**
-	 * Binds display property to `Tooltop` style attribute.
-	 * @memberof Tooltip
-	 */
 	@HostBinding("style.display") style = "inline-block";
 	/**
 	 * Value is set to `true` if the `Tooltip` is to display a `TemplateRef` instead of a string.
 	 * @type {boolean}
 	 * @memberof Tooltip
 	 */
-	public contentTemplate: boolean;
+	public hasContentTemplate = false;
 
 	/**
 	 * Check whether there is a template for the `Tooltip` content.
 	 * @memberof Tooltip
 	 */
 	onDialogInit() {
-		this.contentTemplate = this.dialogConfig.content instanceof TemplateRef;
+		this.hasContentTemplate = this.dialogConfig.content instanceof TemplateRef;
 	}
 
 	/**

src/dialog/tooltip/tooltip.directive.ts

@@ -32,7 +32,7 @@ import { DialogService } from "./../dialog.service";
  */
 @Directive({
 	selector: "[ibmTooltip]",
-	exportAs: "nTooltip",
+	exportAs: "ibmTooltip",
 	providers: [
 		DialogService
 	]
@@ -45,7 +45,7 @@ export class TooltipDirective extends DialogDirective {
 	 * @type {(string | TemplateRef<any>)}
 	 * @memberof TooltipDirective
 	 */
-	@Input() nTooltip: string | TemplateRef<any>;
+	@Input() ibmTooltip: string | TemplateRef<any>;
 	/**
 	 * Set tooltip type to reflect 'warning' or 'error' styles.
 	 *
@@ -87,7 +87,7 @@ export class TooltipDirective extends DialogDirective {
 	onDialogInit() {
 		TooltipDirective.tooltipCounter++;
 		this.dialogConfig.compID = "tooltip-" + TooltipDirective.tooltipCounter;
-		this.dialogConfig.content = this.nTooltip;
+		this.dialogConfig.content = this.ibmTooltip;
 		this.dialogConfig.type = this.tooltipType !== undefined ? this.tooltipType : this.type;
 		this.elementRef.nativeElement.setAttribute("aria-describedby", this.dialogConfig.compID);
 	}

src/dialog/tooltip/tooltip.stories.ts

@@ -0,0 +1,47 @@
+import { storiesOf, moduleMetadata } from "@storybook/angular";
+import { withNotes } from "@storybook/addon-notes";
+import { action } from "@storybook/addon-actions";
+import { withKnobs, boolean, object } from "@storybook/addon-knobs/angular";
+
+import { TranslateModule } from "@ngx-translate/core";
+
+import { DialogModule } from "../../";
+
+storiesOf("Tooltip", module)
+	.addDecorator(
+		moduleMetadata({
+			imports: [
+				DialogModule,
+				TranslateModule.forRoot()
+			],
+		})
+	)
+	.addDecorator(withKnobs)
+	.add("Basic", () => ({
+		template: `
+			<span
+				ibmTooltip="tooltip text"
+				trigger="hover"
+				placement="bottom"
+				style="cursor: pointer;">
+				Hover for tooltip
+			</span>
+		`
+	}))
+	.add("With Template", () => ({
+	template: `
+			<ng-template #template let-tooltip="tooltip">
+				<p>hello</p>
+				<div>
+					<button class="bx--btn bx--btn--primary" (click)="tooltip.doClose()">Close</button>
+				</div>
+			</ng-template>
+			<span
+				[ibmTooltip]="template"
+				trigger="click"
+				placement="bottom"
+				style="cursor: pointer;">
+				Click for tooltip
+			</span>
+		`
+	}));