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

UIF - Prefer signal & change detection (#16940)

Browse Source
This commit is contained in:
Oscar Hinton
2025-10-21 18:52:40 +02:00
committed by GitHub
parent d3fc20f8b9
commit 65da23feaa
135 changed files with 503 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/src/button/button.component.spec.ts
View File

@@ -56,6 +56,8 @@ describe("Button", () => {
});
});
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "test-app",
template: `

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

@@ -57,6 +57,8 @@ const buttonStyles: Record<ButtonType, string[]> = {
unstyled: [],
};
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "button[bitButton], a[bitButton]",
templateUrl: "button.component.html",
@@ -97,7 +99,7 @@ export class ButtonComponent implements ButtonLikeAbstraction {
.concat(buttonSizeStyles[this.size() || "default"]);
}
protected disabledAttr = computed(() => {
protected readonly disabledAttr = computed(() => {
const disabled = this.disabled() != null && this.disabled() !== false;
return disabled || this.loading();
});
@@ -110,7 +112,7 @@ export class ButtonComponent implements ButtonLikeAbstraction {
* We can't use `disabledAttr` for this, because it returns `true` when `loading` is `true`.
* We only want to show disabled styles during loading if `showLoadingStyles` is `true`.
*/
protected showDisabledStyles = computed(() => {
protected readonly showDisabledStyles = computed(() => {
return this.showLoadingStyle() || (this.disabledAttr() && this.loading() === false);
});
@@ -134,11 +136,11 @@ export class ButtonComponent implements ButtonLikeAbstraction {
* This pattern of converting a signal to an observable and back to a signal is not
* recommended. TODO -- find better way to use debounce with signals (CL-596)
*/
protected showLoadingStyle = toSignal(
protected readonly showLoadingStyle = toSignal(
toObservable(this.loading).pipe(debounce((isLoading) => interval(isLoading ? 75 : 0))),
);
disabled = model<boolean>(false);
readonly disabled = model<boolean>(false);
private el = inject(ElementRef<HTMLButtonElement>);
constructor() {