[PM-37229] Add bwi-passport icon for passport cipher type (#20712)

* [PM-37229] Add bwi-passport icon and wire it to the passport cipher type

* Fix icons:build script to compile style.css and avoid duplicate SCSS keys

* [PM-37229] Update passport cipher icon tests to expect bwi-passport
This commit is contained in:
Nick Krantz 2026-05-19 15:26:26 -05:00 committed by GitHub
parent 77218dae08
commit 2a8e589f2f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 365 additions and 341 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 365 KiB

After

Width:  |  Height:  |  Size: 367 KiB

View File

@ -94,330 +94,334 @@
}
.bwi-accessibility:before {
content: "\f170";
content: "\f171";
}
.bwi-add:before {
content: "\f16e";
}
.bwi-add-circle:before {
content: "\f16f";
}
.bwi-add-circle:before {
content: "\f170";
}
.bwi-angle-down:before {
content: "\f16d";
content: "\f16e";
}
.bwi-angle-left:before {
content: "\f16c";
content: "\f16d";
}
.bwi-angle-right:before {
content: "\f16b";
content: "\f16c";
}
.bwi-angle-up:before {
content: "\f169";
}
.bwi-angle-up-down:before {
content: "\f16a";
}
.bwi-angle-up-down:before {
content: "\f16b";
}
.bwi-archive:before {
content: "\f168";
content: "\f169";
}
.bwi-arrow-down:before {
content: "\f167";
content: "\f168";
}
.bwi-arrow-filled-down:before {
content: "\f166";
content: "\f167";
}
.bwi-arrow-filled-left:before {
content: "\f165";
content: "\f166";
}
.bwi-arrow-filled-right:before {
content: "\f164";
content: "\f165";
}
.bwi-arrow-filled-up:before {
content: "\f163";
content: "\f164";
}
.bwi-arrow-left:before {
content: "\f162";
content: "\f163";
}
.bwi-arrow-right:before {
content: "\f161";
content: "\f162";
}
.bwi-arrow-up:before {
content: "\f160";
content: "\f161";
}
.bwi-attach:before {
content: "\f15f";
content: "\f160";
}
.bwi-autofill:before {
content: "\f15e";
content: "\f15f";
}
.bwi-bank:before {
content: "\f15d";
content: "\f15e";
}
.bwi-bitcoin:before {
content: "\f15c";
content: "\f15d";
}
.bwi-bitwarden-shield:before {
content: "\f15b";
content: "\f15c";
}
.bwi-browser:before {
content: "\f15a";
content: "\f15b";
}
.bwi-bug:before {
content: "\f159";
content: "\f15a";
}
.bwi-business:before {
content: "\f158";
content: "\f159";
}
.bwi-camera:before {
content: "\f157";
content: "\f158";
}
.bwi-check:before {
content: "\f155";
}
.bwi-check-circle:before {
content: "\f156";
}
.bwi-check-circle:before {
content: "\f157";
}
.bwi-circle:before {
content: "\f154";
content: "\f155";
}
.bwi-clear:before {
content: "\f153";
content: "\f154";
}
.bwi-clock:before {
content: "\f152";
content: "\f153";
}
.bwi-close:before {
content: "\f151";
content: "\f152";
}
.bwi-collection:before {
content: "\f14f";
}
.bwi-collection-shared:before {
content: "\f150";
}
.bwi-collection-shared:before {
content: "\f151";
}
.bwi-copy:before {
content: "\f14e";
content: "\f14f";
}
.bwi-credit-card:before {
content: "\f14d";
content: "\f14e";
}
.bwi-dashboard:before {
content: "\f14c";
content: "\f14d";
}
.bwi-delete:before {
content: "\f14b";
content: "\f14c";
}
.bwi-desktop:before {
content: "\f149";
}
.bwi-desktop-user:before {
content: "\f14a";
}
.bwi-desktop-user:before {
content: "\f14b";
}
.bwi-diamond:before {
content: "\f148";
content: "\f149";
}
.bwi-dollar:before {
content: "\f147";
content: "\f148";
}
.bwi-download:before {
content: "\f146";
content: "\f147";
}
.bwi-drag:before {
content: "\f145";
content: "\f146";
}
.bwi-duplicate:before {
content: "\f144";
content: "\f145";
}
.bwi-edit:before {
content: "\f142";
}
.bwi-edit-alt:before {
content: "\f143";
}
.bwi-edit-alt:before {
content: "\f144";
}
.bwi-encrypted:before {
content: "\f141";
content: "\f142";
}
.bwi-error:before {
content: "\f140";
content: "\f141";
}
.bwi-extension:before {
content: "\f13f";
content: "\f140";
}
.bwi-external-link:before {
content: "\f13e";
content: "\f13f";
}
.bwi-family:before {
content: "\f13d";
content: "\f13e";
}
.bwi-file:before {
content: "\f13b";
}
.bwi-file-text:before {
content: "\f13c";
}
.bwi-file-text:before {
content: "\f13d";
}
.bwi-filter:before {
content: "\f13a";
content: "\f13b";
}
.bwi-folder:before {
content: "\f139";
content: "\f13a";
}
.bwi-generate:before {
content: "\f138";
content: "\f139";
}
.bwi-grid:before {
content: "\f137";
content: "\f138";
}
.bwi-groups:before {
content: "\f136";
content: "\f137";
}
.bwi-handshake:before {
content: "\f135";
content: "\f136";
}
.bwi-hashtag:before {
content: "\f134";
content: "\f135";
}
.bwi-help:before {
content: "\f133";
content: "\f134";
}
.bwi-identity:before {
content: "\f132";
content: "\f133";
}
.bwi-info:before {
content: "\f131";
content: "\f132";
}
.bwi-key:before {
content: "\f130";
content: "\f131";
}
.bwi-list:before {
content: "\f12e";
}
.bwi-list-alt:before {
content: "\f12f";
}
.bwi-list-alt:before {
content: "\f130";
}
.bwi-loading:before {
content: "\f12d";
content: "\f12e";
}
.bwi-lock:before {
content: "\f12b";
}
.bwi-lock-filled:before {
content: "\f12c";
}
.bwi-lock-filled:before {
content: "\f12d";
}
.bwi-login:before {
content: "\f12a";
content: "\f12b";
}
.bwi-mail:before {
content: "\f129";
content: "\f12a";
}
.bwi-mobile:before {
content: "\f128";
content: "\f129";
}
.bwi-more-horizontal:before {
content: "\f127";
content: "\f128";
}
.bwi-more-vertical:before {
content: "\f126";
content: "\f127";
}
.bwi-msp:before {
content: "\f125";
content: "\f126";
}
.bwi-new-window:before {
content: "\f124";
content: "\f125";
}
.bwi-note:before {
content: "\f123";
content: "\f124";
}
.bwi-notifications:before {
content: "\f122";
content: "\f123";
}
.bwi-numbered-list:before {
content: "\f121";
content: "\f122";
}
.bwi-palette:before {
content: "\f120";
content: "\f121";
}
.bwi-passkey:before {
content: "\f120";
}
.bwi-passport:before {
content: "\f11f";
}
@ -542,7 +546,7 @@
}
.bwi-bell:before {
content: "\f122";
content: "\f123";
}
.bwi-billing:before {
@ -550,7 +554,7 @@
}
.bwi-brush:before {
content: "\f120";
content: "\f121";
}
.bwi-cli:before {
@ -558,7 +562,7 @@
}
.bwi-clone:before {
content: "\f14e";
content: "\f14f";
}
.bwi-cog:before {
@ -570,23 +574,23 @@
}
.bwi-down-solid:before {
content: "\f166";
content: "\f167";
}
.bwi-drag-and-drop:before {
content: "\f145";
content: "\f146";
}
.bwi-ellipsis-h:before {
content: "\f127";
content: "\f128";
}
.bwi-ellipsis-v:before {
content: "\f126";
content: "\f127";
}
.bwi-envelope:before {
content: "\f129";
content: "\f12a";
}
.bwi-exclamation-triangle:before {
@ -602,15 +606,15 @@
}
.bwi-files:before {
content: "\f144";
content: "\f145";
}
.bwi-globe:before {
content: "\f12a";
content: "\f12b";
}
.bwi-id-card:before {
content: "\f132";
content: "\f133";
}
.bwi-import:before {
@ -618,15 +622,15 @@
}
.bwi-info-circle:before {
content: "\f131";
content: "\f132";
}
.bwi-lock-encrypted:before {
content: "\f141";
content: "\f142";
}
.bwi-lock-f:before {
content: "\f12c";
content: "\f12d";
}
.bwi-minus-circle:before {
@ -634,51 +638,51 @@
}
.bwi-paperclip:before {
content: "\f15f";
content: "\f160";
}
.bwi-pencil:before {
content: "\f143";
content: "\f144";
}
.bwi-pencil-square:before {
content: "\f142";
content: "\f143";
}
.bwi-plus:before {
content: "\f16e";
}
.bwi-plus-circle:before {
content: "\f16f";
}
.bwi-plus-circle:before {
content: "\f170";
}
.bwi-popout:before {
content: "\f124";
content: "\f125";
}
.bwi-premium:before {
content: "\f148";
content: "\f149";
}
.bwi-provider:before {
content: "\f135";
content: "\f136";
}
.bwi-puzzle:before {
content: "\f13f";
content: "\f140";
}
.bwi-question-circle:before {
content: "\f133";
content: "\f134";
}
.bwi-shield:before {
content: "\f15b";
content: "\f15c";
}
.bwi-spinner:before {
content: "\f12d";
content: "\f12e";
}
.bwi-star-f:before {
@ -686,29 +690,29 @@
}
.bwi-sticky-note:before {
content: "\f123";
content: "\f124";
}
.bwi-trash:before {
content: "\f14b";
content: "\f14c";
}
.bwi-universal-access:before {
content: "\f170";
content: "\f171";
}
.bwi-up-down-btn:before {
content: "\f16a";
content: "\f16b";
}
.bwi-up-solid:before {
content: "\f163";
content: "\f164";
}
.bwi-user-monitor:before {
content: "\f14a";
content: "\f14b";
}
.bwi-users:before {
content: "\f136";
content: "\f137";
}

View File

@ -109,88 +109,89 @@ $icomoon-font-path: "~@bitwarden/angular/src/scss/bwicons/fonts/" !default;
// Auto-generated - do not edit manually
// Bidirectional icon name support (both Figma and legacy BWI names)
$icons: (
"accessibility": "\f170",
"add": "\f16e",
"add-circle": "\f16f",
"angle-down": "\f16d",
"angle-left": "\f16c",
"angle-right": "\f16b",
"angle-up": "\f169",
"angle-up-down": "\f16a",
"archive": "\f168",
"arrow-down": "\f167",
"arrow-filled-down": "\f166",
"arrow-filled-left": "\f165",
"arrow-filled-right": "\f164",
"arrow-filled-up": "\f163",
"arrow-left": "\f162",
"arrow-right": "\f161",
"arrow-up": "\f160",
"attach": "\f15f",
"autofill": "\f15e",
"bank": "\f15d",
"bitcoin": "\f15c",
"bitwarden-shield": "\f15b",
"browser": "\f15a",
"bug": "\f159",
"business": "\f158",
"camera": "\f157",
"check": "\f155",
"check-circle": "\f156",
"circle": "\f154",
"clear": "\f153",
"clock": "\f152",
"close": "\f151",
"collection": "\f14f",
"collection-shared": "\f150",
"copy": "\f14e",
"credit-card": "\f14d",
"dashboard": "\f14c",
"delete": "\f14b",
"desktop": "\f149",
"desktop-user": "\f14a",
"diamond": "\f148",
"dollar": "\f147",
"download": "\f146",
"drag": "\f145",
"duplicate": "\f144",
"edit": "\f142",
"edit-alt": "\f143",
"encrypted": "\f141",
"error": "\f140",
"extension": "\f13f",
"external-link": "\f13e",
"family": "\f13d",
"file": "\f13b",
"file-text": "\f13c",
"filter": "\f13a",
"folder": "\f139",
"generate": "\f138",
"grid": "\f137",
"groups": "\f136",
"handshake": "\f135",
"hashtag": "\f134",
"help": "\f133",
"identity": "\f132",
"info": "\f131",
"key": "\f130",
"list": "\f12e",
"list-alt": "\f12f",
"loading": "\f12d",
"lock": "\f12b",
"lock-filled": "\f12c",
"login": "\f12a",
"mail": "\f129",
"mobile": "\f128",
"more-horizontal": "\f127",
"more-vertical": "\f126",
"msp": "\f125",
"new-window": "\f124",
"note": "\f123",
"notifications": "\f122",
"numbered-list": "\f121",
"palette": "\f120",
"passkey": "\f11f",
"accessibility": "\f171",
"add": "\f16f",
"add-circle": "\f170",
"angle-down": "\f16e",
"angle-left": "\f16d",
"angle-right": "\f16c",
"angle-up": "\f16a",
"angle-up-down": "\f16b",
"archive": "\f169",
"arrow-down": "\f168",
"arrow-filled-down": "\f167",
"arrow-filled-left": "\f166",
"arrow-filled-right": "\f165",
"arrow-filled-up": "\f164",
"arrow-left": "\f163",
"arrow-right": "\f162",
"arrow-up": "\f161",
"attach": "\f160",
"autofill": "\f15f",
"bank": "\f15e",
"bitcoin": "\f15d",
"bitwarden-shield": "\f15c",
"browser": "\f15b",
"bug": "\f15a",
"business": "\f159",
"camera": "\f158",
"check": "\f156",
"check-circle": "\f157",
"circle": "\f155",
"clear": "\f154",
"clock": "\f153",
"close": "\f152",
"collection": "\f150",
"collection-shared": "\f151",
"copy": "\f14f",
"credit-card": "\f14e",
"dashboard": "\f14d",
"delete": "\f14c",
"desktop": "\f14a",
"desktop-user": "\f14b",
"diamond": "\f149",
"dollar": "\f148",
"download": "\f147",
"drag": "\f146",
"duplicate": "\f145",
"edit": "\f143",
"edit-alt": "\f144",
"encrypted": "\f142",
"error": "\f141",
"extension": "\f140",
"external-link": "\f13f",
"family": "\f13e",
"file": "\f13c",
"file-text": "\f13d",
"filter": "\f13b",
"folder": "\f13a",
"generate": "\f139",
"grid": "\f138",
"groups": "\f137",
"handshake": "\f136",
"hashtag": "\f135",
"help": "\f134",
"identity": "\f133",
"info": "\f132",
"key": "\f131",
"list": "\f12f",
"list-alt": "\f130",
"loading": "\f12e",
"lock": "\f12c",
"lock-filled": "\f12d",
"login": "\f12b",
"mail": "\f12a",
"mobile": "\f129",
"more-horizontal": "\f128",
"more-vertical": "\f127",
"msp": "\f126",
"new-window": "\f125",
"note": "\f124",
"notifications": "\f123",
"numbered-list": "\f122",
"palette": "\f121",
"passkey": "\f120",
"passport": "\f11f",
"paypal": "\f11e",
"receipt": "\f11d",
"redo": "\f11c",
@ -221,49 +222,49 @@ $icons: (
"warning": "\f103",
"wireless": "\f102",
"wrench": "\f101",
"bell": "\f122",
"bell": "\f123",
"billing": "\f11d",
"brush": "\f120",
"brush": "\f121",
"cli": "\f10c",
"clone": "\f14e",
"clone": "\f14f",
"cog": "\f117",
"cog-f": "\f118",
"down-solid": "\f166",
"drag-and-drop": "\f145",
"ellipsis-h": "\f127",
"ellipsis-v": "\f126",
"envelope": "\f129",
"down-solid": "\f167",
"drag-and-drop": "\f146",
"ellipsis-h": "\f128",
"ellipsis-v": "\f127",
"envelope": "\f12a",
"exclamation-triangle": "\f103",
"eye": "\f104",
"eye-slash": "\f105",
"files": "\f144",
"globe": "\f12a",
"id-card": "\f132",
"files": "\f145",
"globe": "\f12b",
"id-card": "\f133",
"import": "\f108",
"info-circle": "\f131",
"lock-encrypted": "\f141",
"lock-f": "\f12c",
"info-circle": "\f132",
"lock-encrypted": "\f142",
"lock-f": "\f12d",
"minus-circle": "\f10f",
"paperclip": "\f15f",
"pencil": "\f143",
"pencil-square": "\f142",
"plus": "\f16e",
"plus-circle": "\f16f",
"popout": "\f124",
"premium": "\f148",
"provider": "\f135",
"puzzle": "\f13f",
"question-circle": "\f133",
"shield": "\f15b",
"spinner": "\f12d",
"paperclip": "\f160",
"pencil": "\f144",
"pencil-square": "\f143",
"plus": "\f16f",
"plus-circle": "\f170",
"popout": "\f125",
"premium": "\f149",
"provider": "\f136",
"puzzle": "\f140",
"question-circle": "\f134",
"shield": "\f15c",
"spinner": "\f12e",
"star-f": "\f111",
"sticky-note": "\f123",
"trash": "\f14b",
"universal-access": "\f170",
"up-down-btn": "\f16a",
"up-solid": "\f163",
"user-monitor": "\f14a",
"users": "\f136",
"sticky-note": "\f124",
"trash": "\f14c",
"universal-access": "\f171",
"up-down-btn": "\f16b",
"up-solid": "\f164",
"user-monitor": "\f14b",
"users": "\f137",
);
@each $name, $glyph in $icons {

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
<path d="M8.5 18.5h7v-1.5H8.5v1.5Zm3.5 -3q2.075 0 3.5375 -1.4625T17 10.5q0 -2.075 -1.4625 -3.5375T12 5.5q-2.075 0 -3.5375 1.4625T7 10.5q0 2.075 1.4625 3.5375T12 15.5Zm0 -1.675q-0.2 -0.275 -0.425 -0.9125T11.275 11.25h1.45q-0.075 1.025 -0.3 1.6625T12 13.825Zm-1.8 -0.325q-0.6 -0.375 -1.025 -0.95t-0.575 -1.3h1.175q0.05 0.625 0.15 1.1875t0.275 1.0625Zm3.6 0q0.175 -0.5 0.275 -1.0625t0.15 -1.1875h1.175q-0.15 0.725 -0.575 1.3t-1.025 0.95ZM8.6 9.75q0.15 -0.725 0.575 -1.3t1.025 -0.95q-0.175 0.5 -0.275 1.0625t-0.15 1.1875h-1.175Zm2.675 0q0.075 -1.025 0.3 -1.6625t0.425 -0.9125q0.2 0.275 0.425 0.9125t0.3 1.6625h-1.45Zm2.95 0q-0.05 -0.625 -0.15 -1.1875T13.8 7.5q0.6 0.375 1.025 0.95t0.575 1.3h-1.175ZM4 22v-20h14q0.825 0 1.4125 0.5875T20 4v16q0 0.825 -0.5875 1.4125T18 22H4Zm2 -2h12v-16H6v16Zm0 0v-16 16Z" fill="#101828"/>
</svg>

After

Width:  |  Height:  |  Size: 919 B

View File

@ -173,22 +173,22 @@ describe("buildCipherIcon", () => {
type: CipherType.Passport,
} as any as CipherView;
it("returns bwi-globe icon", () => {
it("returns bwi-passport icon", () => {
const iconDetails = buildCipherIcon(iconServerUrl, cipher, true);
expect(iconDetails).toEqual({
icon: "bwi-globe",
icon: "bwi-passport",
image: null,
fallbackImage: "",
imageEnabled: true,
});
});
it("returns bwi-globe icon when showFavicon is false", () => {
it("returns bwi-passport icon when showFavicon is false", () => {
const iconDetails = buildCipherIcon(iconServerUrl, cipher, false);
expect(iconDetails).toEqual({
icon: "bwi-globe",
icon: "bwi-passport",
image: null,
fallbackImage: "",
imageEnabled: false,

View File

@ -104,7 +104,7 @@ export function buildCipherIcon(
icon = "bwi-bank";
break;
case CipherType.Passport:
icon = "bwi-globe";
icon = "bwi-passport";
break;
case CipherType.DriversLicense:
icon = "bwi-id-card";

View File

@ -59,7 +59,7 @@ const bankAccountItem: CipherMenuItem = {
const passportItem: CipherMenuItem = {
type: CipherType.Passport,
icon: "bwi-globe",
icon: "bwi-passport",
labelKey: "typePassport",
subtitleKey: "typePassportSubtitle",
};

View File

@ -112,6 +112,7 @@ export const BITWARDEN_ICONS = [
"bwi-palette",
"bwi-paperclip",
"bwi-passkey",
"bwi-passport",
"bwi-paypal",
"bwi-pencil",
"bwi-pencil-square",

View File

@ -74,6 +74,10 @@ const bitwardenObjects = [
id: "bwi-id-card",
usage: "Indicates an identity item type.",
},
{
id: "bwi-passport",
usage: "Indicates a passport item type.",
},
{
id: "bwi-premium",
usage: "Relates to premium plans or actions.",

View File

@ -173,7 +173,7 @@ export class VaultFilterService implements VaultFilterServiceAbstraction {
id: "passport",
name: this.i18nService.t("typePassport"),
type: CipherType.Passport,
icon: "bwi-globe",
icon: "bwi-passport",
} as CipherTypeFilter,
]
: []),

View File

@ -11,6 +11,7 @@ import { BWI_TO_FIGMA, FIGMA_VARIANTS } from "./migration-map";
const ICONS_DIR = path.join(__dirname, "../../libs/assets/src/material-icons");
const SCSS_PATH = path.join(__dirname, "../../libs/angular/src/scss/bwicons/styles/style.scss");
const CSS_PATH = path.join(__dirname, "../../libs/angular/src/scss/bwicons/styles/style.css");
const ICON_TS_PATH = path.join(__dirname, "../../libs/components/src/shared/icon.ts");
function buildIconFont(): void {
@ -76,7 +77,9 @@ function buildIconFont(): void {
if (!glyph) {
return [];
} // Skip if Figma name not in glyphMap
return legacyNames.map((legacy) => ({ legacy, glyph }));
return legacyNames
.filter((legacy) => !glyphMap[legacy]) // skip if name is already a Figma icon
.map((legacy) => ({ legacy, glyph }));
})
.sort((a, b) => a.legacy.localeCompare(b.legacy))
.map(({ legacy, glyph }) => {
@ -99,7 +102,12 @@ ${entries.join(",\n")}${legacyEntries.length > 0 ? ",\n" + legacyEntries.join(",
fs.writeFileSync(SCSS_PATH, scssContent, "utf-8");
// Step 4: Update TypeScript icon array
// Step 4: Compile SCSS to CSS
// eslint-disable-next-line no-console
console.log("\nCompiling SCSS to CSS...");
execSync(`npx sass ${SCSS_PATH} ${CSS_PATH} --no-source-map`, { stdio: "inherit" });
// Step 5: Update TypeScript icon array
// eslint-disable-next-line no-console
console.log("\nUpdating TypeScript icon array...");