Update avatar with badge

Author: u12206050

component-library/src/components/wrapped/BccAvatar/BccAvatar.css

@@ -59,10 +59,13 @@
         @apply text-5xl;
     }
 
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.lg~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
+        transform: translate(40%, -40%);
+    }
 
     .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
-        transform: translate(25%, -25%);
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge {
+        transform: translate(20%, -20%);
     }
 }

component-library/src/components/wrapped/BccAvatar/BccAvatar.stories.ts

@@ -180,11 +180,24 @@ export const AvatarGroup: Story = {
 };
 
 export const WithBadge: Story = {
-	render: () => ({
+	args: { label: 'B', gender: 'female', child: true, size: 'xxl' },
+	render: args => ({
 		components: { BccAvatar, BccOverlayBadge },
+		setup() {
+			const sizeMap = {
+				xs: 'small',
+				sm: 'small',
+				md: 'medium',
+				lg: 'large',
+				xl: 'large',
+				xxl: 'xlarge',
+				xxxl: 'xlarge',
+			};
+			return { args, sizeMap };
+		},
 		template: `
-			<BccOverlayBadge value="3" class="inline-block">
-				<BccAvatar label="B" gender="female" child size="xxl" shape="circle" />
+			<BccOverlayBadge value="3" :size="sizeMap[args.size]">
+				<BccAvatar v-bind="args" />
 			</BccOverlayBadge>
 		`,
 	}),

component-library/src/components/wrapped/BccAvatar/BccAvatar.vue

@@ -14,7 +14,7 @@ export type AvatarProps = Omit<PrimeAvatarProps, 'shape' | 'size'> & {
 	squared?: boolean;
 	/** Adds a visible border around the avatar. */
 	bordered?: boolean;
-	/** Controls the avatar dimensions; maps to CSS size classes (xs through xxl). */
+	/** Controls the avatar dimensions; maps to CSS size classes (xs through xxl). Default: md */
 	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 };
 

component-library/src/styles/component-overrides.css

@@ -32,4 +32,9 @@ GUTTER FIX
 .p-select-overlay,
 .p-treeselect-overlay {
     margin: var(--p-anchor-gutter) 0;
+}
+
+/* This fix is to ensure overlay badge is contained within the size of the component it wraps */
+.p-overlaybadge {
+    display: inline-block;
 }