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

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"
-    >
-      <i aria-hidden="true" class="bwi bwi-lg bwi-clone"></i>
-    </button>
+    ></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"
-      >
-        <i
-          aria-hidden="true"
-          class="bwi bwi-lg bwi-generate"
-          [ngClass]="{ 'bwi-spin': $any(rotateButton).loading }"
-        ></i>
-      </button>
+      ></button>
     </ng-container>
     <button
       type="button"
       bitSuffix
-      bitButton
+      bitIconButton="bwi-clone"
       (click)="copyScimKey()"
       [appA11yTitle]="'copyScimKey' | i18n"
-    >
-      <i aria-hidden="true" class="bwi bwi-lg bwi-clone"></i>
-    </button>
+    ></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"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></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"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></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"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></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"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></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"
-        >
-          <i class="bwi bwi-lg bwi-clone" aria-hidden="true"></i>
-        </button>
+        ></button>
       </bit-form-field>
 
       <bit-form-field>