From f0b5dec49d09ed1243be0ba5f49e448c7801f9fc Mon Sep 17 00:00:00 2001 From: Donisius Date: Tue, 12 Jan 2021 19:50:14 -0500 Subject: [PATCH 1/3] feat(button): add iconOnly option --- src/button/button.directive.ts | 60 ++++++++++++++++++++++++++++++++++ src/button/button.stories.ts | 29 ++++++++++++++-- 2 files changed, 87 insertions(+), 2 deletions(-) diff --git a/src/button/button.directive.ts b/src/button/button.directive.ts index b0d17ecaa2..f73f6da7a8 100644 --- a/src/button/button.directive.ts +++ b/src/button/button.directive.ts @@ -34,6 +34,19 @@ export class Button implements OnInit { * Specify the size of the button */ @Input() size: ButtonSize; + /** + * If assistive text is used, this specifies the placement. + * Possible placements are `top`, `bottom`, `left`, `right`. + * If assistive text is not used, this can be left undefined. + */ + @Input() assistiveTextPlacement: string; + /** + * If assistive text is used, this specifies the alignment. + * Possible alignments are `center`, `start`, `end`. + * If assistive text is not used, this can be left undefined. + */ + @Input() assistiveTextAlignment: string; + // a whole lot of HostBindings ... this way we don't have to touch the elementRef directly @HostBinding("class.bx--btn") get baseClass() { return !this.toolbarAction; @@ -62,6 +75,53 @@ export class Button implements OnInit { } @HostBinding("class.bx--toolbar-action") toolbarAction = false; @HostBinding("class.bx--overflow-menu") overflowMenu = false; + @HostBinding("class.bx--btn--icon-only") @Input() iconOnly = false; + + /** + * `hasAssistiveText` input specifies whether the button contains assistive text or not. + * Assistive text can be utilized as follows: + * ```typescript + * + * ``` + */ + @HostBinding("class.bx--tooltip__trigger") + @HostBinding("class.bx--tooltip--a11y") @Input() hasAssistiveText = false; + + @HostBinding("class.bx--tooltip--align-center") get isAssistiveTextCenterAligned() { + return this.assistiveTextAlignment === "center"; + } + + @HostBinding("class.bx--tooltip--align-start") get isAssistiveTextStartAligned() { + return this.assistiveTextAlignment === "start"; + } + + @HostBinding("class.bx--tooltip--align-end") get isAssistiveTextEndAligned() { + return this.assistiveTextAlignment === "end"; + } + + @HostBinding("class.bx--tooltip--top") get isAssistiveTextTopPositioned() { + return this.assistiveTextPlacement === "top"; + } + + @HostBinding("class.bx--tooltip--bottom") get isAssistiveTextBottomPositioned() { + return this.assistiveTextPlacement === "bottom"; + } + + @HostBinding("class.bx--tooltip--left") get isAssistiveTextLeftPositioned() { + return this.assistiveTextPlacement === "left"; + } + + @HostBinding("class.bx--tooltip--right") get isAssistiveTextRightPositioned() { + return this.assistiveTextPlacement === "right"; + } ngOnInit() { if (!this.ibmButton) { diff --git a/src/button/button.stories.ts b/src/button/button.stories.ts index 6521af760c..974a114f80 100644 --- a/src/button/button.stories.ts +++ b/src/button/button.stories.ts @@ -4,13 +4,18 @@ import { withKnobs, select } from "@storybook/addon-knobs/angular"; import { ButtonModule } from "../"; import { DocumentationModule } from "../documentation-component/documentation.module"; -import { AddModule } from "@carbon/icons-angular"; +import { AddModule, CopyModule } from "@carbon/icons-angular"; storiesOf("Components|Button", module) .addDecorator( moduleMetadata({ - imports: [ButtonModule, DocumentationModule, AddModule] + imports: [ + AddModule, + ButtonModule, + CopyModule, + DocumentationModule + ] }) ) .addDecorator(withKnobs) @@ -29,6 +34,26 @@ storiesOf("Components|Button", module) size: select("Size of the buttons", ["normal", "sm", "field"], "normal") } })) + .add("Icon only", () => ({ + template: ` + + `, + props: { + ibmButton: select("Button kind", ["primary", "secondary", "tertiary", "ghost", "danger", "danger--primary"], "tertiary"), + size: select("Size of the buttons", ["normal", "sm", "field"], "normal"), + assistiveTextPlacement: select("Placement of assistive text", ["top", "bottom", "left", "right"], "top"), + assistiveTextAlignment: select("Alignment of assistive text", ["center", "start", "end"], "center") + } + })) .add("Skeleton", () => ({ template: ` From baead3e427df668e83c4bd8ffc45bdf0bad1405a Mon Sep 17 00:00:00 2001 From: Donisius Date: Wed, 13 Jan 2021 11:55:54 -0500 Subject: [PATCH 2/3] Apply suggested changes --- src/button/button.directive.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/button/button.directive.ts b/src/button/button.directive.ts index f73f6da7a8..52a79b37a2 100644 --- a/src/button/button.directive.ts +++ b/src/button/button.directive.ts @@ -39,13 +39,13 @@ export class Button implements OnInit { * Possible placements are `top`, `bottom`, `left`, `right`. * If assistive text is not used, this can be left undefined. */ - @Input() assistiveTextPlacement: string; + @Input() assistiveTextPlacement: "top" | "bottom" | "left" | "right"; /** * If assistive text is used, this specifies the alignment. * Possible alignments are `center`, `start`, `end`. * If assistive text is not used, this can be left undefined. */ - @Input() assistiveTextAlignment: string; + @Input() assistiveTextAlignment: "center" | "start" | "end"; // a whole lot of HostBindings ... this way we don't have to touch the elementRef directly @HostBinding("class.bx--btn") get baseClass() { From c0e6f88a0f1f4af334ec8daaa0ab04fa62876d77 Mon Sep 17 00:00:00 2001 From: Donisius Date: Sun, 17 Jan 2021 16:14:14 -0500 Subject: [PATCH 3/3] initialize assistive text position and alignment for button --- src/button/button.directive.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/button/button.directive.ts b/src/button/button.directive.ts index 52a79b37a2..26d273377f 100644 --- a/src/button/button.directive.ts +++ b/src/button/button.directive.ts @@ -39,13 +39,13 @@ export class Button implements OnInit { * Possible placements are `top`, `bottom`, `left`, `right`. * If assistive text is not used, this can be left undefined. */ - @Input() assistiveTextPlacement: "top" | "bottom" | "left" | "right"; + @Input() assistiveTextPlacement: "top" | "bottom" | "left" | "right" = "top"; /** * If assistive text is used, this specifies the alignment. * Possible alignments are `center`, `start`, `end`. * If assistive text is not used, this can be left undefined. */ - @Input() assistiveTextAlignment: "center" | "start" | "end"; + @Input() assistiveTextAlignment: "center" | "start" | "end" = "center"; // a whole lot of HostBindings ... this way we don't have to touch the elementRef directly @HostBinding("class.bx--btn") get baseClass() { @@ -96,31 +96,31 @@ export class Button implements OnInit { @HostBinding("class.bx--tooltip--a11y") @Input() hasAssistiveText = false; @HostBinding("class.bx--tooltip--align-center") get isAssistiveTextCenterAligned() { - return this.assistiveTextAlignment === "center"; + return this.hasAssistiveText && this.assistiveTextAlignment === "center"; } @HostBinding("class.bx--tooltip--align-start") get isAssistiveTextStartAligned() { - return this.assistiveTextAlignment === "start"; + return this.hasAssistiveText && this.assistiveTextAlignment === "start"; } @HostBinding("class.bx--tooltip--align-end") get isAssistiveTextEndAligned() { - return this.assistiveTextAlignment === "end"; + return this.hasAssistiveText && this.assistiveTextAlignment === "end"; } @HostBinding("class.bx--tooltip--top") get isAssistiveTextTopPositioned() { - return this.assistiveTextPlacement === "top"; + return this.hasAssistiveText && this.assistiveTextPlacement === "top"; } @HostBinding("class.bx--tooltip--bottom") get isAssistiveTextBottomPositioned() { - return this.assistiveTextPlacement === "bottom"; + return this.hasAssistiveText && this.assistiveTextPlacement === "bottom"; } @HostBinding("class.bx--tooltip--left") get isAssistiveTextLeftPositioned() { - return this.assistiveTextPlacement === "left"; + return this.hasAssistiveText && this.assistiveTextPlacement === "left"; } @HostBinding("class.bx--tooltip--right") get isAssistiveTextRightPositioned() { - return this.assistiveTextPlacement === "right"; + return this.hasAssistiveText && this.assistiveTextPlacement === "right"; } ngOnInit() {