[CL-11] Submit button (#2971)

* Begin implementing submit button

* Add submit button

* Update figma url

* Add disabled when loading

* Update existing submit buttons

* Move template to it's own file
This commit is contained in:
Oscar Hinton 2022-06-29 16:27:42 +02:00 committed by GitHub
parent 4ea359a2d2
commit e105a8f222
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 121 additions and 82 deletions

View File

@ -32,16 +32,9 @@
<app-user-verification [(ngModel)]="verification" name="secret"> </app-user-verification>
</div>
<div class="modal-footer">
<button bitButton buttonType="primary" type="submit" [disabled]="form.loading">
<i
class="bwi bwi-spinner bwi-spin"
title="{{ 'loading' | i18n }}"
*ngIf="form.loading"
></i>
<span>
{{ "submit" | i18n }}
</span>
</button>
<bit-submit-button [loading]="form.loading">
{{ "submit" | i18n }}
</bit-submit-button>
<button
bitButton
buttonType="secondary"

View File

@ -57,7 +57,13 @@ import { InfiniteScrollModule } from "ngx-infinite-scroll";
import { ToastrModule } from "ngx-toastr";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { BadgeModule, ButtonModule, CalloutModule, MenuModule } from "@bitwarden/components";
import {
BadgeModule,
ButtonModule,
CalloutModule,
MenuModule,
SubmitButtonModule,
} from "@bitwarden/components";
registerLocaleData(localeAf, "af");
registerLocaleData(localeAz, "az");
@ -126,6 +132,7 @@ registerLocaleData(localeZhTw, "zh-TW");
BadgeModule,
ButtonModule,
MenuModule,
SubmitButtonModule,
],
exports: [
CommonModule,
@ -142,6 +149,7 @@ registerLocaleData(localeZhTw, "zh-TW");
BadgeModule,
ButtonModule,
MenuModule,
SubmitButtonModule,
],
providers: [DatePipe],
bootstrap: [],

View File

@ -66,10 +66,9 @@
<app-avatar data="{{ org.name }}" dynamic="true" size="75" fontSize="35"></app-avatar>
</div>
</div>
<button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "save" | i18n }}</span>
</button>
<bit-submit-button [loading]="form.loading">
{{ "save" | i18n }}
</bit-submit-button>
</form>
<ng-container *ngIf="canUseApi">
<div class="secondary-header border-0 mb-0">

View File

@ -17,10 +17,9 @@
<small class="form-text text-muted">{{ "breachCheckUsernameEmail" | i18n }}</small>
</div>
</div>
<button bitButton buttonType="primary" class="btn-submit" type="submit" [disabled]="form.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "checkBreaches" | i18n }}</span>
</button>
<bit-submit-button [loading]="form.loading">
{{ "checkBreaches" | i18n }}
</bit-submit-button>
</form>
<div class="mt-4" *ngIf="!form.loading && checkedUsername">
<p *ngIf="error">{{ "reportError" | i18n }}...</p>

View File

@ -2,17 +2,9 @@
<h1>{{ "exposedPasswordsReport" | i18n }}</h1>
</div>
<p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
<button
bitButton
buttonType="primary"
type="button"
class="btn-submit"
[disabled]="loading"
(click)="load()"
>
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "checkExposedPasswords" | i18n }}</span>
</button>
<bit-submit-button [loading]="loading" (click)="load()">
{{ "checkExposedPasswords" | i18n }}
</bit-submit-button>
<div class="mt-4" *ngIf="hasLoaded">
<app-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
{{ "noExposedPasswords" | i18n }}

View File

@ -71,8 +71,7 @@
</div>
</div>
</div>
<button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "changeKdf" | i18n }}</span>
</button>
<bit-submit-button [loading]="form.loading">
{{ "changeKdf" | i18n }}
</bit-submit-button>
</form>

View File

@ -87,8 +87,7 @@
</a>
</div>
</div>
<button bitButton buttonType="primary" class="btn-submit" [disabled]="form.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "changeMasterPassword" | i18n }}</span>
</button>
<bit-submit-button [loading]="form.loading">
{{ "changeMasterPassword" | i18n }}
</bit-submit-button>
</form>

View File

@ -100,20 +100,9 @@
</div>
</div>
<div class="modal-footer">
<button
bitButton
type="submit"
buttonType="primary"
[disabled]="loading || form.loading || readOnly"
>
<i
class="bwi bwi-spinner bwi-spin"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
*ngIf="loading || form.loading"
></i>
<span *ngIf="!loading && !form.loading">{{ "save" | i18n }}</span>
</button>
<bit-submit-button [loading]="loading || form.loading" [disabled]="readOnly">
{{ "save" | i18n }}
</bit-submit-button>
<button bitButton buttonType="secondary" type="button" data-dismiss="modal">
{{ "cancel" | i18n }}
</button>

View File

@ -68,16 +68,9 @@
"licenseFileDesc" | i18n: "bitwarden_premium_license.json"
}}</small>
</div>
<button
bitButton
buttonType="primary"
type="submit"
class="btn-submit"
[disabled]="form.loading"
>
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "submit" | i18n }}</span>
</button>
<bit-submit-button [loading]="form.loading">
{{ "submit" | i18n }}
</bit-submit-button>
</form>
</ng-container>
<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="!selfHosted">
@ -125,8 +118,7 @@
</p>
</div>
<small class="text-muted font-italic">{{ "paymentChargedAnnually" | i18n }}</small>
<button bitButton buttonType="primary" type="submit" class="btn-submit" [disabled]="form.loading">
<i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
<span>{{ "submit" | i18n }}</span>
</button>
<bit-submit-button [loading]="form.loading">
{{ "submit" | i18n }}
</bit-submit-button>
</form>

View File

@ -77,22 +77,9 @@
</div>
<small class="form-text text-muted">{{ "deviceVerificationDesc" | i18n }}</small>
</div>
<button
type="submit"
bitButton
buttonType="primary"
class="btn-submit"
[disabled]="form.loading"
*ngIf="isDeviceVerificationSectionEnabled"
>
<i
class="bwi bwi-spinner bwi-spin"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
*ngIf="form.loading"
></i>
<span>{{ "save" | i18n }}</span>
</button>
<bit-submit-button [loading]="form.loading" *ngIf="isDeviceVerificationSectionEnabled">
{{ "save" | i18n }}
</bit-submit-button>
</div>
</div>
</form>

View File

@ -5,3 +5,4 @@ export * from "./callout";
export * from "./form-field";
export * from "./menu";
export * from "./utils/i18n-mock.service";
export * from "./submit-button";

View File

@ -0,0 +1 @@
export * from "./submit-button.module";

View File

@ -0,0 +1,10 @@
<button bitButton type="submit" [buttonType]="buttonType" [disabled]="loading || disabled">
<span class="tw-relative">
<span [ngClass]="{ 'tw-invisible': loading }">
<ng-content></ng-content>
</span>
<span class="tw-absolute tw-inset-0" [ngClass]="{ 'tw-invisible': !loading }">
<i class="bwi bwi-spinner bwi-lg bwi-spin tw-align-baseline" aria-hidden="true"></i>
</span>
</span>
</button>

View File

@ -0,0 +1,13 @@
import { Component, Input } from "@angular/core";
import { ButtonTypes } from "../button";
@Component({
selector: "bit-submit-button",
templateUrl: "./submit-button.component.html",
})
export class SubmitButtonComponent {
@Input() buttonType: ButtonTypes = "primary";
@Input() disabled = false;
@Input() loading: boolean;
}

View File

@ -0,0 +1,13 @@
import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { ButtonModule } from "../button";
import { SubmitButtonComponent } from "./submit-button.component";
@NgModule({
imports: [CommonModule, ButtonModule],
exports: [SubmitButtonComponent],
declarations: [SubmitButtonComponent],
})
export class SubmitButtonModule {}

View File

@ -0,0 +1,44 @@
import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { SubmitButtonComponent } from "./submit-button.component";
import { SubmitButtonModule } from "./submit-button.module";
export default {
title: "Component Library/Submit Button",
component: SubmitButtonComponent,
decorators: [
moduleMetadata({
imports: [SubmitButtonModule],
}),
],
args: {
buttonType: "primary",
loading: false,
},
parameters: {
design: {
type: "figma",
url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A16733",
},
},
} as Meta;
const Template: Story<SubmitButtonComponent> = (args: SubmitButtonComponent) => ({
props: args,
template: `<bit-submit-button [buttonType]="buttonType" [loading]="loading" [disabled]="disabled">
Submit
</bit-submit-button>`,
});
export const Primary = Template.bind({});
Primary.args = {};
export const Loading = Template.bind({});
Loading.args = {
loading: true,
};
export const Disabled = Template.bind({});
Disabled.args = {
disabled: true,
};