bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-29 15:53:45 +00:00
Code Issues Releases Wiki Activity

make class list a computed signal

Browse Source
This commit is contained in:
Bryan Cunningham
2026-01-22 14:35:07 -05:00
parent 82097d9a7e
commit dc1ef64eec
1 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
libs/components/src/button/button.component.ts
View File

@@ -1,7 +1,6 @@
import { NgClass } from "@angular/common";
import {
input,
HostBinding,
Component,
model,
computed,
@@ -156,28 +155,30 @@ const getButtonStyles = (buttonType: ButtonType, size: ButtonSize): string[] =>
providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
imports: [NgClass, SpinnerComponent],
hostDirectives: [AriaDisableDirective],
host: {
"[class]": "classList()",
},
})
export class ButtonComponent implements ButtonLikeAbstraction {
@HostBinding("class") get classList() {
return []
.concat(this.block() ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
.concat(
this.showDisabledStyles() || this.disabled()
? [
"aria-disabled:!tw-bg-bg-disabled",
"hover:tw-bg-bg-hover",
"aria-disabled:tw-border-border-base",
"aria-disabled:hover:tw-border-border-base",
"hover:tw-border-border-disabled",
"aria-disabled:!tw-text-fg-disabled",
"hover:!tw-text-fg-disabled",
"aria-disabled:tw-cursor-not-allowed",
"hover:tw-no-underline",
]
: [],
)
.concat(getButtonStyles(this.buttonType() || "secondary", this.size() || "default"));
}
protected readonly classList = computed(() => {
return [
...(this.block() ? ["tw-w-full", "tw-block"] : ["tw-inline-block"]),
...(this.showDisabledStyles() || this.disabled()
? [
"aria-disabled:!tw-bg-bg-disabled",
"hover:tw-bg-bg-hover",
"aria-disabled:tw-border-border-base",
"aria-disabled:hover:tw-border-border-base",
"hover:tw-border-border-disabled",
"aria-disabled:!tw-text-fg-disabled",
"hover:!tw-text-fg-disabled",
"aria-disabled:tw-cursor-not-allowed",
"hover:tw-no-underline",
]
: []),
...getButtonStyles(this.buttonType() || "secondary", this.size() || "default"),
];
});
protected readonly disabledAttr = computed(() => {
const disabled = this.disabled() != null && this.disabled() !== false;