bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +00:00
Code Issues Releases Wiki Activity

[CL-421] add new notification variant to badge (#14130)

Browse Source 
* add new notification variant to badge
This commit is contained in:
Jason Ng
2025-04-07 10:37:34 -04:00
committed by GitHub
parent c8967bf4b3
commit 31cc2c57ee
2 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
libs/components/src/badge/badge.component.ts
View File

@@ -5,7 +5,14 @@ import { Component, ElementRef, HostBinding, Input } from "@angular/core";
import { FocusableElement } from "../shared/focusable-element";
export type BadgeVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info";
export type BadgeVariant =
| "primary"
| "secondary"
| "success"
| "danger"
| "warning"
| "info"
| "notification";
const styles: Record<BadgeVariant, string[]> = {
primary: ["tw-bg-primary-100", "tw-border-primary-700", "!tw-text-primary-700"],
@@ -14,6 +21,11 @@ const styles: Record<BadgeVariant, string[]> = {
danger: ["tw-bg-danger-100", "tw-border-danger-700", "!tw-text-danger-700"],
warning: ["tw-bg-warning-100", "tw-border-warning-700", "!tw-text-warning-700"],
info: ["tw-bg-info-100", "tw-border-info-700", "!tw-text-info-700"],
notification: [
"tw-bg-notification-100",
"tw-border-notification-600",
"!tw-text-notification-600",
],
};
const hoverStyles: Record<BadgeVariant, string[]> = {
@@ -27,6 +39,11 @@ const hoverStyles: Record<BadgeVariant, string[]> = {
danger: ["hover:tw-bg-danger-600", "hover:tw-border-danger-600", "hover:!tw-text-contrast"],
warning: ["hover:tw-bg-warning-600", "hover:tw-border-warning-600", "hover:!tw-text-black"],
info: ["hover:tw-bg-info-600", "hover:tw-border-info-600", "hover:!tw-text-black"],
notification: [
"hover:tw-bg-notification-600",
"hover:tw-border-notification-600",
"hover:!tw-text-contrast",
],
};
@Component({

11
libs/components/src/badge/badge.stories.ts
View File

@@ -36,6 +36,7 @@ export const Variants: Story = {
<button class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
<button class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Hover</span>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -44,6 +45,7 @@ export const Variants: Story = {
<button class="tw-mx-1 tw-test-hover" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="info" [truncate]="truncate">Info</button>
<button class="tw-mx-1 tw-test-hover" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Focus Visible</span>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -52,6 +54,7 @@ export const Variants: Story = {
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="info" [truncate]="truncate">Info</button>
<button class="tw-mx-1 tw-test-focus-visible" bitBadge variant="notification" [truncate]="truncate">Notification</button>
<br/><br/>
<span class="tw-text-main tw-mx-1">Disabled</span>
<button disabled class="tw-mx-1" bitBadge variant="primary" [truncate]="truncate">Primary</button>
@@ -60,6 +63,7 @@ export const Variants: Story = {
<button disabled class="tw-mx-1" bitBadge variant="danger" [truncate]="truncate">Danger</button>
<button disabled class="tw-mx-1" bitBadge variant="warning" [truncate]="truncate">Warning</button>
<button disabled class="tw-mx-1" bitBadge variant="info" [truncate]="truncate">Info</button>
<button disabled class="tw-mx-1" bitBadge variant="notification" [truncate]="truncate">Notification</button>
`,
}),
};
@@ -112,6 +116,13 @@ export const Info: Story = {
},
};
export const Notification: Story = {
...Primary,
args: {
variant: "notification",
},
};
export const Truncated: Story = {
...Primary,
args: {