[CL-58] Make icon button compatible with bit suffix directive (#4057)

* [CL-58] feat: add support for modyfing button types from directives

* [CL-58] feat: set button type secondary when used as prefix/suffix

* [CL-58] chore: add example using suffix to async actions story

* [CL-58] feat: update story with examples

* [CL-58] feat: allow buttons to have their style unset

* [CL-58] feat: move all styling into prefix/suffix

* [CL-58] fix: static content prefix/suffix

* [CL-58] fix: add missing bitFormButton to bitAction

* [CL-58] fix: disabled opacity not overriding correctly

* [CL-58] feat: change hover color to muted

* [CL-58] feat: replace undefined with unstyled

* [CL-58] fix: focus borders on input and prefix/suffix

* [CL-58] feat: update production code to use icon button correctly

* [CL-58] refactor: move out button type to common place

* [CL-58] fix: buttons not migrated correctly

* [CL-58] feat: use icon button in password toggle

* [CL-58] fix: remove button icon stories

* [SM-358] Migrate password toggles (#4129)

* [CL-58] fix: missing i18n service in story

* [CL-58] fix: missing bitIconButton directive in export comp

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

libs/components/src/button/button.component.html

@@ -1,6 +1,5 @@
 <span class="tw-relative">
   <span [ngClass]="{ 'tw-invisible': loading }">
-    <i class="bwi bwi-lg" [ngClass]="iconClass" aria-hidden="true" *ngIf="icon"></i>
     <ng-content></ng-content>
   </span>
   <span

libs/components/src/button/button.component.spec.ts

@@ -41,6 +41,19 @@ describe("Button", () => {
     expect(buttonDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
     expect(linkDebugElement.nativeElement.classList.contains("tw-border-danger-500")).toBe(true);
 
+    testAppComponent.buttonType = "unstyled";
+    fixture.detectChanges();
+    expect(
+      Array.from(buttonDebugElement.nativeElement.classList).some((klass: string) =>
+        klass.startsWith("tw-bg")
+      )
+    ).toBe(false);
+    expect(
+      Array.from(linkDebugElement.nativeElement.classList).some((klass: string) =>
+        klass.startsWith("tw-bg")
+      )
+    ).toBe(false);
+
     testAppComponent.buttonType = null;
     fixture.detectChanges();
     expect(buttonDebugElement.nativeElement.classList.contains("tw-border-text-muted")).toBe(true);

libs/components/src/button/button.component.ts

@@ -1,10 +1,15 @@
 import { Input, HostBinding, Component } from "@angular/core";
 
-import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
 
-export type ButtonTypes = "primary" | "secondary" | "danger";
+const focusRing = [
+  "focus-visible:tw-ring",
+  "focus-visible:tw-ring-offset-2",
+  "focus-visible:tw-ring-primary-700",
+  "focus-visible:tw-z-10",
+];
 
-const buttonStyles: Record<ButtonTypes, string[]> = {
+const buttonStyles: Record<ButtonType, string[]> = {
   primary: [
     "tw-border-primary-500",
     "tw-bg-primary-500",
@@ -15,6 +20,7 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
     "disabled:tw-border-primary-500/60",
     "disabled:!tw-text-contrast/60",
     "disabled:tw-bg-clip-padding",
+    ...focusRing,
   ],
   secondary: [
     "tw-bg-transparent",
@@ -26,6 +32,7 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
     "disabled:tw-bg-transparent",
     "disabled:tw-border-text-muted/60",
     "disabled:!tw-text-muted/60",
+    ...focusRing,
   ],
   danger: [
     "tw-bg-transparent",
@@ -37,7 +44,9 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
     "disabled:tw-bg-transparent",
     "disabled:tw-border-danger-500/60",
     "disabled:!tw-text-danger/60",
+    ...focusRing,
   ],
+  unstyled: [],
 };
 
 @Component({
@@ -58,10 +67,6 @@ export class ButtonComponent implements ButtonLikeAbstraction {
       "tw-text-center",
       "hover:tw-no-underline",
       "focus:tw-outline-none",
-      "focus-visible:tw-ring",
-      "focus-visible:tw-ring-offset-2",
-      "focus-visible:tw-ring-primary-700",
-      "focus-visible:tw-z-10",
     ]
       .concat(
         this.block == null || this.block === false ? ["tw-inline-block"] : ["tw-w-full", "tw-block"]
@@ -75,17 +80,14 @@ export class ButtonComponent implements ButtonLikeAbstraction {
     return disabled || this.loading ? true : null;
   }
 
-  @Input() buttonType: ButtonTypes = null;
-
+  @Input() buttonType: ButtonType;
   @Input() block?: boolean;
 
   @Input() loading = false;
 
   @Input() disabled = false;
 
-  @Input("bitIconButton") icon: string;
-
-  get iconClass() {
-    return [this.icon, "!tw-m-0"];
+  setButtonType(value: "primary" | "secondary" | "danger" | "unstyled") {
+    this.buttonType = value;
   }
 }

libs/components/src/button/button.stories.ts

@@ -101,17 +101,3 @@ export const Block = BlockTemplate.bind({});
 Block.args = {
   block: true,
 };
-
-const IconTemplate: Story = (args) => ({
-  props: args,
-  template: `
-    <button bitButton [bitIconButton]="icon" buttonType="primary" class="tw-mr-2"></button>
-    <button bitButton [bitIconButton]="icon"buttonType="secondary" class="tw-mr-2"></button>
-    <button bitButton [bitIconButton]="icon" buttonType="danger" class="tw-mr-2"></button>
-  `,
-});
-
-export const Icon = IconTemplate.bind({});
-Icon.args = {
-  icon: "bwi-eye",
-};