From 51fad7514bb9bbdab5b2acf8d046a50578021fc7 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Fri, 7 Sep 2018 09:25:59 -0400 Subject: [PATCH 1/7] chore: update index.stories with docs link --- src/index.stories.ts | 1 + src/input/input.stories.ts | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.stories.ts b/src/index.stories.ts index 834628150c..de87f3efc1 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

+ Static documentation `, 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: ` - + ` })); From d955f44de8a4a468c85b2282bdeefb71660a0f0f Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Fri, 7 Sep 2018 09:35:47 -0400 Subject: [PATCH 2/7] remove unused imports --- src/dialog/tooltip/tooltip.component.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/dialog/tooltip/tooltip.component.ts b/src/dialog/tooltip/tooltip.component.ts index 2a0eada720..9dd92c387c 100644 --- a/src/dialog/tooltip/tooltip.component.ts +++ b/src/dialog/tooltip/tooltip.component.ts @@ -1,15 +1,6 @@ import { Component, - Input, - Output, - EventEmitter, - OnInit, - AfterViewInit, - Injector, - ElementRef, TemplateRef, - HostListener, - ViewChild, HostBinding } from "@angular/core"; import { Dialog } from "./../dialog.component"; From fe92fa8115cfc1fd8c82cedb1d9638c742dfd868 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Fri, 7 Sep 2018 15:53:36 -0400 Subject: [PATCH 3/7] feat(overflow-menu): add overflow menu components --- src/dialog/dialog.module.ts | 41 ++++++------ src/dialog/dialog.service.ts | 5 -- .../overflow-menu-option.component.ts | 66 +++++++++++++++++++ .../overflow-menu-pane.component.ts | 27 ++++++++ .../overflow-menu/overflow-menu.component.ts | 42 ++++++++++++ .../overflow-menu/overflow-menu.directive.ts | 59 +++++++++++++++++ .../overflow-menu/overflow-menu.stories.ts | 33 ++++++++++ src/dialog/tooltip/tooltip.component.ts | 12 ---- 8 files changed, 247 insertions(+), 38 deletions(-) create mode 100644 src/dialog/overflow-menu/overflow-menu-option.component.ts create mode 100644 src/dialog/overflow-menu/overflow-menu-pane.component.ts create mode 100644 src/dialog/overflow-menu/overflow-menu.component.ts create mode 100644 src/dialog/overflow-menu/overflow-menu.directive.ts create mode 100644 src/dialog/overflow-menu/overflow-menu.stories.ts 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..f6def4f61d --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu-option.component.ts @@ -0,0 +1,66 @@ +import { + HostBinding, + Component, + Input, + ElementRef, + AfterViewInit, +} 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 implements AfterViewInit { + @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; + + public titleEnabled = false; + + constructor(private elementRef: ElementRef) {} + + ngAfterViewInit() { + const button = this.elementRef.nativeElement.querySelector("button"); + if (button.scrollWidth > button.offsetWidth) { + this.titleEnabled = true; + } + } + + /** + * Returns the text content projected into the component + */ + getContent(): 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..c46ab194c9 --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu-pane.component.ts @@ -0,0 +1,27 @@ +import { + Component, + HostBinding +} 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..6881631a62 --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu.component.ts @@ -0,0 +1,42 @@ +import { + Component, + HostBinding, + Input, + TemplateRef +} 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 { + /** + * TemplateRef of `OverflowMenuOption`s (or compliant HTML) to render in the `OverflowMenuPane`s + */ + @Input() options: TemplateRef; +} 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..90e15f601c --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu.directive.ts @@ -0,0 +1,59 @@ +import { + Directive, + ElementRef, + ViewContainerRef, + ContentChildren, + QueryList, + AfterViewInit, + ViewChildren, + Input, + TemplateRef +} from "@angular/core"; +import { DialogDirective } from "./../dialog.directive"; +import { DialogService } from "./../dialog.service"; +import { OverflowMenuOption } from "./overflow-menu-option.component"; +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..4640856844 --- /dev/null +++ b/src/dialog/overflow-menu/overflow-menu.stories.ts @@ -0,0 +1,33 @@ +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 9dd92c387c..6f7418f0b5 100644 --- a/src/dialog/tooltip/tooltip.component.ts +++ b/src/dialog/tooltip/tooltip.component.ts @@ -49,16 +49,4 @@ export class Tooltip extends Dialog { 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}`; - } } From ad2d525d6cff44f0566be92deea2992382374868 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Sat, 8 Sep 2018 13:02:38 -0400 Subject: [PATCH 4/7] update template passing in overflow-menu.component --- .../overflow-menu-option.component.ts | 2 +- .../overflow-menu-pane.component.ts | 5 +---- .../overflow-menu/overflow-menu.component.ts | 17 +++++------------ .../overflow-menu/overflow-menu.directive.ts | 5 ----- .../overflow-menu/overflow-menu.stories.ts | 5 ++--- src/dialog/tooltip/tooltip.component.ts | 6 ------ 6 files changed, 9 insertions(+), 31 deletions(-) diff --git a/src/dialog/overflow-menu/overflow-menu-option.component.ts b/src/dialog/overflow-menu/overflow-menu-option.component.ts index f6def4f61d..3c40c9e9d4 100644 --- a/src/dialog/overflow-menu/overflow-menu-option.component.ts +++ b/src/dialog/overflow-menu/overflow-menu-option.component.ts @@ -3,7 +3,7 @@ import { Component, Input, ElementRef, - AfterViewInit, + AfterViewInit } from "@angular/core"; /** diff --git a/src/dialog/overflow-menu/overflow-menu-pane.component.ts b/src/dialog/overflow-menu/overflow-menu-pane.component.ts index c46ab194c9..5f017f11e9 100644 --- a/src/dialog/overflow-menu/overflow-menu-pane.component.ts +++ b/src/dialog/overflow-menu/overflow-menu-pane.component.ts @@ -1,7 +1,4 @@ -import { - Component, - HostBinding -} from "@angular/core"; +import { Component } from "@angular/core"; import { Dialog } from "../dialog.component"; /** diff --git a/src/dialog/overflow-menu/overflow-menu.component.ts b/src/dialog/overflow-menu/overflow-menu.component.ts index 6881631a62..ef375b7f9a 100644 --- a/src/dialog/overflow-menu/overflow-menu.component.ts +++ b/src/dialog/overflow-menu/overflow-menu.component.ts @@ -1,9 +1,4 @@ -import { - Component, - HostBinding, - Input, - TemplateRef -} from "@angular/core"; +import { Component } from "@angular/core"; /** * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component @@ -32,11 +27,9 @@ import { + + + ` }) -export class OverflowMenu { - /** - * TemplateRef of `OverflowMenuOption`s (or compliant HTML) to render in the `OverflowMenuPane`s - */ - @Input() options: TemplateRef; -} +export class OverflowMenu {} diff --git a/src/dialog/overflow-menu/overflow-menu.directive.ts b/src/dialog/overflow-menu/overflow-menu.directive.ts index 90e15f601c..560fe60854 100644 --- a/src/dialog/overflow-menu/overflow-menu.directive.ts +++ b/src/dialog/overflow-menu/overflow-menu.directive.ts @@ -2,16 +2,11 @@ import { Directive, ElementRef, ViewContainerRef, - ContentChildren, - QueryList, - AfterViewInit, - ViewChildren, Input, TemplateRef } from "@angular/core"; import { DialogDirective } from "./../dialog.directive"; import { DialogService } from "./../dialog.service"; -import { OverflowMenuOption } from "./overflow-menu-option.component"; import { OverflowMenuPane } from "./overflow-menu-pane.component"; diff --git a/src/dialog/overflow-menu/overflow-menu.stories.ts b/src/dialog/overflow-menu/overflow-menu.stories.ts index 4640856844..b72407e464 100644 --- a/src/dialog/overflow-menu/overflow-menu.stories.ts +++ b/src/dialog/overflow-menu/overflow-menu.stories.ts @@ -15,8 +15,7 @@ storiesOf("Overflow Menu", module) ) .add("Basic", () => ({ template: ` - - + An example option that is really long to show what should be done to handle long text @@ -27,7 +26,7 @@ storiesOf("Overflow Menu", module) Option 4 Disabled Danger option - + ` })); diff --git a/src/dialog/tooltip/tooltip.component.ts b/src/dialog/tooltip/tooltip.component.ts index 6f7418f0b5..3a9821ddf7 100644 --- a/src/dialog/tooltip/tooltip.component.ts +++ b/src/dialog/tooltip/tooltip.component.ts @@ -7,9 +7,6 @@ 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", @@ -37,14 +34,11 @@ 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; From 812806b4cc6cd5699f663ad918bd3e3928a1968d Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Sat, 8 Sep 2018 13:13:51 -0400 Subject: [PATCH 5/7] Improve and simplify overflowmenuoption --- .../overflow-menu-option.component.ts | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/dialog/overflow-menu/overflow-menu-option.component.ts b/src/dialog/overflow-menu/overflow-menu-option.component.ts index 3c40c9e9d4..49858f1190 100644 --- a/src/dialog/overflow-menu/overflow-menu-option.component.ts +++ b/src/dialog/overflow-menu/overflow-menu-option.component.ts @@ -2,8 +2,7 @@ import { HostBinding, Component, Input, - ElementRef, - AfterViewInit + ElementRef } from "@angular/core"; /** @@ -27,13 +26,13 @@ import { 'bx--overflow-menu-options__option--danger': type === 'danger', 'bx--overflow-menu-options__option--disabled': disabled }" - [tabindex]="(disabled?-1:null)" - [title]="(titleEnabled?getContent():'')"> + [tabindex]="(disabled ? -1 : null)" + [title]="(titleEnabled ? content : '')"> ` }) -export class OverflowMenuOption implements AfterViewInit { +export class OverflowMenuOption { @HostBinding("class") optionClass = "bx--overflow-menu-options__option"; @HostBinding("attr.role") role = "list-item"; @@ -46,21 +45,25 @@ export class OverflowMenuOption implements AfterViewInit { */ @Input() disabled = false; - public titleEnabled = false; - constructor(private elementRef: ElementRef) {} - ngAfterViewInit() { + /** + * 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) { - this.titleEnabled = true; + return true; } + return false; } /** * Returns the text content projected into the component */ - getContent(): string { + get content(): string { return this.elementRef.nativeElement.querySelector("button").textContent; } } From a6e5908c8ece34adede07713b0f17c42ad5aa477 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Sat, 8 Sep 2018 13:14:44 -0400 Subject: [PATCH 6/7] switch link to just 'Documentation' --- src/index.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.stories.ts b/src/index.stories.ts index de87f3efc1..9722db64b9 100644 --- a/src/index.stories.ts +++ b/src/index.stories.ts @@ -6,7 +6,7 @@ storiesOf("Welcome", module).add("to Carbon Angular", () => ({ template: `

    Carbon Components Angular

    An Angular implementation of the Carbon Design System

    - Static documentation + Documentation `, props: {}, })); From be0715203d351c9232e3d794b911c9c1f696fac3 Mon Sep 17 00:00:00 2001 From: Cal Smith Date: Mon, 10 Sep 2018 11:11:19 -0400 Subject: [PATCH 7/7] wrangle runaway commas --- src/dialog/overflow-menu/overflow-menu.stories.ts | 2 +- src/index.stories.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/dialog/overflow-menu/overflow-menu.stories.ts b/src/dialog/overflow-menu/overflow-menu.stories.ts index b72407e464..e0ad01c384 100644 --- a/src/dialog/overflow-menu/overflow-menu.stories.ts +++ b/src/dialog/overflow-menu/overflow-menu.stories.ts @@ -10,7 +10,7 @@ storiesOf("Overflow Menu", module) imports: [ DialogModule, TranslateModule.forRoot() - ], + ] }) ) .add("Basic", () => ({ diff --git a/src/index.stories.ts b/src/index.stories.ts index 9722db64b9..5f0da4131f 100644 --- a/src/index.stories.ts +++ b/src/index.stories.ts @@ -8,5 +8,5 @@ storiesOf("Welcome", module).add("to Carbon Angular", () => ({

    An Angular implementation of the Carbon Design System

    Documentation `, - props: {}, + props: {} }));