v2 Avatars - restProps and fallback slot support (#2626)

Author: endigo9740

.changeset/four-cherries-arrive.md

@@ -0,0 +1,5 @@
+---
+"skeleton.dev": minor
+---
+
+Feat: Avatar component updated to support restProps and fallback slot.

packages/skeleton/src/lib/components/Avatar/Avatar.svelte

@@ -5,7 +5,7 @@
 
 	// Props (initials)
 	/** Initials only - Provide up to two text characters. */
-	export let initials = 'AB';
+	export let initials = '';
 	/** Initials only - Provide classes to set the SVG text fill color. */
 	export let fill: CssClasses = 'fill-token';
 	/** Initials only - Set the base font size for the scalable SVG text. */
@@ -53,18 +53,17 @@
 
 <!-- FIXME: resolve a11y warnings -->
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<figure class="avatar {classesBase}" data-testid="avatar" on:click on:keydown on:keyup on:keypress>
-	{#if src}
+<figure class="avatar {classesBase}" data-testid="avatar" {...prunedRestProps()} on:click on:keydown on:keyup on:keypress>
+	{#if src || fallback}
 		<img
 			class="avatar-image {cImage}"
 			style={$$props.style ?? ''}
 			{src}
 			alt={$$props.alt || ''}
 			use:action={actionParams}
 			on:error={() => (src = fallback)}
-			{...prunedRestProps()}
 		/>
-	{:else}
+	{:else if initials}
 		<svg class="avatar-initials w-full h-full" viewBox="0 0 512 512">
 			<text
 				x="50%"
@@ -78,5 +77,7 @@
 				{String(initials).substring(0, 2).toUpperCase()}
 			</text>
 		</svg>
+	{:else}
+		<slot />
 	{/if}
 </figure>

packages/skeleton/src/lib/components/Avatar/Avatar.test.ts

@@ -36,7 +36,8 @@ describe('Avatar.svelte', () => {
 	});
 
 	it('Initials shown when no image source provided', async () => {
-		const { getByTestId } = render(Avatar);
-		expect(getByTestId('avatar').querySelector('.avatar-initials')?.textContent).eq('AB');
+		const testInitials = 'SK';
+		const { getByTestId } = render(Avatar, { props: { initials: testInitials } });
+		expect(getByTestId('avatar').querySelector('.avatar-initials')?.textContent).eq(testInitials);
 	});
 });

sites/skeleton.dev/src/routes/(inner)/components/avatars/+page.svelte

@@ -37,7 +37,7 @@
 		8: 'rounded-full'
 	};
 	let rangeSliderValue: keyof typeof roundedMapping = 8;
-	let fallback = '';
+	let fallback = imgPlaceholder;
 
 	// Reactive
 	$: actionParams = '#Apollo';
@@ -85,30 +85,11 @@
 				</svelte:fragment>
 			</DocsPreview>
 		</section>
-		<section class="space-y-4">
-			<h2 class="h2">Interactive Border</h2>
-			<p>Apply the following styles using the <code class="code">border</code> and <code class="code">cursor</code> properties.</p>
-			<DocsPreview background="neutral">
-				<svelte:fragment slot="preview">
-					<Avatar border={borderStyles} cursor="cursor-pointer" />
-				</svelte:fragment>
-				<svelte:fragment slot="source">
-					<CodeBlock
-						language="html"
-						code={`
-<Avatar
-	border="${borderStyles}"
-	cursor="cursor-pointer"
-/>
-`}
-					/>
-				</svelte:fragment>
-			</DocsPreview>
-		</section>
-		<section class="space-y-4">
-			<h2 class="h2">Handling Fallbacks</h2>
+		<!-- DEPRECATED: use fallback slot instead -->
+		<!-- <section class="space-y-4">
+			<h2 class="h2">Fallback Image</h2>
 			<p>
-				Use the <code class="code">fallback</code> property to specify a fallback when images fail to load, or supply the user's initials.
+				Use the <code class="code">fallback</code> property to specify a fallback when images fail to load.
 			</p>
 			<DocsPreview background="neutral" regionFooter="text-center">
 				<svelte:fragment slot="preview">
@@ -129,6 +110,42 @@
 					</select>
 				</svelte:fragment>
 			</DocsPreview>
+		</section> -->
+		<section class="space-y-4">
+			<h2 class="h2">Fallback</h2>
+			<p>Use the default slot to provide fallback images, icons, or text.</p>
+			<DocsPreview background="neutral" regionFooter="text-center">
+				<svelte:fragment slot="preview">
+					{#key fallback}
+						<Avatar background="bg-secondary-500">
+							<i class="fa-solid fa-skull text-xl"></i>
+						</Avatar>
+					{/key}
+				</svelte:fragment>
+				<svelte:fragment slot="source">
+					<CodeBlock language="html" code={`<Avatar background="bg-secondary-500">(fallback)</Avatar>`} />
+				</svelte:fragment>
+			</DocsPreview>
+		</section>
+		<section class="space-y-4">
+			<h2 class="h2">Interactive Border</h2>
+			<p>Apply the following styles using the <code class="code">border</code> and <code class="code">cursor</code> properties.</p>
+			<DocsPreview background="neutral">
+				<svelte:fragment slot="preview">
+					<Avatar initials="SK" border={borderStyles} cursor="cursor-pointer"></Avatar>
+				</svelte:fragment>
+				<svelte:fragment slot="source">
+					<CodeBlock
+						language="html"
+						code={`
+<Avatar
+	border="${borderStyles}"
+	cursor="cursor-pointer"
+/>
+`}
+					/>
+				</svelte:fragment>
+			</DocsPreview>
 		</section>
 		<section class="space-y-4">
 			<h2 class="h2">Applying Filters</h2>