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

skeletonlabs · Apr 22, 2024 · 7a9827e · 7a9827e
1 parent 8d4a2e9
commit 7a9827e
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 31 deletions.
diff --git a/.changeset/four-cherries-arrive.md b/.changeset/four-cherries-arrive.md
@@ -0,0 +1,5 @@
+---
+"skeleton.dev": minor
+---
+
+Feat: Avatar component updated to support restProps and fallback slot.
diff --git a/packages/skeleton/src/lib/components/Avatar/Avatar.svelte b/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>
diff --git a/packages/skeleton/src/lib/components/Avatar/Avatar.test.ts b/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);
  });
 });
diff --git a/sites/skeleton.dev/src/routes/(inner)/components/avatars/+page.svelte b/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>