diff --git a/src/dialog/dialog.module.ts b/src/dialog/dialog.module.ts index 52186f77df..2219aa7dd0 100644 --- a/src/dialog/dialog.module.ts +++ b/src/dialog/dialog.module.ts @@ -11,15 +11,15 @@ import { Dialog } from "./dialog.component"; import { DialogDirective } from "./dialog.directive"; import { DialogPlaceholderComponent } from "./dialog-placeholder.component"; -import { Popover } from "./popover/popover.component"; -import { PopoverDirective } from "./popover/popover.directive"; -import { PopoverMenu } from "./popover/popover-menu.component"; -import { PopoverMenuDirective } from "./popover/popover-menu.directive"; - import { Tooltip } from "./tooltip/tooltip.component"; import { TooltipDirective } from "./tooltip/tooltip.directive"; import { EllipsisTooltipDirective } from "./tooltip/ellipsis-tooltip.directive"; +import { OverflowMenu } from "./overflow-menu/overflow-menu.component"; +import { OverflowMenuPane } from "./overflow-menu/overflow-menu-pane.component"; +import { OverflowMenuDirective } from "./overflow-menu/overflow-menu.directive"; +import { OverflowMenuOption } from "./overflow-menu/overflow-menu-option.component"; + // exports export { DialogService } from "./dialog.service"; export { DialogPlaceholderService } from "./dialog-placeholder.service"; @@ -27,15 +27,15 @@ export { Dialog } from "./dialog.component"; export { DialogDirective } from "./dialog.directive"; export { DialogPlaceholderComponent } from "./dialog-placeholder.component"; -export { Popover } from "./popover/popover.component"; -export { PopoverDirective } from "./popover/popover.directive"; -export { PopoverMenu } from "./popover/popover-menu.component"; -export { PopoverMenuDirective } from "./popover/popover-menu.directive"; - export { Tooltip } from "./tooltip/tooltip.component"; export { TooltipDirective } from "./tooltip/tooltip.directive"; export { EllipsisTooltipDirective } from "./tooltip/ellipsis-tooltip.directive"; +export { OverflowMenu } from "./overflow-menu/overflow-menu.component"; +export { OverflowMenuPane } from "./overflow-menu/overflow-menu-pane.component"; +export { OverflowMenuDirective } from "./overflow-menu/overflow-menu.directive"; +export { OverflowMenuOption } from "./overflow-menu/overflow-menu-option.component"; + // either provides a new instance of DialogPlaceholderService, or returns the parent export function DIALOG_PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService: DialogPlaceholderService) { return parentService || new DialogPlaceholderService(); @@ -51,26 +51,26 @@ export const DIALOG_PLACEHOLDER_SERVICE_PROVIDER = { @NgModule({ declarations: [ Dialog, - Popover, - PopoverMenu, Tooltip, + OverflowMenu, + OverflowMenuPane, DialogDirective, - PopoverDirective, - PopoverMenuDirective, TooltipDirective, EllipsisTooltipDirective, + OverflowMenuDirective, + OverflowMenuOption, DialogPlaceholderComponent ], exports: [ Dialog, - Popover, - PopoverMenu, Tooltip, + OverflowMenu, + OverflowMenuPane, DialogDirective, - PopoverDirective, - PopoverMenuDirective, TooltipDirective, EllipsisTooltipDirective, + OverflowMenuDirective, + OverflowMenuOption, DialogPlaceholderComponent ], providers: [ @@ -79,9 +79,8 @@ export const DIALOG_PLACEHOLDER_SERVICE_PROVIDER = { ], entryComponents: [ Dialog, - Popover, - PopoverMenu, - Tooltip + Tooltip, + OverflowMenuPane ], imports: [CommonModule, TranslateModule, StaticIconModule] }) diff --git a/src/dialog/dialog.service.ts b/src/dialog/dialog.service.ts index cba45b5974..6d6c575ecf 100644 --- a/src/dialog/dialog.service.ts +++ b/src/dialog/dialog.service.ts @@ -1,20 +1,15 @@ import { EventEmitter, Injector, - Component, ComponentRef, ComponentFactory, ComponentFactoryResolver, Injectable, - ApplicationRef, ViewContainerRef, - Host } from "@angular/core"; import { Subscription } from "rxjs"; import { DialogConfig } from "./dialog-config.interface"; import { DialogPlaceholderService } from "./dialog-placeholder.service"; -import { Popover } from ".."; - /** * `Dialog` object to be injected into other components. diff --git a/src/dialog/overflow-menu/overflow-menu-option.component.ts b/src/dialog/overflow-menu/overflow-menu-option.component.ts new file mode 100644 index 0000000000..49858f1190 --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu-option.component.ts @@ -0,0 +1,69 @@ +import { + HostBinding, + Component, + Input, + ElementRef +} from "@angular/core"; + +/** + * `OverflowMenuOption` represents a single option in an overflow menu + * + * Presently it has three possible states - normal, disabled, and danger: + * ``` + * Simple option + * Disabled + * Danger option + * ``` + * + * For content that expands beyod the overflow menu `OverflowMenuOption` automatically adds a title attribute. + */ +@Component({ + selector: "ibm-overflow-menu-option", + template: ` + + ` +}) +export class OverflowMenuOption { + @HostBinding("class") optionClass = "bx--overflow-menu-options__option"; + @HostBinding("attr.role") role = "list-item"; + + /** + * toggles between `normal` and `danger` states + */ + @Input() type: "normal" | "danger" = "normal"; + /** + * disable/enable interactions + */ + @Input() disabled = false; + + constructor(private elementRef: ElementRef) {} + + /** + * Returns true if the content string is longer than the width of the containing button + * + * note: getter ties into the view check cycle so we always get an accurate value + */ + get titleEnabled() { + const button = this.elementRef.nativeElement.querySelector("button"); + if (button.scrollWidth > button.offsetWidth) { + return true; + } + return false; + } + + /** + * Returns the text content projected into the component + */ + get content(): string { + return this.elementRef.nativeElement.querySelector("button").textContent; + } +} diff --git a/src/dialog/overflow-menu/overflow-menu-pane.component.ts b/src/dialog/overflow-menu/overflow-menu-pane.component.ts new file mode 100644 index 0000000000..5f017f11e9 --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu-pane.component.ts @@ -0,0 +1,24 @@ +import { Component } from "@angular/core"; +import { Dialog } from "../dialog.component"; + +/** + * Extend the `Dialog` component to create an overflow menu. + * + * Not used directly. See overflow-menu.component and overflow-menu.directive for more + */ +@Component({ + selector: "ibm-overflow-menu-pane", + template: ` +
+ +
+ ` +}) +export class OverflowMenuPane extends Dialog {} diff --git a/src/dialog/overflow-menu/overflow-menu.component.ts b/src/dialog/overflow-menu/overflow-menu.component.ts new file mode 100644 index 0000000000..ef375b7f9a --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu.component.ts @@ -0,0 +1,35 @@ +import { Component } from "@angular/core"; + +/** + * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component + * + * html: + * ``` + * + * + * Option 1 + * Option 2 + * + * ``` + */ +@Component({ + selector: "ibm-overflow-menu", + template: ` +
+ + + + + + + +
+ + + + ` +}) +export class OverflowMenu {} diff --git a/src/dialog/overflow-menu/overflow-menu.directive.ts b/src/dialog/overflow-menu/overflow-menu.directive.ts new file mode 100644 index 0000000000..560fe60854 --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu.directive.ts @@ -0,0 +1,54 @@ +import { + Directive, + ElementRef, + ViewContainerRef, + Input, + TemplateRef +} from "@angular/core"; +import { DialogDirective } from "./../dialog.directive"; +import { DialogService } from "./../dialog.service"; +import { OverflowMenuPane } from "./overflow-menu-pane.component"; + + +/** + * Directive for extending `Dialog` to create overflow menus. + * + * class: OverflowMenuDirective (extends DialogDirective) + * + * + * selector: `ibmOverflowMenu` + * + * + * ```html + *
+ * + * + * + * ``` + */ +@Directive({ + selector: "[ibmOverflowMenu]", + exportAs: "ibmOverflowMenu", + providers: [ + DialogService + ] +}) +export class OverflowMenuDirective extends DialogDirective { + @Input() ibmOverflowMenu: TemplateRef; + + /** + * Creates an instance of `OverflowMenuDirective`. + */ + constructor( + protected elementRef: ElementRef, + protected viewContainerRef: ViewContainerRef, + protected dialogService: DialogService + ) { + super(elementRef, viewContainerRef, dialogService); + dialogService.create(OverflowMenuPane); + } + + onDialogInit() { + this.dialogConfig.content = this.ibmOverflowMenu; + } +} diff --git a/src/dialog/overflow-menu/overflow-menu.stories.ts b/src/dialog/overflow-menu/overflow-menu.stories.ts new file mode 100644 index 0000000000..e0ad01c384 --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu.stories.ts @@ -0,0 +1,32 @@ +import { storiesOf, moduleMetadata } from "@storybook/angular"; + +import { TranslateModule } from "@ngx-translate/core"; + +import { DialogModule } from "../../"; + +storiesOf("Overflow Menu", module) + .addDecorator( + moduleMetadata({ + imports: [ + DialogModule, + TranslateModule.forRoot() + ] + }) + ) + .add("Basic", () => ({ + template: ` + + + An example option that is really long to show what should be done to handle long text + + Option 2 +
  • + +
    • + Option 4 + Disabled + Danger option +     + + ` + })); diff --git a/src/dialog/tooltip/tooltip.component.ts b/src/dialog/tooltip/tooltip.component.ts index 2a0eada720..3a9821ddf7 100644 --- a/src/dialog/tooltip/tooltip.component.ts +++ b/src/dialog/tooltip/tooltip.component.ts @@ -1,24 +1,12 @@ import { Component, - Input, - Output, - EventEmitter, - OnInit, - AfterViewInit, - Injector, - ElementRef, TemplateRef, - HostListener, - ViewChild, HostBinding } from "@angular/core"; import { Dialog } from "./../dialog.component"; /** * Extend the `Dialog` component to create a tooltip for exposing content. - * @export - * @class Tooltip - * @extends {Dialog} */ @Component({ selector: "ibm-tooltip", @@ -46,28 +34,13 @@ export class Tooltip extends Dialog { @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 hasContentTemplate = false; /** * Check whether there is a template for the `Tooltip` content. - * @memberof Tooltip */ onDialogInit() { this.hasContentTemplate = this.dialogConfig.content instanceof TemplateRef; } - - /** - * Set the class of the `Tooltip`. - * @returns null - * @memberof Tooltip - */ - public getClass() { - if (this.dialogConfig.type) { - return `tooltip--${this.dialogConfig.type}-${this.placement}`; - } - return `tooltip--${this.placement}`; - } } diff --git a/src/index.stories.ts b/src/index.stories.ts index 834628150c..5f0da4131f 100644 --- a/src/index.stories.ts +++ b/src/index.stories.ts @@ -6,6 +6,7 @@ storiesOf("Welcome", module).add("to Carbon Angular", () => ({ template: `

    Carbon Components Angular

    An Angular implementation of the Carbon Design System

    + Documentation `, - props: {}, + props: {} })); diff --git a/src/input/input.stories.ts b/src/input/input.stories.ts index 729a45a080..f02d69a7ff 100644 --- a/src/input/input.stories.ts +++ b/src/input/input.stories.ts @@ -14,12 +14,12 @@ storiesOf("Input", module).addDecorator( template: ` Some Title - + ` })) .add("Input", () => ({ template: ` - + ` }));