From 03f017a1d662731eb771a5a91627f6ac73624853 Mon Sep 17 00:00:00 2001 From: Will Martin Date: Mon, 26 Jan 2026 23:15:50 -0500 Subject: [PATCH] update component api --- ...tension-anon-layout-wrapper.component.html | 4 +- .../send-created/send-created.component.html | 2 +- .../intro-carousel.component.html | 8 ++-- .../credentials/fido2-create.component.html | 4 +- .../fido2-excluded-ciphers.component.html | 4 +- .../credentials/fido2-vault.component.html | 2 +- .../auto-confirm-policy.component.html | 2 +- .../accept-family-sponsorship.component.html | 2 +- .../create-credential-dialog.component.html | 4 +- ...nization-subscription-cloud.component.html | 2 +- .../subscription-hidden.component.ts | 2 +- .../shared/sm-subscribe.component.html | 2 +- .../report-card/report-card.component.html | 2 +- .../send-success-drawer-dialog.component.html | 2 +- .../setup-extension.component.html | 2 +- .../components/two-factor-icon.component.html | 2 +- ...ser-verification-form-input.component.html | 2 +- libs/components/src/icon/icon.component.ts | 35 +---------------- libs/components/src/icon/icon.mdx | 36 ++---------------- libs/components/src/icon/icon.stories.ts | 38 ++----------------- .../landing-header.component.html | 2 +- .../landing-hero.component.html | 2 +- .../landing-layout.component.html | 4 +- .../src/navigation/nav-logo.component.html | 2 +- .../src/no-items/no-items.component.html | 2 +- libs/components/src/svg/svg.component.ts | 8 ++-- .../components/src/svg/svg.components.spec.ts | 4 +- libs/components/src/svg/svg.mdx | 4 +- libs/components/src/svg/svg.stories.ts | 2 +- libs/eslint/components/no-bwi-class-usage.mjs | 2 +- .../carousel-button.component.html | 2 +- 31 files changed, 50 insertions(+), 141 deletions(-) diff --git a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html index 84abd02deb7..005f8eb02a0 100644 --- a/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html +++ b/apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.html @@ -6,7 +6,7 @@ [pageTitle]="''" >
- +
@@ -17,7 +17,7 @@
- +

{{ "createdSendSuccessfully" | i18n }} diff --git a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html index 614e0da3426..1980e8aa356 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html +++ b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html @@ -2,7 +2,7 @@
- +

{{ "securityPrioritized" | i18n }}

{{ "securityPrioritizedBody" | i18n }}

@@ -11,7 +11,7 @@
- +

{{ "quickLogin" | i18n }}

{{ "quickLoginBody" | i18n }}

@@ -20,7 +20,7 @@
- +

{{ "secureUser" | i18n }}

{{ "secureUserBody" | i18n }}

@@ -29,7 +29,7 @@
- +

{{ "secureDevices" | i18n }}

{{ "secureDevicesBody" | i18n }}

diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html index ab73e868c3d..4d3748d4303 100644 --- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html +++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html @@ -5,7 +5,7 @@ >
- +

{{ "savePasskeyQuestion" | i18n }} @@ -28,7 +28,7 @@
- +
{{ "noMatchingLoginsForSite" | i18n }}
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html index 3b17219486d..817c79eba3a 100644 --- a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html +++ b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html @@ -5,7 +5,7 @@ >
- +

{{ "savePasskeyQuestion" | i18n }} @@ -30,7 +30,7 @@ class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-start tw-items-center tw-gap-2 tw-h-full tw-px-5" >
- +
{{ "passkeyAlreadyExists" | i18n }} {{ "applicationDoesNotSupportDuplicates" | i18n }} diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html index 940f6d00ef7..df9458d8b14 100644 --- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html +++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html @@ -5,7 +5,7 @@ >
- +

{{ "passkeyLogin" | i18n }}

diff --git a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html index 16725d71200..a8e3236dad8 100644 --- a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html +++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html @@ -44,7 +44,7 @@
- +
  1. 1. {{ "autoConfirmExtension1" | i18n }}
    2. diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html index 52927559b66..0255e1a6a99 100644 --- a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html +++ b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html @@ -1,6 +1,6 @@
    - +
    - +

    {{ "creatingPasskeyLoading" | i18n }}

    {{ "creatingPasskeyLoadingInfo" | i18n }}

    @@ -27,7 +27,7 @@ class="tw-flex tw-flex-col tw-items-center" >
    - +

    {{ "errorCreatingPasskey" | i18n }}

    {{ "errorCreatingPasskeyInfo" | i18n }}

    diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html index 80fbbacc9e3..496ddb4ff9b 100644 --- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html +++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html @@ -242,7 +242,7 @@
    - +

    {{ "billingManagedByProvider" | i18n: userOrg.providerName }}

    {{ "billingContactProviderForAssistance" | i18n }}

    diff --git a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts b/apps/web/src/app/billing/organizations/subscription-hidden.component.ts index b359a8ef68d..249cf999305 100644 --- a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts +++ b/apps/web/src/app/billing/organizations/subscription-hidden.component.ts @@ -10,7 +10,7 @@ import { GearIcon } from "@bitwarden/assets/svg"; selector: "app-org-subscription-hidden", template: `
    - +

    {{ "billingManagedByProvider" | i18n: providerName }}

    {{ "billingContactProviderForAssistance" | i18n }}

    diff --git a/apps/web/src/app/billing/shared/sm-subscribe.component.html b/apps/web/src/app/billing/shared/sm-subscribe.component.html index 09f78e8d8f3..70990d2ee4c 100644 --- a/apps/web/src/app/billing/shared/sm-subscribe.component.html +++ b/apps/web/src/app/billing/shared/sm-subscribe.component.html @@ -2,7 +2,7 @@

    {{ "moreFromBitwarden" | i18n }}

    - +
    - +
    diff --git a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html index ac1b347d27f..90210df4658 100644 --- a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html +++ b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html @@ -8,7 +8,7 @@ >
    - +
    diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html index 4291d98c0d7..d8cd562ac61 100644 --- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html +++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html @@ -31,7 +31,7 @@
    - +

    {{ diff --git a/libs/angular/src/auth/components/two-factor-icon.component.html b/libs/angular/src/auth/components/two-factor-icon.component.html index cf28278bb53..555176225af 100644 --- a/libs/angular/src/auth/components/two-factor-icon.component.html +++ b/libs/angular/src/auth/components/two-factor-icon.component.html @@ -1,6 +1,6 @@
    - +
    - +

    {{ "verifyWithBiometrics" | i18n }}

    diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts index 8ff668040de..14253dc6b76 100644 --- a/libs/components/src/icon/icon.component.ts +++ b/libs/components/src/icon/icon.component.ts @@ -2,16 +2,6 @@ import { ChangeDetectionStrategy, Component, computed, input } from "@angular/co import { BitwardenIcon } from "../shared/icon"; -export const BitIconSize = Object.freeze({ - Xs: "xs", - Sm: "sm", - Md: "md", - Lg: "lg", - Xl: "xl", -} as const); - -export type BitIconSize = (typeof BitIconSize)[keyof typeof BitIconSize]; - @Component({ selector: "bit-icon", standalone: true, @@ -27,17 +17,7 @@ export class BitIconComponent { /** * The Bitwarden icon name (e.g., "bwi-lock", "bwi-user") */ - readonly icon = input.required(); - - /** - * Whether the icon should have a fixed width for alignment - */ - readonly fw = input(false); - - /** - * Icon size - applies bwi-* size classes - */ - readonly size = input(); + readonly name = input.required(); /** * Accessible label for the icon @@ -45,17 +25,6 @@ export class BitIconComponent { readonly ariaLabel = input(); protected readonly classList = computed(() => { - const classes = ["bwi", this.icon()]; - - if (this.fw()) { - classes.push("bwi-fw"); - } - - const size = this.size(); - if (size) { - classes.push(`bwi-${size}`); - } - - return classes.join(" "); + return ["bwi", this.name()].join(" "); }); } diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx index 695ab0ae141..0914d681e59 100644 --- a/libs/components/src/icon/icon.mdx +++ b/libs/components/src/icon/icon.mdx @@ -15,7 +15,7 @@ The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font class ## Basic Usage ```html - + ``` ## Icon Names @@ -23,43 +23,13 @@ The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font class All available icon names are defined in the `BitwardenIcon` type. Icons use the `bwi-*` naming convention (e.g., `bwi-lock`, `bwi-user`, `bwi-key`). -## Modifiers - -### Fixed Width - -Use the `fw` input to give icons a fixed width for alignment: - -```html - -``` - -This is useful when aligning icons in lists or menus. - -### Spin - -Use the `spin` input to animate icons: - -```html - -``` - -### Size - -Use the `size` input to control icon size: - -```html - -``` - -Available sizes: `xs`, `sm`, `md`, `lg`, `xl` - ## Accessibility By default, icons are decorative and marked with `aria-hidden="true"`. To make an icon accessible, provide an `ariaLabel`: ```html - + ``` ## Styling @@ -68,7 +38,7 @@ The component renders as an inline element. Apply standard CSS classes or styles appearance: ```html - + ``` ## Note on SVG Icons diff --git a/libs/components/src/icon/icon.stories.ts b/libs/components/src/icon/icon.stories.ts index 5e58b0603df..76d23a68ba8 100644 --- a/libs/components/src/icon/icon.stories.ts +++ b/libs/components/src/icon/icon.stories.ts @@ -14,14 +14,10 @@ export default { }, }, argTypes: { - icon: { + name: { control: { type: "select" }, options: BITWARDEN_ICONS, }, - size: { - control: { type: "select" }, - options: ["xs", "sm", "md", "lg", "xl"], - }, }, } as Meta; @@ -29,7 +25,7 @@ type Story = StoryObj; export const Default: Story = { args: { - icon: "bwi-lock", + name: "bwi-lock", }, }; @@ -39,7 +35,7 @@ export const AllIcons: Story = {
    @for (icon of icons; track icon) {
    - + {{ icon }}
    } @@ -51,35 +47,9 @@ export const AllIcons: Story = { }), }; -export const WithFixedWidth: Story = { - render: () => ({ - template: ` -
    -
    Lock
    -
    User
    -
    Key
    -
    - `, - }), -}; - -export const WithSizes: Story = { - render: () => ({ - template: ` -
    - - - - - -
    - `, - }), -}; - export const WithAriaLabel: Story = { args: { - icon: "bwi-lock", + name: "bwi-lock", ariaLabel: "Secure lock icon", }, }; diff --git a/libs/components/src/landing-layout/landing-header.component.html b/libs/components/src/landing-layout/landing-header.component.html index 5bd6d546069..882f1b96c99 100644 --- a/libs/components/src/landing-layout/landing-header.component.html +++ b/libs/components/src/landing-layout/landing-header.component.html @@ -4,7 +4,7 @@ [routerLink]="['/']" class="tw-w-32 tw-py-5 sm:tw-w-[200px] tw-self-center sm:tw-self-start tw-block [&>*]:tw-align-top" > - + }
    diff --git a/libs/components/src/landing-layout/landing-hero.component.html b/libs/components/src/landing-layout/landing-hero.component.html index f3f5d2e7ed0..9394bb03c63 100644 --- a/libs/components/src/landing-layout/landing-hero.component.html +++ b/libs/components/src/landing-layout/landing-hero.component.html @@ -6,7 +6,7 @@
    - +
    } diff --git a/libs/components/src/landing-layout/landing-layout.component.html b/libs/components/src/landing-layout/landing-layout.component.html index 8e28f9c25ed..a33054e8e64 100644 --- a/libs/components/src/landing-layout/landing-layout.component.html +++ b/libs/components/src/landing-layout/landing-layout.component.html @@ -13,12 +13,12 @@
    - +
    - +
    } diff --git a/libs/components/src/navigation/nav-logo.component.html b/libs/components/src/navigation/nav-logo.component.html index 69eee9f2b87..8323a0f3479 100644 --- a/libs/components/src/navigation/nav-logo.component.html +++ b/libs/components/src/navigation/nav-logo.component.html @@ -16,6 +16,6 @@ routerLinkActive ariaCurrentWhenActive="page" > - +
    diff --git a/libs/components/src/no-items/no-items.component.html b/libs/components/src/no-items/no-items.component.html index 016ca84f8b9..46a5c25526a 100644 --- a/libs/components/src/no-items/no-items.component.html +++ b/libs/components/src/no-items/no-items.component.html @@ -1,7 +1,7 @@
    - +

    diff --git a/libs/components/src/svg/svg.component.ts b/libs/components/src/svg/svg.component.ts index 2d05e25cf9d..b028a69a52c 100644 --- a/libs/components/src/svg/svg.component.ts +++ b/libs/components/src/svg/svg.component.ts @@ -17,15 +17,15 @@ import { Icon, isIcon } from "@bitwarden/assets/svg"; export class SvgComponent { private domSanitizer = inject(DomSanitizer); - readonly icon = input(); + readonly content = input(); readonly ariaLabel = input(); protected readonly innerHtml = computed(() => { - const icon = this.icon(); - if (!isIcon(icon)) { + const content = this.content(); + if (!isIcon(content)) { return null; } - const svg = icon.svg; + const svg = content.svg; return this.domSanitizer.bypassSecurityTrustHtml(svg); }); } diff --git a/libs/components/src/svg/svg.components.spec.ts b/libs/components/src/svg/svg.components.spec.ts index 11f61bdef60..87975ff5e33 100644 --- a/libs/components/src/svg/svg.components.spec.ts +++ b/libs/components/src/svg/svg.components.spec.ts @@ -19,7 +19,7 @@ describe("SvgComponent", () => { it("should have empty innerHtml when input is not an Icon", () => { const fakeIcon = { svg: "harmful user input" } as Icon; - fixture.componentRef.setInput("icon", fakeIcon); + fixture.componentRef.setInput("content", fakeIcon); fixture.detectChanges(); const el = fixture.nativeElement as HTMLElement; @@ -29,7 +29,7 @@ describe("SvgComponent", () => { it("should contain icon when input is a safe Icon", () => { const icon = svgIcon`safe icon`; - fixture.componentRef.setInput("icon", icon); + fixture.componentRef.setInput("content", icon); fixture.detectChanges(); const el = fixture.nativeElement as HTMLElement; diff --git a/libs/components/src/svg/svg.mdx b/libs/components/src/svg/svg.mdx index bb9df723fc7..5b0b598e79c 100644 --- a/libs/components/src/svg/svg.mdx +++ b/libs/components/src/svg/svg.mdx @@ -107,13 +107,13 @@ import { SvgModule } from "@bitwarden/components"; > `ariaLabel` is explicitly provided to the `` component ```html - + ``` With `ariaLabel` ```html - + ``` 9. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client diff --git a/libs/components/src/svg/svg.stories.ts b/libs/components/src/svg/svg.stories.ts index 2d0d3a6ca2d..e8890b52974 100644 --- a/libs/components/src/svg/svg.stories.ts +++ b/libs/components/src/svg/svg.stories.ts @@ -37,7 +37,7 @@ export const Default = {
    {{icon[0]}}
    - +
    } diff --git a/libs/eslint/components/no-bwi-class-usage.mjs b/libs/eslint/components/no-bwi-class-usage.mjs index 49609fac632..8260587ce45 100644 --- a/libs/eslint/components/no-bwi-class-usage.mjs +++ b/libs/eslint/components/no-bwi-class-usage.mjs @@ -1,5 +1,5 @@ export const errorMessage = - "Use component instead of applying 'bwi' classes directly. Example: "; + "Use component instead of applying 'bwi' classes directly. Example: "; export default { meta: { diff --git a/libs/vault/src/components/carousel/carousel-button/carousel-button.component.html b/libs/vault/src/components/carousel/carousel-button/carousel-button.component.html index 4c2ffe7d4fd..913d1b7963b 100644 --- a/libs/vault/src/components/carousel/carousel-button/carousel-button.component.html +++ b/libs/vault/src/components/carousel/carousel-button/carousel-button.component.html @@ -9,5 +9,5 @@ [attr.aria-label]="slide.label" (click)="onClick.emit()" > - +