change size names

apps/web/src/app/admin-console/organizations/members/components/bulk/bulk-reinvite-failure-dialog.component.html

@@ -31,7 +31,7 @@
               <td bitCell>
                 <div class="tw-flex tw-items-center">
                   <bit-avatar
-                    size="small"
+                    size="sm"
                     [text]="u | userName"
                     [id]="u.userId"
                     [color]="u.avatarColor"

apps/web/src/app/admin-console/organizations/settings/account.component.html

@@ -21,7 +21,7 @@
         </bit-form-field>
       </div>
       <div>
-        <bit-avatar [text]="org.name" [id]="org.id" size="2xlarge"></bit-avatar>
+        <bit-avatar [text]="org.name" [id]="org.id" size="2xl"></bit-avatar>
         <app-account-fingerprint
           [fingerprintMaterial]="organizationId"
           [publicKeyBuffer]="publicKeyBuffer"

apps/web/src/app/auth/settings/account/selectable-avatar.component.ts

@@ -19,7 +19,7 @@ import { AvatarModule } from "@bitwarden/components";
     <bit-avatar
       appStopClick
       [text]="text"
-      size="2xlarge"
+      size="2xl"
       [text]="text"
       [color]="color"
       [id]="id"

apps/web/src/app/layouts/header/web-header.stories.ts

@@ -59,7 +59,7 @@ class MockProductSwitcherComponent {}
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   selector: "dynamic-avatar",
-  template: `<bit-avatar [text]="name$ | async" size="large"></bit-avatar>`,
+  template: `<bit-avatar [text]="name$ | async" size="lg"></bit-avatar>`,
   imports: [CommonModule, AvatarModule],
 })
 class MockDynamicAvatarComponent implements Partial<DynamicAvatarComponent> {

bitwarden_license/bit-web/src/app/admin-console/providers/settings/account.component.html

@@ -26,7 +26,7 @@
         </bit-form-field>
       </div>
       <div class="tw-col-span-6">
-        <bit-avatar [text]="provider.name" [id]="provider.id" size="2xlarge"></bit-avatar>
+        <bit-avatar [text]="provider.name" [id]="provider.id" size="2xl"></bit-avatar>
       </div>
     </div>
     <button type="submit" bitFormButton bitButton buttonType="primary">

libs/components/src/avatar/avatar.component.ts

@@ -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"],
 };
 
 /**

libs/components/src/avatar/avatar.stories.ts

@@ -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>
       `,

libs/components/src/header/header.stories.ts

@@ -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">

libs/components/src/item/item.stories.ts

@@ -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">