mirror of
https://github.com/bitwarden/browser
synced 2026-02-24 00:23:17 +00:00
[CL-82] rename bit-icon to bit-svg; create new bit-icon component for font icons (#18584)
* rename bit-icon to bit-svg; create new bit-icon for font icons Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * find and replace current usage Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * add custom eslint warning Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix incorrect usage * fix tests * fix tests * Update libs/components/src/svg/index.ts Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com> * Update libs/eslint/components/no-bwi-class-usage.spec.mjs Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com> * update component api * update class name * use icon type in iconButton component * update type Icon --> BitSvg * fix bad renames * fix more renames * fix bad input * revert iconButton type * fix lint * fix more inputs * misc fixes Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> * fix test * add eslint ignore * fix lint * add comparison story --------- Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com> Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>
This commit is contained in:
Will Martin
committed by
jaasen-livefront
jaasen-livefront
parent
67ff1e1d85
commit
de2f4a04fc
@@ -1,35 +1,30 @@
|
||||
import { Component, effect, input } from "@angular/core";
|
||||
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
|
||||
import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
|
||||
|
||||
import { Icon, isIcon } from "@bitwarden/assets/svg";
|
||||
import { BitwardenIcon } from "../shared/icon";
|
||||
|
||||
// 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: "bit-icon",
|
||||
standalone: true,
|
||||
host: {
|
||||
"[attr.aria-hidden]": "!ariaLabel()",
|
||||
"[class]": "classList()",
|
||||
"[attr.aria-hidden]": "ariaLabel() ? null : true",
|
||||
"[attr.aria-label]": "ariaLabel()",
|
||||
"[innerHtml]": "innerHtml",
|
||||
class: "tw-max-h-full tw-flex tw-justify-center",
|
||||
},
|
||||
template: ``,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class BitIconComponent {
|
||||
innerHtml: SafeHtml | null = null;
|
||||
|
||||
readonly icon = input<Icon>();
|
||||
export class IconComponent {
|
||||
/**
|
||||
* The Bitwarden icon name (e.g., "bwi-lock", "bwi-user")
|
||||
*/
|
||||
readonly name = input.required<BitwardenIcon>();
|
||||
|
||||
/**
|
||||
* Accessible label for the icon
|
||||
*/
|
||||
readonly ariaLabel = input<string>();
|
||||
|
||||
constructor(private domSanitizer: DomSanitizer) {
|
||||
effect(() => {
|
||||
const icon = this.icon();
|
||||
if (!isIcon(icon)) {
|
||||
return;
|
||||
}
|
||||
const svg = icon.svg;
|
||||
this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
|
||||
});
|
||||
}
|
||||
protected readonly classList = computed(() => {
|
||||
return ["bwi", this.name()].join(" ");
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import { ComponentFixture, TestBed } from "@angular/core/testing";
|
||||
|
||||
import { Icon, svgIcon } from "@bitwarden/assets/svg";
|
||||
|
||||
import { BitIconComponent } from "./icon.component";
|
||||
|
||||
describe("IconComponent", () => {
|
||||
let fixture: ComponentFixture<BitIconComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [BitIconComponent],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(BitIconComponent);
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
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.detectChanges();
|
||||
|
||||
const el = fixture.nativeElement as HTMLElement;
|
||||
expect(el.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
it("should contain icon when input is a safe Icon", () => {
|
||||
const icon = svgIcon`<svg><text x="0" y="15">safe icon</text></svg>`;
|
||||
|
||||
fixture.componentRef.setInput("icon", icon);
|
||||
fixture.detectChanges();
|
||||
|
||||
const el = fixture.nativeElement as HTMLElement;
|
||||
expect(el.innerHTML).toBe(`<svg><text x="0" y="15">safe icon</text></svg>`);
|
||||
});
|
||||
});
|
||||
@@ -8,113 +8,40 @@ import * as stories from "./icon.stories";
|
||||
import { IconModule } from "@bitwarden/components";
|
||||
```
|
||||
|
||||
# Icon Use Instructions
|
||||
# Icon
|
||||
|
||||
- Icons will generally be attached to the associated Jira task.
|
||||
- Designers should minify any SVGs before attaching them to Jira using a tool like
|
||||
[SVGOMG](https://jakearchibald.github.io/svgomg/).
|
||||
- **Note:** Ensure the "Remove viewbox" option is toggled off if responsive resizing of the icon
|
||||
is desired.
|
||||
The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font classes.
|
||||
|
||||
## Developer Instructions
|
||||
## Basic Usage
|
||||
|
||||
1. **Download the SVG** and import it as an `.svg` initially into the IDE of your choice.
|
||||
- The SVG should be formatted using either a built-in formatter or an external tool like
|
||||
[SVG Formatter Beautifier](https://codebeautify.org/svg-formatter-beautifier) to make applying
|
||||
classes easier.
|
||||
```html
|
||||
<bit-icon name="bwi-lock"></bit-icon>
|
||||
```
|
||||
|
||||
2. **Rename the file** as a `<name>.icon.ts` TypeScript file and place it in the `libs/assets/svg`
|
||||
lib.
|
||||
## Icon Names
|
||||
|
||||
3. **Import** `svgIcon` from `./icon-service`.
|
||||
All available icon names are defined in the `BitwardenIcon` type. Icons use the `bwi-*` naming
|
||||
convention (e.g., `bwi-lock`, `bwi-user`, `bwi-key`).
|
||||
|
||||
4. **Define and export** a `const` to represent your `svgIcon`.
|
||||
## Accessibility
|
||||
|
||||
```typescript
|
||||
export const ExampleIcon = svgIcon`<svg … </svg>`;
|
||||
```
|
||||
By default, icons are decorative and marked with `aria-hidden="true"`. To make an icon accessible,
|
||||
provide an `ariaLabel`:
|
||||
|
||||
5. **Replace any hardcoded strokes or fills** with the appropriate Tailwind class.
|
||||
- **Note:** Stroke is used when styling the outline of an SVG path, while fill is used when
|
||||
styling the inside of an SVG path.
|
||||
```html
|
||||
<bit-icon name="bwi-lock" [ariaLabel]="'Secure lock'"></bit-icon>
|
||||
```
|
||||
|
||||
- A non-comprehensive list of common colors and their associated classes is below:
|
||||
## Styling
|
||||
|
||||
| Hardcoded Value | Tailwind Stroke Class | Tailwind Fill Class | Tailwind Variable |
|
||||
| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------------------------------- | ----------------------------------- |
|
||||
| `#020F66` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#020F66"}}></span> | `tw-stroke-illustration-outline` | `tw-fill-illustration-outline` | `--color-illustration-outline` |
|
||||
| `#DBE5F6` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#DBE5F6"}}></span> | `tw-stroke-illustration-bg-primary` | `tw-fill-illustration-bg-primary` | `--color-illustration-bg-primary` |
|
||||
| `#AAC3EF` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#AAC3EF"}}></span> | `tw-stroke-illustration-bg-secondary` | `tw-fill-illustration-bg-secondary` | `--color-illustration-bg-secondary` |
|
||||
| `#FFFFFF` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#FFFFFF"}}></span> | `tw-stroke-illustration-bg-tertiary` | `tw-fill-illustration-bg-tertiary` | `--color-illustration-bg-tertiary` |
|
||||
| `#FFBF00` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#FFBF00"}}></span> | `tw-stroke-illustration-tertiary` | `tw-fill-illustration-tertiary` | `--color-illustration-tertiary` |
|
||||
| `#175DDC` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#175DDC"}}></span> | `tw-stroke-illustration-logo` | `tw-fill-illustration-logo` | `--color-illustration-logo` |
|
||||
The component renders as an inline element. Apply standard CSS classes or styles to customize
|
||||
appearance:
|
||||
|
||||
- If the hex that you have on an SVG path is not listed above, there are a few ways to figure out
|
||||
the appropriate Tailwind class:
|
||||
- **Option 1: Figma**
|
||||
- Open the SVG in Figma.
|
||||
- Click on an individual path on the SVG until you see the path's properties in the
|
||||
right-hand panel.
|
||||
- Scroll down to the Colors section.
|
||||
- Example: `Color/Illustration/Outline`
|
||||
- This also includes Hex or RGB values that can be used to find the appropriate Tailwind
|
||||
variable as well if you follow the manual search option below.
|
||||
- Create the appropriate stroke or fill class from the color used.
|
||||
- Example: `Color/Illustration/Outline` corresponds to `--color-illustration-outline` which
|
||||
corresponds to `tw-stroke-illustration-outline` or `tw-fill-illustration-outline`.
|
||||
- **Option 2: Manual Search**
|
||||
- Take the path's stroke or fill hex value and convert it to RGB using a tool like
|
||||
[Hex to RGB](https://www.rgbtohex.net/hex-to-rgb/).
|
||||
- Search for the RGB value without commas in our `tw-theme.css` to find the Tailwind variable
|
||||
that corresponds to the color.
|
||||
- Create the appropriate stroke or fill class using the Tailwind variable.
|
||||
- Example: `--color-illustration-outline` corresponds to `tw-stroke-illustration-outline`
|
||||
or `tw-fill-illustration-outline`.
|
||||
```html
|
||||
<bit-icon name="bwi-lock" class="tw-text-primary-500 tw-text-2xl"></bit-icon>
|
||||
```
|
||||
|
||||
6. **Remove any hardcoded width or height attributes** if your SVG has a configured
|
||||
[viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute in order
|
||||
to allow the SVG to scale to fit its container.
|
||||
- **Note:** Scaling is required for any SVG used as an
|
||||
[AnonLayout](?path=/docs/component-library-anon-layout--docs) `pageIcon`.
|
||||
## Note on SVG Icons
|
||||
|
||||
7. **Replace any generic `clipPath` ids** (such as `id="a"`) with a unique id, and update the
|
||||
referencing element to use the new id (such as `clip-path="url(#unique-id-here)"`).
|
||||
|
||||
8. **Import your SVG const** anywhere you want to use the SVG.
|
||||
- **Angular Component Example:**
|
||||
- **TypeScript:**
|
||||
|
||||
```typescript
|
||||
import { Component } from "@angular/core";
|
||||
import { IconModule } from '@bitwarden/components';
|
||||
import { ExampleIcon, Example2Icon } from "@bitwarden/assets/svg";
|
||||
|
||||
@Component({
|
||||
selector: "app-example",
|
||||
standalone: true,
|
||||
imports: [IconModule],
|
||||
templateUrl: "./example.component.html",
|
||||
})
|
||||
export class ExampleComponent {
|
||||
readonly Icons = { ExampleIcon, Example2Icon };
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
- **HTML:**
|
||||
|
||||
> NOTE: SVG icons are treated as decorative by default and will be `aria-hidden` unless an
|
||||
> `ariaLabel` is explicitly provided to the `<bit-icon>` component
|
||||
|
||||
```html
|
||||
<bit-icon [icon]="Icons.ExampleIcon"></bit-icon>
|
||||
```
|
||||
|
||||
With `ariaLabel`
|
||||
|
||||
```html
|
||||
<bit-icon [icon]="Icons.ExampleIcon" [ariaLabel]="Your custom label text here"></bit-icon>
|
||||
```
|
||||
|
||||
9. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
|
||||
which supports multiple style modes.
|
||||
For SVG illustrations (not font icons), use the `bit-svg` component instead. See the Svg component
|
||||
documentation for details.
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
|
||||
import { BitIconComponent } from "./icon.component";
|
||||
import { IconComponent } from "./icon.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [BitIconComponent],
|
||||
exports: [BitIconComponent],
|
||||
imports: [IconComponent],
|
||||
exports: [IconComponent],
|
||||
})
|
||||
export class IconModule {}
|
||||
|
||||
@@ -1,50 +1,61 @@
|
||||
import { Meta } from "@storybook/angular";
|
||||
import { Meta, StoryObj } from "@storybook/angular";
|
||||
|
||||
import * as SvgIcons from "@bitwarden/assets/svg";
|
||||
import { BITWARDEN_ICONS } from "../shared/icon";
|
||||
|
||||
import { BitIconComponent } from "./icon.component";
|
||||
import { IconComponent } from "./icon.component";
|
||||
|
||||
export default {
|
||||
title: "Component Library/Icon",
|
||||
component: BitIconComponent,
|
||||
component: IconComponent,
|
||||
parameters: {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/design/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=21662-50335&t=k6OTDDPZOTtypRqo-11",
|
||||
},
|
||||
},
|
||||
} as Meta;
|
||||
argTypes: {
|
||||
name: {
|
||||
control: { type: "select" },
|
||||
options: BITWARDEN_ICONS,
|
||||
},
|
||||
},
|
||||
} as Meta<IconComponent>;
|
||||
|
||||
const {
|
||||
// Filtering out the few non-icons in the libs/assets/svg import
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
DynamicContentNotAllowedError: _DynamicContentNotAllowedError,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
isIcon,
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
svgIcon,
|
||||
...Icons
|
||||
}: {
|
||||
[key: string]: any;
|
||||
} = SvgIcons;
|
||||
type Story = StoryObj<IconComponent>;
|
||||
|
||||
export const Default = {
|
||||
render: (args: { icons: [string, any][] }) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<div class="tw-bg-secondary-100 tw-p-2 tw-grid tw-grid-cols-[repeat(auto-fit,minmax(224px,1fr))] tw-gap-2">
|
||||
@for (icon of icons; track icon[0]) {
|
||||
<div class="tw-size-56 tw-border tw-border-secondary-300 tw-rounded-md">
|
||||
<div class="tw-text-xs tw-text-center">{{icon[0]}}</div>
|
||||
<div class="tw-size-52 tw-w-full tw-content-center">
|
||||
<bit-icon [icon]="icon[1]"></bit-icon>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
}),
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
icons: Object.entries(Icons),
|
||||
name: "bwi-lock",
|
||||
},
|
||||
};
|
||||
|
||||
export const AllIcons: Story = {
|
||||
render: () => ({
|
||||
template: `
|
||||
<div class="tw-grid tw-grid-cols-[repeat(auto-fit,minmax(150px,1fr))] tw-gap-4 tw-p-4">
|
||||
@for (icon of icons; track icon) {
|
||||
<div class="tw-flex tw-flex-col tw-items-center tw-p-2 tw-border tw-border-secondary-300 tw-rounded">
|
||||
<bit-icon [name]="icon" class="tw-text-2xl tw-mb-2"></bit-icon>
|
||||
<span class="tw-text-xs tw-text-center">{{ icon }}</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
props: {
|
||||
icons: BITWARDEN_ICONS,
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
export const WithAriaLabel: Story = {
|
||||
args: {
|
||||
name: "bwi-lock",
|
||||
ariaLabel: "Secure lock icon",
|
||||
},
|
||||
};
|
||||
|
||||
export const CompareWithLegacy: Story = {
|
||||
render: () => ({
|
||||
template: `<bit-icon name="bwi-lock"></bit-icon> <i class="bwi bwi-lock"></i>`,
|
||||
}),
|
||||
};
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export * from "./icon.module";
|
||||
export * from "./icon.component";
|
||||
|
||||
Reference in New Issue
Block a user