[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>

apps/web/src/app/accounts/login/login.component.html

@@ -77,18 +77,12 @@
       <bit-label>{{ "masterPass" | i18n }}</bit-label>
       <input
         id="login_input_master-password"
+        type="password"
         bitInput
-        [type]="showPassword ? 'text' : 'password'"
         formControlName="masterPassword"
         appAutofocus
       />
-      <button type="button" bitSuffix bitButton (click)="togglePassword()">
+      <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
-        <i
-          aria-hidden="true"
-          class="bwi bwi-lg bwi-eye"
-          [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
-        ></i>
-      </button>
     </bit-form-field>
     <a class="-tw-mt-2" routerLink="/hint" (mousedown)="goToHint()" (click)="setFormValues()">{{
       "getMasterPasswordHint" | i18n

apps/web/src/app/accounts/register-form/register-form.component.html

@@ -34,16 +34,16 @@
         <input
           id="register-form_input_master-password"
           bitInput
-          [type]="showPassword ? 'text' : 'password'"
+          type="password"
           formControlName="masterPassword"
         />
-        <button type="button" bitSuffix bitButton (click)="togglePassword()">
+        <button
-          <i
+          type="button"
-            aria-hidden="true"
+          bitSuffix
-            class="bwi bwi-lg bwi-eye"
+          bitIconButton
-            [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+          bitPasswordInputToggle
-          ></i>
+          [(toggled)]="showPassword"
-        </button>
+        ></button>
         <bit-hint>
           <span class="tw-font-semibold">Important:</span>
           {{ "masterPassImportant" | i18n }}
@@ -65,16 +65,16 @@
         <input
           id="register-form_input_confirm-master-password"
           bitInput
-          [type]="showPassword ? 'text' : 'password'"
+          type="password"
           formControlName="confirmMasterPassword"
         />
-        <button type="button" bitSuffix bitButton (click)="togglePassword()">
+        <button
-          <i
+          type="button"
-            aria-hidden="true"
+          bitSuffix
-            class="bwi bwi-lg bwi-eye"
+          bitIconButton
-            [ngClass]="{ 'bwi-eye': !showPassword, 'bwi-eye-slash': showPassword }"
+          bitPasswordInputToggle
-          ></i>
+          [(toggled)]="showPassword"
-        </button>
+        ></button>
       </bit-form-field>
     </div>
 

apps/web/src/app/tools/import-export/export.component.html

@@ -84,73 +84,41 @@
         <br />
 
         <ng-container *ngIf="fileEncryptionType == encryptedExportType.FileEncrypted">
-          <div class="input-group">
+          <bit-form-field>
-            <bit-form-field class="tw-w-full">
+            <bit-label>{{ "filePassword" | i18n }}</bit-label>
-              <bit-label>{{ "filePassword" | i18n }}</bit-label>
+            <input
-              <input
+              bitInput
-                bitInput
+              type="password"
-                [type]="showFilePassword ? 'text' : 'password'"
+              id="filePassword"
-                id="filePassword"
+              formControlName="filePassword"
-                formControlName="filePassword"
+              name="password"
-                name="password"
+            />
-              />
+            <button
-
+              type="button"
-              <div class="input-group-append">
+              bitSuffix
-                <button
+              bitIconButton
-                  bitSuffix
+              bitPasswordInputToggle
-                  bitButton
+              [(toggled)]="showFilePassword"
-                  buttonType="secondary"
+            ></button>
-                  appStopClick
+            <bit-hint>{{ "exportPasswordDescription" | i18n }}</bit-hint>
-                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
+          </bit-form-field>
-                  [attr.aria-pressed]="showFilePassword"
+          <bit-form-field>
-                  (click)="toggleFilePassword()"
+            <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
-                  type="button"
+            <input
-                >
+              bitInput
-                  <i
+              type="password"
-                    class="bwi bwi-lg"
+              id="confirmFilePassword"
-                    aria-hidden="true"
+              formControlName="confirmFilePassword"
-                    [ngClass]="{ 'bwi-eye': !showFilePassword, 'bwi-eye-slash': showFilePassword }"
+              name="confirmFilePassword"
-                  ></i>
+            />
-                </button>
+            <button
-              </div>
+              type="button"
-            </bit-form-field>
+              bitSuffix
-            <div class="small text-muted">
+              bitIconButton
-              {{ "exportPasswordDescription" | i18n }}
+              bitPasswordInputToggle
-            </div>
+              [(toggled)]="showFilePassword"
-          </div>
+            ></button>
-          <div class="input-group tw-mt-4">
+          </bit-form-field>
-            <bit-form-field class="tw-w-full">
-              <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
-              <input
-                bitInput
-                [type]="showConfirmFilePassword ? 'text' : 'password'"
-                id="confirmFilePassword"
-                formControlName="confirmFilePassword"
-                name="confirmFilePassword"
-              />
-              <div class="input-group-append">
-                <button
-                  bitSuffix
-                  bitButton
-                  buttonType="secondary"
-                  appStopClick
-                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-                  [attr.aria-pressed]="showConfirmFilePassword"
-                  (click)="toggleConfirmFilePassword()"
-                  type="button"
-                >
-                  <i
-                    class="bwi bwi-lg"
-                    aria-hidden="true"
-                    [ngClass]="{
-                      'bwi-eye': !showConfirmFilePassword,
-                      'bwi-eye-slash': showConfirmFilePassword
-                    }"
-                  ></i>
-                </button>
-              </div>
-            </bit-form-field>
-          </div>
         </ng-container>
       </ng-container>
 

apps/web/src/app/tools/import-export/export.component.ts

@@ -23,6 +23,7 @@ import { UserVerificationPromptComponent } from "../../components/user-verificat
 export class ExportComponent extends BaseExportComponent {
   organizationId: string;
   encryptedExportType = EncryptedExportType;
+  protected showFilePassword: boolean;
 
   constructor(
     cryptoService: CryptoService,

apps/web/src/app/tools/import-export/file-password-prompt.component.html

@@ -14,32 +14,17 @@
           class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-pr-3.5 tw-pt-3.5 tw-pl-3.5"
         >
           {{ "confirmVaultImportDesc" | i18n }}
-          <bit-form-field class="tw-w-full tw-pt-3.5">
+          <bit-form-field class="tw-pt-3.5">
             <bit-label>{{ "confirmFilePassword" | i18n }}</bit-label>
             <input
               bitInput
-              required
+              type="password"
-              [type]="showFilePassword ? 'text' : 'password'"
               name="filePassword"
               [formControl]="filePassword"
               appAutofocus
               appInputVerbatim
             />
-            <button
+            <button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
-              bitSuffix
-              bitButton
-              appStopClick
-              appA11yTitle="{{ 'toggleVisibility' | i18n }}"
-              [attr.aria-pressed]="showFilePassword"
-              (click)="toggleFilePassword()"
-              type="button"
-            >
-              <i
-                class="bwi bwi-lg"
-                aria-hidden="true"
-                [ngClass]="{ 'bwi-eye': !showFilePassword, 'bwi-eye-slash': showFilePassword }"
-              ></i>
-            </button>
           </bit-form-field>
         </div>
         <div

apps/web/src/app/tools/import-export/file-password-prompt.component.ts

@@ -7,15 +7,10 @@ import { ModalRef } from "@bitwarden/angular/components/modal/modal.ref";
   templateUrl: "file-password-prompt.component.html",
 })
 export class FilePasswordPromptComponent {
-  showFilePassword: boolean;
   filePassword = new FormControl("", Validators.required);
 
   constructor(private modalRef: ModalRef) {}
 
-  toggleFilePassword() {
-    this.showFilePassword = !this.showFilePassword;
-  }
-
   submit() {
     this.filePassword.markAsTouched();
     if (!this.filePassword.valid) {

bitwarden_license/bit-web/src/app/organizations/manage/scim.component.html

@@ -42,12 +42,10 @@
     <button
       type="button"
       bitSuffix
-      bitButton
+      bitIconButton="bwi-clone"
       (click)="copyScimUrl()"
       [appA11yTitle]="'copyScimUrl' | i18n"
-    >
+    ></button>
-      <i aria-hidden="true" class="bwi bwi-lg bwi-clone"></i>
-    </button>
   </bit-form-field>
 
   <bit-form-field *ngIf="showScimSettings">
@@ -59,40 +57,33 @@
       id="clientSecret"
     />
     <ng-container>
-      <button type="button" bitSuffix bitButton (click)="toggleScimKey()">
-        <i
-          aria-hidden="true"
-          class="bwi bwi-lg bwi-eye"
-          [ngClass]="{ 'bwi-eye': !showScimKey, 'bwi-eye-slash': showScimKey }"
-          [appA11yTitle]="'toggleVisibility' | i18n"
-        ></i>
-      </button>
-    </ng-container>
-    <ng-container #rotateButton [appApiAction]="rotatePromise">
       <button
-        [disabled]="$any(rotateButton).loading"
         type="button"
         bitSuffix
-        bitButton
+        [disabled]="$any(rotateButton).loading"
+        [bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
+        (click)="toggleScimKey()"
+        [appA11yTitle]="'toggleVisibility' | i18n"
+      ></button>
+    </ng-container>
+    <ng-container #rotateButton [appApiAction]="rotatePromise">
+      <!-- TODO: Convert to async actions -->
+      <button
+        [loading]="$any(rotateButton).loading"
+        type="button"
+        bitSuffix
+        bitIconButton="bwi-generate"
         (click)="rotateScimKey()"
         [appA11yTitle]="'rotateScimKey' | i18n"
-      >
+      ></button>
-        <i
-          aria-hidden="true"
-          class="bwi bwi-lg bwi-generate"
-          [ngClass]="{ 'bwi-spin': $any(rotateButton).loading }"
-        ></i>
-      </button>
     </ng-container>
     <button
       type="button"
       bitSuffix
-      bitButton
+      bitIconButton="bwi-clone"
       (click)="copyScimKey()"
       [appA11yTitle]="'copyScimKey' | i18n"
-    >
+    ></button>
-      <i aria-hidden="true" class="bwi bwi-lg bwi-clone"></i>
-    </button>
     <bit-hint>{{ "scimApiKeyHelperText" | i18n }}</bit-hint>
   </bit-form-field>
 

bitwarden_license/bit-web/src/app/organizations/manage/sso.component.html

@@ -151,28 +151,24 @@
         <bit-label>{{ "callbackPath" | i18n }}</bit-label>
         <input bitInput disabled [value]="callbackPath" />
         <button
-          bitButton
+          bitIconButton="bwi-clone"
           bitSuffix
           type="button"
           [appCopyClick]="callbackPath"
           [appA11yTitle]="'copyValue' | i18n"
-        >
+        ></button>
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
       </bit-form-field>
 
       <bit-form-field>
         <bit-label>{{ "signedOutCallbackPath" | i18n }}</bit-label>
         <input bitInput disabled [value]="signedOutCallbackPath" />
         <button
-          bitButton
+          bitIconButton="bwi-clone"
           bitSuffix
           type="button"
           [appCopyClick]="signedOutCallbackPath"
           [appA11yTitle]="'copyValue' | i18n"
-        >
+        ></button>
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
       </bit-form-field>
 
       <bit-form-field>
@@ -292,14 +288,12 @@
         <bit-label>{{ "spEntityId" | i18n }}</bit-label>
         <input bitInput disabled [value]="spEntityId" />
         <button
-          bitButton
+          bitIconButton="bwi-clone"
           bitSuffix
           type="button"
           [appCopyClick]="spEntityId"
           [appA11yTitle]="'copyValue' | i18n"
-        >
+        ></button>
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
       </bit-form-field>
 
       <bit-form-field>
@@ -315,28 +309,24 @@
           <i class="bwi bwi-lg bwi-external-link" aria-hidden="true"></i>
         </button>
         <button
-          bitButton
+          bitIconButton="bwi-clone"
           bitSuffix
           type="button"
           [appCopyClick]="spMetadataUrl"
           [appA11yTitle]="'copyValue' | i18n"
-        >
+        ></button>
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
       </bit-form-field>
 
       <bit-form-field>
         <bit-label>{{ "spAcsUrl" | i18n }}</bit-label>
         <input bitInput disabled [value]="spAcsUrl" />
         <button
-          bitButton
+          bitIconButton="bwi-clone"
           bitSuffix
           type="button"
           [appCopyClick]="spAcsUrl"
           [appA11yTitle]="'copyValue' | i18n"
-        >
+        ></button>
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
       </bit-form-field>
 
       <bit-form-field>

libs/angular/src/components/export.component.ts

@@ -21,8 +21,6 @@ export class ExportComponent implements OnInit, OnDestroy {
 
   formPromise: Promise<string>;
   disabledByPolicy = false;
-  showFilePassword: boolean;
-  showConfirmFilePassword: boolean;
 
   exportForm = this.formBuilder.group({
     format: ["json"],
@@ -199,16 +197,6 @@ export class ExportComponent implements OnInit, OnDestroy {
     return this.exportForm.get("fileEncryptionType").value;
   }
 
-  toggleFilePassword() {
-    this.showFilePassword = !this.showFilePassword;
-    document.getElementById("filePassword").focus();
-  }
-
-  toggleConfirmFilePassword() {
-    this.showConfirmFilePassword = !this.showConfirmFilePassword;
-    document.getElementById("confirmFilePassword").focus();
-  }
-
   adjustValidators() {
     this.exportForm.get("confirmFilePassword").reset();
     this.exportForm.get("filePassword").reset();

libs/components/src/async-actions/in-forms.stories.ts

@@ -27,6 +27,7 @@ const template = `
     <bit-form-field>
       <bit-label>Email</bit-label>
       <input bitInput formControlName="email" />
+      <button type="button" bitSuffix bitIconButton="bwi-refresh" bitFormButton [bitAction]="refresh"></button>
     </bit-form-field>
 
     <button class="tw-mr-2" type="submit" buttonType="primary" bitButton bitFormButton>Submit</button>
@@ -47,6 +48,12 @@ class PromiseExampleComponent {
 
   constructor(private formBuilder: FormBuilder) {}
 
+  refresh = async () => {
+    await new Promise<void>((resolve, reject) => {
+      setTimeout(resolve, 2000);
+    });
+  };
+
   submit = async () => {
     this.formObj.markAllAsTouched();
 
@@ -78,6 +85,10 @@ class ObservableExampleComponent {
 
   constructor(private formBuilder: FormBuilder) {}
 
+  refresh = () => {
+    return of("fake observable").pipe(delay(2000));
+  };
+
   submit = () => {
     this.formObj.markAllAsTouched();
 

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;
+  setButtonType(value: "primary" | "secondary" | "danger" | "unstyled") {
-
+    this.buttonType = value;
-  get iconClass() {
-    return [this.icon, "!tw-m-0"];
   }
 }

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",
-};

libs/components/src/form-field/form-field.stories.ts

@@ -11,8 +11,10 @@ import { Meta, moduleMetadata, Story } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
+import { AsyncActionsModule } from "../async-actions";
 import { ButtonModule } from "../button";
 import { CheckboxModule } from "../checkbox";
+import { IconButtonModule } from "../icon-button";
 import { InputModule } from "../input/input.module";
 import { RadioButtonModule } from "../radio-button";
 import { I18nMockService } from "../utils/i18n-mock.service";
@@ -31,6 +33,8 @@ export default {
         FormFieldModule,
         InputModule,
         ButtonModule,
+        IconButtonModule,
+        AsyncActionsModule,
         CheckboxModule,
         RadioButtonModule,
       ],
@@ -177,10 +181,13 @@ const ButtonGroupTemplate: Story<BitFormFieldComponent> = (args: BitFormFieldCom
   props: args,
   template: `
     <bit-form-field>
-      <bit-label>Label</bit-label>
+      <button bitPrefix bitIconButton="bwi-star"></button>
-      <input bitInput placeholder="Placeholder" type="password" />
+      <input bitInput placeholder="Placeholder" />
-      <button bitSuffix bitButton bitIconButton="bwi-eye"></button>
+      <button bitSuffix bitIconButton="bwi-eye"></button>
-      <button bitSuffix bitButton bitIconButton="bwi-clone"></button>
+      <button bitSuffix bitIconButton="bwi-clone"></button>
+      <button bitSuffix bitButton>
+        Apply
+      </button>
     </bit-form-field>
   `,
 });
@@ -195,9 +202,13 @@ const DisabledButtonInputGroupTemplate: Story<BitFormFieldComponent> = (
   template: `
     <bit-form-field>
       <bit-label>Label</bit-label>
+      <button bitPrefix bitIconButton="bwi-star" disabled></button>
       <input bitInput placeholder="Placeholder" disabled />
-      <button bitSuffix bitButton bitIconButton="bwi-eye" disabled></button>
+      <button bitSuffix bitIconButton="bwi-eye" disabled></button>
-      <button bitSuffix bitButton bitIconButton="bwi-clone"></button>
+      <button bitSuffix bitIconButton="bwi-clone" disabled></button>
+      <button bitSuffix bitButton disabled>
+        Apply
+      </button>
     </bit-form-field>
   `,
 });

libs/components/src/form-field/password-input-toggle.directive.ts

@@ -3,13 +3,16 @@ import {
   Directive,
   EventEmitter,
   Host,
+  HostBinding,
   HostListener,
   Input,
   OnChanges,
   Output,
 } from "@angular/core";
 
-import { ButtonComponent } from "../button";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 
 import { BitFormFieldComponent } from "./form-field.component";
 
@@ -17,9 +20,18 @@ import { BitFormFieldComponent } from "./form-field.component";
   selector: "[bitPasswordInputToggle]",
 })
 export class BitPasswordInputToggleDirective implements AfterContentInit, OnChanges {
-  @Input() toggled = false;
+  /**
+   * Whether the input is toggled to show the password.
+   */
+  @HostBinding("attr.aria-pressed") @Input() toggled = false;
   @Output() toggledChange = new EventEmitter<boolean>();
 
+  @HostBinding("attr.title") title = this.i18nService.t("toggleVisibility");
+  @HostBinding("attr.aria-label") label = this.i18nService.t("toggleVisibility");
+
+  /**
+   * Click handler to toggle the state of the input type.
+   */
   @HostListener("click") onClick() {
     this.toggled = !this.toggled;
     this.toggledChange.emit(this.toggled);
@@ -29,7 +41,11 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
     this.formField.input?.focus();
   }
 
-  constructor(@Host() private button: ButtonComponent, private formField: BitFormFieldComponent) {}
+  constructor(
+    @Host() private button: BitIconButtonComponent,
+    private formField: BitFormFieldComponent,
+    private i18nService: I18nService
+  ) {}
 
   get icon() {
     return this.toggled ? "bwi-eye-slash" : "bwi-eye";

libs/components/src/form-field/password-input-toggle.spec.ts

@@ -2,8 +2,12 @@ import { Component, DebugElement } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 
-import { ButtonComponent, ButtonModule } from "../button";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { IconButtonModule } from "../icon-button";
+import { BitIconButtonComponent } from "../icon-button/icon-button.component";
 import { InputModule } from "../input/input.module";
+import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { BitFormFieldControl } from "./form-field-control";
 import { BitFormFieldComponent } from "./form-field.component";
@@ -17,7 +21,7 @@ import { BitPasswordInputToggleDirective } from "./password-input-toggle.directi
       <bit-form-field>
         <bit-label>Password</bit-label>
         <input bitInput type="password" />
-        <button type="button" bitButton bitSuffix bitPasswordInputToggle></button>
+        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
       </bit-form-field>
     </form>
   `,
@@ -26,21 +30,22 @@ class TestFormFieldComponent {}
 
 describe("PasswordInputToggle", () => {
   let fixture: ComponentFixture<TestFormFieldComponent>;
-  let button: ButtonComponent;
+  let button: BitIconButtonComponent;
   let input: BitFormFieldControl;
   let toggle: DebugElement;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FormFieldModule, ButtonModule, InputModule],
+      imports: [FormFieldModule, IconButtonModule, InputModule],
       declarations: [TestFormFieldComponent],
+      providers: [{ provide: I18nService, useValue: new I18nMockService({}) }],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TestFormFieldComponent);
     fixture.detectChanges();
 
     toggle = fixture.debugElement.query(By.directive(BitPasswordInputToggleDirective));
-    const buttonEl = fixture.debugElement.query(By.directive(ButtonComponent));
+    const buttonEl = fixture.debugElement.query(By.directive(BitIconButtonComponent));
     button = buttonEl.componentInstance;
     const formFieldEl = fixture.debugElement.query(By.directive(BitFormFieldComponent));
     const formField: BitFormFieldComponent = formFieldEl.componentInstance;

libs/components/src/form-field/password-input-toggle.stories.ts

@@ -1,8 +1,11 @@
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { Meta, moduleMetadata, Story } from "@storybook/angular";
 
-import { ButtonModule } from "../button";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { IconButtonModule } from "../icon-button";
 import { InputModule } from "../input/input.module";
+import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { FormFieldModule } from "./form-field.module";
 import { BitPasswordInputToggleDirective } from "./password-input-toggle.directive";
@@ -12,7 +15,13 @@ export default {
   component: BitPasswordInputToggleDirective,
   decorators: [
     moduleMetadata({
-      imports: [FormsModule, ReactiveFormsModule, FormFieldModule, InputModule, ButtonModule],
+      imports: [FormsModule, ReactiveFormsModule, FormFieldModule, InputModule, IconButtonModule],
+      providers: [
+        {
+          provide: I18nService,
+          useValue: new I18nMockService({ toggleVisibility: "Toggle visibility" }),
+        },
+      ],
     }),
   ],
   parameters: {
@@ -40,7 +49,7 @@ const Template: Story<BitPasswordInputToggleDirective> = (
       <bit-form-field>
         <bit-label>Password</bit-label>
         <input bitInput type="password" />
-        <button type="button" bitButton bitSuffix bitPasswordInputToggle></button>
+        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle></button>
       </bit-form-field>
     </form>
   `,
@@ -60,7 +69,7 @@ const TemplateBinding: Story<BitPasswordInputToggleDirective> = (
       <bit-form-field>
         <bit-label>Password</bit-label>
         <input bitInput type="password" />
-        <button type="button" bitButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
+        <button type="button" bitIconButton bitSuffix bitPasswordInputToggle [(toggled)]="toggled"></button>
       </bit-form-field>
 
       <label class="tw-text-main">

libs/components/src/form-field/prefix.directive.ts

@@ -1,24 +1,51 @@
-import { Directive, HostBinding, Input } from "@angular/core";
+import { Directive, HostBinding, Input, OnInit, Optional } from "@angular/core";
+
+import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
 
 export const PrefixClasses = [
-  "tw-block",
-  "tw-px-3",
-  "tw-py-1.5",
   "tw-bg-background-alt",
   "tw-border",
   "tw-border-solid",
   "tw-border-secondary-500",
   "tw-text-muted",
   "tw-rounded-none",
-  "disabled:!tw-text-muted",
-  "disabled:tw-border-secondary-500",
 ];
 
+export const PrefixButtonClasses = [
+  "hover:tw-bg-text-muted",
+  "hover:tw-text-contrast",
+  "disabled:tw-opacity-100",
+  "disabled:tw-bg-secondary-100",
+  "disabled:hover:tw-bg-secondary-100",
+  "disabled:hover:tw-text-muted",
+  "focus-visible:tw-ring-primary-700",
+
+  "focus-visible:tw-border-primary-700",
+  "focus-visible:tw-ring-1",
+  "focus-visible:tw-ring-inset",
+  "focus-visible:tw-ring-primary-700",
+  "focus-visible:tw-z-10",
+];
+
+export const PrefixStaticContentClasses = ["tw-block", "tw-px-3", "tw-py-1.5"];
+
 @Directive({
   selector: "[bitPrefix]",
 })
-export class BitPrefixDirective {
+export class BitPrefixDirective implements OnInit {
+  constructor(@Optional() private buttonComponent: ButtonLikeAbstraction) {}
+
   @HostBinding("class") @Input() get classList() {
-    return PrefixClasses.concat(["tw-border-r-0", "first:tw-rounded-l"]);
+    return PrefixClasses.concat([
+      "tw-border-r-0",
+      "first:tw-rounded-l",
+
+      "focus-visible:tw-border-r",
+      "focus-visible:tw-mr-[-1px]",
+    ]).concat(this.buttonComponent != undefined ? PrefixButtonClasses : PrefixStaticContentClasses);
+  }
+
+  ngOnInit(): void {
+    this.buttonComponent?.setButtonType("unstyled");
   }
 }

libs/components/src/form-field/suffix.directive.ts

@@ -1,12 +1,26 @@
-import { Directive, HostBinding, Input } from "@angular/core";
+import { Directive, HostBinding, Input, Optional } from "@angular/core";
 
-import { PrefixClasses } from "./prefix.directive";
+import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+
+import { PrefixButtonClasses, PrefixClasses, PrefixStaticContentClasses } from "./prefix.directive";
 
 @Directive({
   selector: "[bitSuffix]",
 })
 export class BitSuffixDirective {
+  constructor(@Optional() private buttonComponent: ButtonLikeAbstraction) {}
+
   @HostBinding("class") @Input() get classList() {
-    return PrefixClasses.concat(["tw-border-l-0", "last:tw-rounded-r"]);
+    return PrefixClasses.concat([
+      "tw-border-l-0",
+      "last:tw-rounded-r",
+
+      "focus-visible:tw-border-l",
+      "focus-visible:tw-ml-[-1px]",
+    ]).concat(this.buttonComponent != undefined ? PrefixButtonClasses : PrefixStaticContentClasses);
+  }
+
+  ngOnInit(): void {
+    this.buttonComponent?.setButtonType("unstyled");
   }
 }

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

@@ -1,8 +1,26 @@
 import { Component, HostBinding, Input } from "@angular/core";
 
-import { ButtonLikeAbstraction } from "../shared/button-like.abstraction";
+import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
 
-export type IconButtonType = "contrast" | "main" | "muted" | "primary" | "secondary" | "danger";
+export type IconButtonType = ButtonType | "contrast" | "main" | "muted";
+
+const focusRing = [
+  // Workaround for box-shadow with transparent offset issue:
+  // https://github.com/tailwindlabs/tailwindcss/issues/3595
+  // Remove `before:` and use regular `tw-ring` when browser no longer has bug, or better:
+  // switch to `outline` with `outline-offset` when Safari supports border radius on outline.
+  // Using `box-shadow` to create outlines is a hack and as such `outline` should be preferred.
+  "tw-relative",
+  "before:tw-content-['']",
+  "before:tw-block",
+  "before:tw-absolute",
+  "before:-tw-inset-[3px]",
+  "before:tw-rounded-md",
+  "before:tw-transition",
+  "before:tw-ring",
+  "before:tw-ring-transparent",
+  "focus-visible:tw-z-10",
+];
 
 const styles: Record<IconButtonType, string[]> = {
   contrast: [
@@ -12,8 +30,10 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-text-contrast",
     "focus-visible:before:tw-ring-text-contrast",
+    "disabled:tw-opacity-60",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
+    ...focusRing,
   ],
   main: [
     "tw-bg-transparent",
@@ -22,8 +42,10 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-text-main",
     "focus-visible:before:tw-ring-text-main",
+    "disabled:tw-opacity-60",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
+    ...focusRing,
   ],
   muted: [
     "tw-bg-transparent",
@@ -32,8 +54,10 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-transparent-hover",
     "hover:tw-border-primary-700",
     "focus-visible:before:tw-ring-primary-700",
+    "disabled:tw-opacity-60",
     "disabled:hover:tw-border-transparent",
     "disabled:hover:tw-bg-transparent",
+    ...focusRing,
   ],
   primary: [
     "tw-bg-primary-500",
@@ -42,8 +66,10 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:tw-bg-primary-700",
     "hover:tw-border-primary-700",
     "focus-visible:before:tw-ring-primary-700",
+    "disabled:tw-opacity-60",
     "disabled:hover:tw-border-primary-500",
     "disabled:hover:tw-bg-primary-500",
+    ...focusRing,
   ],
   secondary: [
     "tw-bg-transparent",
@@ -52,10 +78,12 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:!tw-text-contrast",
     "hover:tw-bg-text-muted",
     "focus-visible:before:tw-ring-primary-700",
+    "disabled:tw-opacity-60",
     "disabled:hover:tw-border-text-muted",
     "disabled:hover:tw-bg-transparent",
     "disabled:hover:!tw-text-muted",
     "disabled:hover:tw-border-text-muted",
+    ...focusRing,
   ],
   danger: [
     "tw-bg-transparent",
@@ -64,11 +92,14 @@ const styles: Record<IconButtonType, string[]> = {
     "hover:!tw-text-contrast",
     "hover:tw-bg-danger-500",
     "focus-visible:before:tw-ring-primary-700",
+    "disabled:tw-opacity-60",
     "disabled:hover:tw-border-danger-500",
     "disabled:hover:tw-bg-transparent",
     "disabled:hover:!tw-text-danger",
     "disabled:hover:tw-border-danger-500",
+    ...focusRing,
   ],
+  unstyled: [],
 };
 
 export type IconButtonSize = "default" | "small";
@@ -86,7 +117,7 @@ const sizes: Record<IconButtonSize, string[]> = {
 export class BitIconButtonComponent implements ButtonLikeAbstraction {
   @Input("bitIconButton") icon: string;
 
-  @Input() buttonType: IconButtonType = "main";
+  @Input() buttonType: IconButtonType;
 
   @Input() size: IconButtonSize = "default";
 
@@ -98,27 +129,9 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction {
       "tw-rounded",
       "tw-transition",
       "hover:tw-no-underline",
-      "disabled:tw-opacity-60",
       "focus:tw-outline-none",
-
-      // Workaround for box-shadow with transparent offset issue:
-      // https://github.com/tailwindlabs/tailwindcss/issues/3595
-      // Remove `before:` and use regular `tw-ring` when browser no longer has bug, or better:
-      // switch to `outline` with `outline-offset` when Safari supports border radius on outline.
-      // Using `box-shadow` to create outlines is a hack and as such `outline` should be preferred.
-      "tw-relative",
-      "before:tw-content-['']",
-      "before:tw-block",
-      "before:tw-absolute",
-      "before:-tw-inset-[3px]",
-      "before:tw-rounded-md",
-      "before:tw-transition",
-      "before:tw-ring",
-      "before:tw-ring-transparent",
-      "focus-visible:before:tw-ring-text-contrast",
-      "focus-visible:tw-z-10",
     ]
-      .concat(styles[this.buttonType])
+      .concat(styles[this.buttonType ?? "main"])
       .concat(sizes[this.size]);
   }
 
@@ -134,4 +147,8 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction {
 
   @Input() loading = false;
   @Input() disabled = false;
+
+  setButtonType(value: "primary" | "secondary" | "danger" | "unstyled") {
+    this.buttonType = value;
+  }
 }

libs/components/src/input/input.directive.ts

@@ -31,6 +31,7 @@ export class BitInputDirective implements BitFormFieldControl {
       "focus:tw-outline-none",
       "focus:tw-border-primary-700",
       "focus:tw-ring-1",
+      "focus:tw-ring-inset",
       "focus:tw-ring-primary-700",
       "focus:tw-z-10",
       "disabled:tw-bg-secondary-100",

libs/components/src/shared/button-like.abstraction.ts

@@ -1,4 +1,7 @@
+export type ButtonType = "primary" | "secondary" | "danger" | "unstyled";
+
 export abstract class ButtonLikeAbstraction {
   loading: boolean;
   disabled: boolean;
+  setButtonType: (value: ButtonType) => void;
 }