mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
feat: update notification badge to support 99+ (#17007)
After dogfooding the notifications we noticed that admins will probably have a larger number of unread notifications everyday so with that in mind we decided to increase the "truncate" rate from 9+ to 99+.
This commit is contained in:
@@ -9,14 +9,20 @@ const meta: Meta<typeof UnreadBadge> = {
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof UnreadBadge>;
|
||||
|
||||
export const Default: Story = {
|
||||
export const Until10: Story = {
|
||||
args: {
|
||||
count: 3,
|
||||
},
|
||||
};
|
||||
|
||||
export const MoreThanNine: Story = {
|
||||
export const MoreThan10: Story = {
|
||||
args: {
|
||||
count: 12,
|
||||
},
|
||||
};
|
||||
|
||||
export const MoreThan99: Story = {
|
||||
args: {
|
||||
count: 1000,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -13,13 +13,13 @@ export const UnreadBadge: FC<UnreadBadgeProps> = ({
|
||||
return (
|
||||
<span
|
||||
className={cn([
|
||||
"flex size-[18px] rounded text-2xs items-center justify-center",
|
||||
"flex min-w-[18px] h-[18px] w-fit px-1 rounded text-2xs items-center justify-center",
|
||||
"bg-surface-sky text-highlight-sky",
|
||||
className,
|
||||
])}
|
||||
{...props}
|
||||
>
|
||||
{count > 9 ? "9+" : count}
|
||||
{count > 99 ? "99+" : count}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user