bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-03-01 11:01:17 +00:00
Code Issues Releases Wiki Activity

change size names

Browse Source
This commit is contained in:
Vicki League
2026-02-27 10:54:06 -05:00
parent 5688ae9238
commit dc334cb460
9 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
libs/components/src/avatar/avatar.component.ts
View File

@@ -12,17 +12,17 @@ import { Utils } from "@bitwarden/common/platform/misc/utils";
import { AriaDisableDirective } from "../a11y";
import { ariaDisableElement } from "../utils";
export type AvatarSize = "2xlarge" | "xlarge" | "large" | "base" | "small";
export type AvatarSize = "2xl" | "xl" | "lg" | "base" | "sm";
export const AvatarDefaultColors = ["teal", "coral", "brand", "green", "purple"] as const;
export type AvatarColor = (typeof AvatarDefaultColors)[number];
const sizeClasses: Record<AvatarSize, string[]> = {
"2xlarge": ["tw-h-16", "tw-w-16", "tw-min-w-16"],
xlarge: ["tw-h-14", "tw-w-14", "tw-min-w-14"],
large: ["tw-h-11", "tw-w-11", "tw-min-w-11"],
"2xl": ["tw-h-16", "tw-w-16", "tw-min-w-16"],
xl: ["tw-h-14", "tw-w-14", "tw-min-w-14"],
lg: ["tw-h-11", "tw-w-11", "tw-min-w-11"],
base: ["tw-h-8", "tw-w-8", "tw-min-w-8"],
small: ["tw-h-6", "tw-w-6", "tw-min-w-6"],
sm: ["tw-h-6", "tw-w-6", "tw-min-w-6"],
};
/**

16
libs/components/src/avatar/avatar.stories.ts
View File

@@ -59,7 +59,7 @@ export const Sizes: Story = {
<div class="tw-flex tw-gap-4 tw-mb-10">
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> small </span>
<bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'small'"></bit-avatar>
<bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'sm'"></bit-avatar>
</div>
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> base </span>
@@ -67,15 +67,15 @@ export const Sizes: Story = {
</div>
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> large </span>
<bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'large'"></bit-avatar>
<bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'lg'"></bit-avatar>
</div>
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> xlarge </span>
<bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'xlarge'"></bit-avatar>
<bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'xl'"></bit-avatar>
</div>
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> 2xlarge </span>
<bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'2xlarge'"></bit-avatar>
<bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'2xl'"></bit-avatar>
</div>
</div>
@@ -83,7 +83,7 @@ export const Sizes: Story = {
<div class="tw-flex tw-gap-4 tw-mb-10">
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> small </span>
<button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'small'"></button>
<button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'sm'"></button>
</div>
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> base </span>
@@ -91,15 +91,15 @@ export const Sizes: Story = {
</div>
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> large </span>
<button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'large'"></button>
<button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'lg'"></button>
</div>
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> xlarge </span>
<button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'xlarge'"></button>
<button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'xl'"></button>
</div>
<div class="tw-flex tw-flex-col tw-gap-2 tw-items-center">
<span> 2xlarge </span>
<button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'2xlarge'"></button>
<button bit-avatar [color]="'brand'" [text]="'Walt Walterson'" [size]="'2xl'"></button>
</div>
</div>
`,

2
libs/components/src/header/header.stories.ts
View File

@@ -91,7 +91,7 @@ export const KitchenSink: Story = {
type="text"
/>
<button type="button" bitIconButton="bwi-filter" label="Switch products"></button>
<bit-avatar text="Will" size="large"></bit-avatar>
<bit-avatar text="Will" size="lg"></bit-avatar>
<button bitButton buttonType="primary">New</button>
<button bitButton slot="secondary">Click Me 🎉</button>
<bit-tab-nav-bar slot="tabs">

2
libs/components/src/item/item.stories.ts
View File

@@ -113,7 +113,7 @@ export const ContentSlots: Story = {
<bit-avatar
slot="start"
text="Foo"
size="large"
size="lg"
></bit-avatar>
foo&#64;bitwarden.com
<ng-container slot="secondary">