[EC-556] refactor cl button (#3537)

* [EC-556] feat: convert button into component * [EC-556] feat: implement loading state * [EC-556] feat: remove loading from submit button * [EC-556] fix: add missing import * [EC-556] fix: disabling button using regular attribute * [EC-556] fix: missing loading input in story templates * [EC-556] feat: remove and replace submit button * Fix packaging on Build Web workflow (#3613) (cherry picked from commit 67c447d54c) * [EC-556] fix: replaced buttons should be primary Co-authored-by: Vince Grassia <593223+vgrassia@users.noreply.github.com>
2025-12-11 05:43:41 +00:00 · 2022-09-27 11:25:53 +02:00
parent b5de573497
commit cd7c9bfd9f
26 changed files with 181 additions and 148 deletions
--- a/apps/web/src/app/accounts/register-form/register-form.component.html
+++ b/apps/web/src/app/accounts/register-form/register-form.component.html
@@ -114,7 +114,9 @@

    <div class="tw-mb-3 tw-flex">
      <ng-container *ngIf="!accountCreated">
-        <bit-submit-button [loading]="form.loading">{{ "createAccount" | i18n }}</bit-submit-button>
+        <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
+          {{ "createAccount" | i18n }}
+        </button>
        <a
          bitButton
          buttonType="secondary"
@@ -126,7 +128,9 @@
        </a>
      </ng-container>
      <ng-container *ngIf="accountCreated">
-        <bit-submit-button [loading]="form.loading">{{ "logIn" | i18n }}</bit-submit-button>
+        <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
+          {{ "logIn" | i18n }}
+        </button>
      </ng-container>
    </div>
    <bit-error-summary *ngIf="showErrorSummary" [formGroup]="formGroup"></bit-error-summary>
--- a/apps/web/src/app/accounts/trial-initiation/billing.component.html
+++ b/apps/web/src/app/accounts/trial-initiation/billing.component.html
@@ -40,7 +40,9 @@
    </div>

    <div class="tw-flex tw-space-x-2">
-      <bit-submit-button [loading]="form.loading">{{ "startTrial" | i18n }}</bit-submit-button>
+      <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
+        {{ "startTrial" | i18n }}
+      </button>

      <button bitButton type="button" buttonType="secondary" (click)="stepBack()">Back</button>
    </div>
--- a/apps/web/src/app/organizations/settings/account.component.html
+++ b/apps/web/src/app/organizations/settings/account.component.html
@@ -66,9 +66,9 @@
      <app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
    </div>
  </div>
-  <bit-submit-button [loading]="form.loading">
+  <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
    {{ "save" | i18n }}
-  </bit-submit-button>
+  </button>
 </form>
 <ng-container *ngIf="canUseApi">
  <div class="secondary-header border-0 mb-0">
--- a/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html
+++ b/apps/web/src/app/organizations/users/enroll-master-password-reset.component.html
@@ -32,9 +32,9 @@
        <app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
      </div>
      <div class="modal-footer">
-        <bit-submit-button [loading]="form.loading">
+        <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
          {{ "submit" | i18n }}
-        </bit-submit-button>
+        </button>
        <button
          bitButton
          buttonType="secondary"
--- a/apps/web/src/app/reports/pages/breach-report.component.html
+++ b/apps/web/src/app/reports/pages/breach-report.component.html
@@ -17,9 +17,9 @@
      <small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
    </div>
  </div>
-  <bit-submit-button [loading]="form.loading">
+  <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
    {{ "checkBreaches" | i18n }}
-  </bit-submit-button>
+  </button>
 </form>
 <div class="mt-4" *ngIf="!form.loading && checkedUsername">
  <p *ngIf="error">{{ "reportError" | i18n }}...</p>
--- a/apps/web/src/app/reports/pages/exposed-passwords-report.component.html
+++ b/apps/web/src/app/reports/pages/exposed-passwords-report.component.html
@@ -2,9 +2,9 @@
  <h1>{{ "exposedPasswordsReport" | i18n }}</h1>
 </div>
 <p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
-<bit-submit-button [loading]="loading" (click)="load()">
+<button type="submit" buttonType="primary" bitButton [loading]="loading" (click)="load()">
  {{ "checkExposedPasswords" | i18n }}
-</bit-submit-button>
+</button>
 <div class="mt-4" *ngIf="hasLoaded">
  <app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
    {{ "noExposedPasswords" | i18n }}
--- a/apps/web/src/app/settings/change-kdf.component.html
+++ b/apps/web/src/app/settings/change-kdf.component.html
@@ -71,7 +71,7 @@
      </div>
    </div>
  </div>
-  <bit-submit-button [loading]="form.loading">
+  <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
    {{ "changeKdf" | i18n }}
-  </bit-submit-button>
+  </button>
 </form>
--- a/apps/web/src/app/settings/change-password.component.html
+++ b/apps/web/src/app/settings/change-password.component.html
@@ -100,7 +100,7 @@
      </a>
    </div>
  </div>
-  <bit-submit-button [loading]="form.loading">
+  <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
    {{ "changeMasterPassword" | i18n }}
-  </bit-submit-button>
+  </button>
 </form>
--- a/apps/web/src/app/settings/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/settings/emergency-access-add-edit.component.html
@@ -100,9 +100,15 @@
        </div>
      </div>
      <div class="modal-footer">
-        <bit-submit-button [loading]="loading || form.loading" [disabled]="readOnly">
+        <button
+          type="submit"
+          buttonType="primary"
+          bitButton
+          [loading]="loading || form.loading"
+          [disabled]="readOnly"
+        >
          {{ "save" | i18n }}
-        </bit-submit-button>
+        </button>
        <button bitButton buttonType="secondary" type="button" data-dismiss="modal">
          {{ "cancel" | i18n }}
        </button>
--- a/apps/web/src/app/settings/organization-plans.component.html
+++ b/apps/web/src/app/settings/organization-plans.component.html
@@ -318,9 +318,15 @@
    <app-callout [type]="'error'">{{ "singleOrgBlockCreateMessage" | i18n }}</app-callout>
  </div>
  <div class="mt-4">
-    <bit-submit-button [loading]="form.loading" [disabled]="!formGroup.valid">{{
-      "submit" | i18n
-    }}</bit-submit-button>
+    <button
+      type="submit"
+      buttonType="primary"
+      bitButton
+      [loading]="form.loading"
+      [disabled]="!formGroup.valid"
+    >
+      {{ "submit" | i18n }}
+    </button>
    <button type="button" class="btn btn-outline-secondary" (click)="cancel()" *ngIf="showCancel">
      {{ "cancel" | i18n }}
    </button>
--- a/apps/web/src/app/settings/premium.component.html
+++ b/apps/web/src/app/settings/premium.component.html
@@ -68,9 +68,9 @@
        "licenseFileDesc" | i18n: "bitwarden_premium_license.json"
      }}</small>
    </div>
-    <bit-submit-button [loading]="form.loading">
+    <button type="submit" buttonType="primary" bitButton [loading]="form.loading">
      {{ "submit" | i18n }}
-    </bit-submit-button>
+    </button>
  </form>
 </ng-container>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
@@ -118,7 +118,7 @@
    </p>
  </div>
  <small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
-  <bit-submit-button [loading]="form.loading">
+  <button type="submit" bitButton [loading]="form.loading">
    {{ "submit" | i18n }}
-  </bit-submit-button>
+  </button>
 </form>
--- a/apps/web/src/app/settings/two-factor-setup.component.html
+++ b/apps/web/src/app/settings/two-factor-setup.component.html
@@ -77,9 +77,15 @@
        </div>
        <small class="form-text text-muted">{{ "deviceVerificationDesc" | i18n }}</small>
      </div>
-      <bit-submit-button [loading]="form.loading" *ngIf="isDeviceVerificationSectionEnabled">
+      <button
+        type="submit"
+        buttonType="primary"
+        bitButton
+        [loading]="form.loading"
+        *ngIf="isDeviceVerificationSectionEnabled"
+      >
        {{ "save" | i18n }}
-      </bit-submit-button>
+      </button>
    </div>
  </div>
 </form>
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/apps/web/src/app/shared/shared.module.ts
@@ -12,7 +12,6 @@ import {
  ButtonModule,
  CalloutModule,
  FormFieldModule,
-  SubmitButtonModule,
  MenuModule,
  IconModule,
 } from "@bitwarden/components";
@@ -44,7 +43,6 @@ import "./locales";
    ButtonModule,
    MenuModule,
    FormFieldModule,
-    SubmitButtonModule,
    IconModule,
  ],
  exports: [
@@ -63,7 +61,6 @@ import "./locales";
    ButtonModule,
    MenuModule,
    FormFieldModule,
-    SubmitButtonModule,
    IconModule,
  ],
  providers: [DatePipe],