1
0
mirror of https://github.com/bitwarden/browser synced 2026-02-11 22:13:32 +00:00

finish migrating icon button

This commit is contained in:
Vicki League
2025-06-25 10:20:53 -04:00
parent 5590f9c283
commit e25d7cf45e
5 changed files with 12 additions and 16 deletions

View File

@@ -60,11 +60,11 @@ export class BitPasswordInputToggleDirective implements AfterContentInit, OnChan
if (this.formField.input?.type) {
this.toggled.set(this.formField.input.type() !== "password");
}
this.button.icon = this.icon;
this.button.icon.set(this.icon);
}
private update() {
this.button.icon = this.icon;
this.button.icon.set(this.icon);
if (this.formField.input?.type != null) {
this.formField.input.type.set(this.toggled() ? "text" : "password");
this.formField?.input?.spellcheck?.set(this.toggled() ? false : undefined);

View File

@@ -60,7 +60,7 @@ describe("PasswordInputToggle", () => {
describe("initial state", () => {
it("has correct icon", () => {
expect(button.icon).toBe("bwi-eye");
expect(button.icon()).toBe("bwi-eye");
});
it("input is type password", () => {
@@ -78,7 +78,7 @@ describe("PasswordInputToggle", () => {
});
it("has correct icon", () => {
expect(button.icon).toBe("bwi-eye-slash");
expect(button.icon()).toBe("bwi-eye-slash");
});
it("input is type text", () => {
@@ -97,7 +97,7 @@ describe("PasswordInputToggle", () => {
});
it("has correct icon", () => {
expect(button.icon).toBe("bwi-eye");
expect(button.icon()).toBe("bwi-eye");
});
it("input is type password", () => {

View File

@@ -15,7 +15,7 @@ export class BitPrefixDirective implements OnInit {
ngOnInit() {
if (this.iconButtonComponent) {
this.iconButtonComponent.size = "small";
this.iconButtonComponent.size.set("small");
}
}
}

View File

@@ -15,7 +15,7 @@ export class BitSuffixDirective implements OnInit {
ngOnInit() {
if (this.iconButtonComponent) {
this.iconButtonComponent.size = "small";
this.iconButtonComponent.size.set("small");
}
}
}

View File

@@ -1,7 +1,7 @@
// FIXME: Update this file to be type safe and remove this and next line
// @ts-strict-ignore
import { NgClass } from "@angular/common";
import { Component, computed, ElementRef, HostBinding, Input, model, input } from "@angular/core";
import { Component, computed, ElementRef, HostBinding, model, input } from "@angular/core";
import { toObservable, toSignal } from "@angular/core/rxjs-interop";
import { debounce, interval } from "rxjs";
@@ -167,15 +167,11 @@ const sizes: Record<IconButtonSize, string[]> = {
},
})
export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableElement {
// TODO: Skipped for migration because:
// Your application code writes to the input. This prevents migration.
@Input("bitIconButton") icon: string;
icon = model<string>(undefined, { alias: "bitIconButton" });
readonly buttonType = input<IconButtonType>("main");
// TODO: Skipped for migration because:
// Your application code writes to the input. This prevents migration.
@Input() size: IconButtonSize = "default";
size = model<IconButtonSize>("default");
@HostBinding("class") get classList() {
return [
@@ -188,14 +184,14 @@ export class BitIconButtonComponent implements ButtonLikeAbstraction, FocusableE
"focus:tw-outline-none",
]
.concat(styles[this.buttonType()])
.concat(sizes[this.size])
.concat(sizes[this.size()])
.concat(
this.showDisabledStyles() || this.disabled() ? disabledStyles[this.buttonType()] : [],
);
}
get iconClass() {
return [this.icon, "!tw-m-0"];
return [this.icon(), "!tw-m-0"];
}
protected disabledAttr = computed(() => {