Add iconCx to Pill (#597)

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.164",
+  "version": "0.0.165",
   "repository": {
     "type": "git",
     "url": "https://github.com/viamrobotics/prime.git",

packages/core/src/lib/__tests__/pill.spec.ts

@@ -1,9 +1,16 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/svelte';
 import { Pill } from '$lib';
 import { cxTestArguments, cxTestResults } from './cx-test';
+import userEvent from '@testing-library/user-event';
 
 describe('Pill', () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
   it('Renders text within the pill if a value attribute is specified', () => {
     render(Pill, { value: 'test' });
     expect(screen.getByText('test')).toBeVisible();
@@ -67,11 +74,29 @@ describe('Pill', () => {
     expect(screen.getByText('test').parentElement).toHaveClass(cxTestResults);
   });
 
+  it('Renders with the passed iconCx classes', () => {
+    render(Pill, { value: 'test', icon: 'cog', iconCx: cxTestArguments });
+    expect(screen.getByTestId('icon-cog')).toHaveClass(cxTestResults);
+  });
+
   it('Renders with the passed href', () => {
     render(Pill, { value: 'link', href: 'https://www.viam.com' });
     expect(screen.getByRole('link', { name: 'link' })).toHaveAttribute(
       'href',
       'https://www.viam.com'
     );
   });
+
+  it('Renders icon tooltip when hovered', async () => {
+    render(Pill, { value: 'test', icon: 'cog', iconTooltip: 'Live' });
+
+    const icon = screen.getByTestId('icon-cog');
+
+    await user.hover(icon);
+
+    const tooltip = screen.getByRole('tooltip');
+
+    expect(tooltip).not.toHaveClass('hidden');
+    expect(tooltip).toHaveTextContent('Live');
+  });
 });

packages/core/src/lib/pill.svelte

@@ -10,7 +10,13 @@ For displaying a list of items.
 <svelte:options immutable />
 
 <script lang="ts">
-import { Icon, type IconName } from '$lib';
+import {
+  Icon,
+  TooltipContainer,
+  TooltipTarget,
+  TooltipText,
+  type IconName,
+} from '$lib';
 import cx from 'classnames';
 
 import { createEventDispatcher } from 'svelte';
@@ -36,6 +42,13 @@ export let removable = true;
 /** The icon shown in the button. */
 export let icon: IconName | undefined = undefined;
 
+/** Tooltip for the icon in the pill */
+export let iconTooltip: string | undefined = undefined;
+
+/** Additional CSS classes to pass to the pill icon. */
+let extraIconClasses: cx.Argument = '';
+export { extraIconClasses as iconCx };
+
 /** Additional CSS classes to pass to the pill. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
@@ -69,11 +82,21 @@ const handleRemove = () => {
   aria-readonly={readonly ? true : undefined}
 >
   {#if icon}
-    <Icon
-      name={icon}
-      cx="text-gray-6"
-      size="sm"
-    />
+    <TooltipContainer let:tooltipID>
+      <TooltipTarget>
+        <Icon
+          aria-described-by={tooltipID}
+          name={icon}
+          cx={cx('text-gray-6', extraIconClasses)}
+          size="sm"
+        />
+      </TooltipTarget>
+      {#if iconTooltip}
+        <TooltipText>
+          {iconTooltip}
+        </TooltipText>
+      {/if}
+    </TooltipContainer>
   {/if}
   {#if href}
     <a

packages/core/src/routes/+page.svelte

@@ -1201,6 +1201,13 @@ const onHoverDelayMsInput = (event: Event) => {
       target="_self"
       removable={false}
     />
+    <Pill
+      value="Robot"
+      icon="broadcast"
+      iconCx="text-success-dark"
+      iconTooltip="Live"
+      removable={true}
+    />
   </div>
 
   <!-- Prevent Handler -->