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

[CL-688] Callout UI updates (#15152)

Browse Source 
* refresh callout ui

* fix callout padding

* Use more descriptive example text

* position icon. Change padding back
This commit is contained in:
Bryan Cunningham
2025-06-13 14:12:45 -04:00
committed by GitHub
parent bfb0b874ed
commit f76e80f3cd
4 changed files with 16 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
libs/components/src/callout/callout.component.html
View File

@@ -1,20 +1,24 @@
<aside <aside
class="tw-mb-4 tw-box-border tw-rounded-lg tw-border tw-border-l-4 tw-border-solid tw-bg-background tw-ps-3 tw-pe-2 tw-py-2 tw-leading-5 tw-text-main" class="tw-mb-4 tw-box-border tw-rounded-lg tw-bg-background tw-ps-3 tw-pe-3 tw-py-2 tw-leading-5 tw-text-main"
[ngClass]="calloutClass" [ngClass]="calloutClass"
[attr.aria-labelledby]="titleId" [attr.aria-labelledby]="titleId"
> >
@if (title) { @if (title) {
<header <header
id="{{ titleId }}" id="{{ titleId }}"
class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold tw-flex tw-gap-2 tw-items-center" class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold tw-flex tw-gap-2 tw-items-start"
> >
@if (icon) { @if (icon) {
<i class="bwi" [ngClass]="[icon, headerClass]" aria-hidden="true"></i> <i
class="bwi !tw-text-main tw-relative tw-top-[3px]"
[ngClass]="[icon]"
aria-hidden="true"
></i>
} }
{{ title }} {{ title }}
</header> </header>
} }
<div bitTypography="body2"> <div class="tw-ps-6" bitTypography="body2">
<ng-content></ng-content> <ng-content></ng-content>
</div> </div>
</aside> </aside>

6
libs/components/src/callout/callout.component.spec.ts
View File

@@ -33,8 +33,7 @@ describe("Callout", () => {
component.type = "success"; component.type = "success";
fixture.detectChanges(); fixture.detectChanges();
expect(component.title).toBeUndefined(); expect(component.title).toBeUndefined();
expect(component.icon).toBe("bwi-check"); expect(component.icon).toBe("bwi-check-circle");
expect(component.headerClass).toBe("!tw-text-success");
}); });
it("info", () => { it("info", () => {
@@ -42,7 +41,6 @@ describe("Callout", () => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.title).toBeUndefined(); expect(component.title).toBeUndefined();
expect(component.icon).toBe("bwi-info-circle"); expect(component.icon).toBe("bwi-info-circle");
expect(component.headerClass).toBe("!tw-text-info");
}); });
it("warning", () => { it("warning", () => {
@@ -50,7 +48,6 @@ describe("Callout", () => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.title).toBe("Warning"); expect(component.title).toBe("Warning");
expect(component.icon).toBe("bwi-exclamation-triangle"); expect(component.icon).toBe("bwi-exclamation-triangle");
expect(component.headerClass).toBe("!tw-text-warning");
}); });
it("danger", () => { it("danger", () => {
@@ -58,7 +55,6 @@ describe("Callout", () => {
fixture.detectChanges(); fixture.detectChanges();
expect(component.title).toBe("Error"); expect(component.title).toBe("Error");
expect(component.icon).toBe("bwi-error"); expect(component.icon).toBe("bwi-error");
expect(component.headerClass).toBe("!tw-text-danger");
}); });
}); });
}); });

23
libs/components/src/callout/callout.component.ts
View File

@@ -10,7 +10,7 @@ import { TypographyModule } from "../typography";
export type CalloutTypes = "success" | "info" | "warning" | "danger"; export type CalloutTypes = "success" | "info" | "warning" | "danger";
const defaultIcon: Record<CalloutTypes, string> = { const defaultIcon: Record<CalloutTypes, string> = {
success: "bwi-check", success: "bwi-check-circle",
info: "bwi-info-circle", info: "bwi-info-circle",
warning: "bwi-exclamation-triangle", warning: "bwi-exclamation-triangle",
danger: "bwi-error", danger: "bwi-error",
@@ -53,26 +53,13 @@ export class CalloutComponent implements OnInit {
get calloutClass() { get calloutClass() {
switch (this.type) { switch (this.type) {
case "danger": case "danger":
return "tw-border-danger-600"; return "tw-bg-danger-100";
case "info": case "info":
return "tw-border-info-600"; return "tw-bg-info-100";
case "success": case "success":
return "tw-border-success-600"; return "tw-bg-success-100";
case "warning": case "warning":
return "tw-border-warning-600"; return "tw-bg-warning-100";
}
}
get headerClass() {
switch (this.type) {
case "danger":
return "!tw-text-danger";
case "info":
return "!tw-text-info";
case "success":
return "!tw-text-success";
case "warning":
return "!tw-text-warning";
} }
} }
} }

4
libs/components/src/callout/callout.stories.ts
View File

@@ -39,11 +39,11 @@ export const Info: Story = {
render: (args) => ({ render: (args) => ({
props: args, props: args,
template: ` template: `
<bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>Content</bit-callout> <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>The content of the callout</bit-callout>
`, `,
}), }),
args: { args: {
title: "Title", title: "Callout title",
}, },
}; };