Merge pull request #1698 from Donisius/issue_#1593

feat(button): add iconOnly option
carbon-design-system · Jan 18, 2021 · 6c708ab · 6c708ab
2 parents 049ebac + c0e6f88
commit 6c708ab
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 2 deletions.
diff --git 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: "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" = "center";
+
 	// 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
+	 *	<button
+	 *		ibmButton="tertiary"
+	 *		[iconOnly]="true"
+	 *		[hasAssistiveText]="true"
+	 *		assistiveTextPlacement="top"
+	 *		assistiveTextAlignment="center">
+	 *		<svg class="bx--btn__icon" ibmIconCopy size="20"></svg>
+	 *		<span class="bx--assistive-text">Icon description</span>
+	 *	</button>
+	 * ```
+	 */
+	@HostBinding("class.bx--tooltip__trigger")
+	@HostBinding("class.bx--tooltip--a11y") @Input() hasAssistiveText = false;
+
+	@HostBinding("class.bx--tooltip--align-center") get isAssistiveTextCenterAligned() {
+		return this.hasAssistiveText && this.assistiveTextAlignment === "center";
+	}
+
+	@HostBinding("class.bx--tooltip--align-start") get isAssistiveTextStartAligned() {
+		return this.hasAssistiveText && this.assistiveTextAlignment === "start";
+	}
+
+	@HostBinding("class.bx--tooltip--align-end") get isAssistiveTextEndAligned() {
+		return this.hasAssistiveText && this.assistiveTextAlignment === "end";
+	}
+
+	@HostBinding("class.bx--tooltip--top") get isAssistiveTextTopPositioned() {
+		return this.hasAssistiveText && this.assistiveTextPlacement === "top";
+	}
+
+	@HostBinding("class.bx--tooltip--bottom") get isAssistiveTextBottomPositioned() {
+		return this.hasAssistiveText && this.assistiveTextPlacement === "bottom";
+	}
+
+	@HostBinding("class.bx--tooltip--left") get isAssistiveTextLeftPositioned() {
+		return this.hasAssistiveText && this.assistiveTextPlacement === "left";
+	}
+
+	@HostBinding("class.bx--tooltip--right") get isAssistiveTextRightPositioned() {
+		return this.hasAssistiveText && this.assistiveTextPlacement === "right";
+	}
 
 	ngOnInit() {
 		if (!this.ibmButton) {

diff --git 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: `
+			<button
+				[ibmButton]="ibmButton"
+				[size]="size"
+				[iconOnly]="true"
+				[hasAssistiveText]="true"
+				[assistiveTextPlacement]="assistiveTextPlacement"
+				[assistiveTextAlignment]="assistiveTextAlignment">
+				<svg class="bx--btn__icon" ibmIconCopy size="20"></svg>
+				<span class="bx--assistive-text">Icon description</span>
+			</button>
+		`,
+		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: `
 			<button ibmButton skeleton="true"></button>