bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 00:03:56 +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

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: {