bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-13 23:03:32 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* [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>
This commit is contained in:
Andreas Coroiu
2022-09-27 11:25:53 +02:00
committed by GitHub
parent b5de573497
commit cd7c9bfd9f
26 changed files with 181 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
libs/components/src/button/button.component.ts Normal file
View File

@@ -0,0 +1,79 @@
import { Input, HostBinding, Component } from "@angular/core";
export type ButtonTypes = "primary" | "secondary" | "danger";
const buttonStyles: Record<ButtonTypes, string[]> = {
primary: [
"tw-border-primary-500",
"tw-bg-primary-500",
"!tw-text-contrast",
"hover:tw-bg-primary-700",
"hover:tw-border-primary-700",
"disabled:tw-bg-primary-500/60",
"disabled:tw-border-primary-500/60",
"disabled:!tw-text-contrast/60",
"disabled:tw-bg-clip-padding",
],
secondary: [
"tw-bg-transparent",
"tw-border-text-muted",
"!tw-text-muted",
"hover:tw-bg-secondary-500",
"hover:tw-border-secondary-500",
"hover:!tw-text-contrast",
"disabled:tw-bg-transparent",
"disabled:tw-border-text-muted/60",
"disabled:!tw-text-muted/60",
],
danger: [
"tw-bg-transparent",
"tw-border-danger-500",
"!tw-text-danger",
"hover:tw-bg-danger-500",
"hover:tw-border-danger-500",
"hover:!tw-text-contrast",
"disabled:tw-bg-transparent",
"disabled:tw-border-danger-500/60",
"disabled:!tw-text-danger/60",
],
};
@Component({
selector: "button[bitButton], a[bitButton]",
templateUrl: "button.component.html",
})
export class ButtonComponent {
@HostBinding("class") get classList() {
return [
"tw-font-semibold",
"tw-py-1.5",
"tw-px-3",
"tw-rounded",
"tw-transition",
"tw-border",
"tw-border-solid",
"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"]
)
.concat(buttonStyles[this.buttonType ?? "secondary"]);
}
@HostBinding("attr.disabled")
get disabledAttr() {
const disabled = this.disabled != null && this.disabled !== false;
return disabled || this.loading ? true : null;
}
@Input() buttonType: ButtonTypes = null;
@Input() block?: boolean;
@Input() loading = false;
@Input() disabled = false;
}