Design maintenance nov 17 2023 (viamrobotics#430)

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.65",
+  "version": "0.0.66",
   "publishConfig": {
     "access": "public"
   },

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

@@ -9,9 +9,9 @@ describe('Pill', () => {
     expect(screen.getByText('test')).toBeVisible();
   });
 
-  it('Renders a normal pill that is not readonly if no readonly attribute has been specified', () => {
-    render(Pill);
-    expect(screen.getByRole('button')).toBeVisible();
+  it('Renders a removable pill', () => {
+    render(Pill, { value: 'test' });
+    expect(screen.getByLabelText('Remove test')).toBeVisible();
   });
 
   it('Renders a pill that is readonly if a readonly attribute of true has been specified', () => {
@@ -20,8 +20,8 @@ describe('Pill', () => {
   });
 
   it('Renders a pill that is not readonly if a readonly attribute of false has been specified', () => {
-    render(Pill, { readonly: false });
-    expect(screen.getByRole('button')).toBeVisible();
+    render(Pill, { value: 'test', readonly: false });
+    expect(screen.getByLabelText('Remove test')).toBeVisible();
   });
 
   it('Renders a normal pill if no disabled attribute has been specified', () => {
@@ -46,6 +46,11 @@ describe('Pill', () => {
     );
   });
 
+  it('Renders a resource pill that is not removable if a removable attribute of true has not been specified', () => {
+    render(Pill, { variant: 'outlined', removable: false });
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+
   it('Confirms default pill is clickable', async () => {
     const { component } = render(Pill);
     const onClick = vi.fn();

packages/core/src/lib/pill.svelte

@@ -10,20 +10,29 @@ For displaying a list of items.
 <svelte:options immutable />
 
 <script lang="ts">
-import { Icon } from '$lib';
+import { Icon, type IconName } from '$lib';
 import cx from 'classnames';
 
 import { createEventDispatcher } from 'svelte';
 
 /** The text in the pill. */
 export let value = '';
-/**
- * Whether or not the pill has the aria-readonly attribute. If not readonly, there is a button to remove the pill.
- */
+
+/** Whether or not the pill has the aria-readonly attribute. If readonly, there is not a button to remove the pill. */
 export let readonly = false;
+
 /** Whether or not the pill is disabled. */
 export let disabled = false;
 
+/** Whether or not the pill is removable. If removable, and not readonly, there is a button to remove the pill. */
+export let removable = true;
+
+/** Variants */
+export let variant: 'default' | 'outlined' = 'default';
+
+/** The icon shown in the button. */
+export let icon: IconName | '' = '';
+
 /** Additional CSS classes to pass to the pill. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
@@ -44,20 +53,30 @@ const handleRemove = () => {
 
 <div
   class={cx(
-    'flex max-w-fit items-center gap-1 whitespace-nowrap rounded bg-medium px-2 py-0.5 text-xs',
+    'flex max-w-fit items-center gap-1 whitespace-nowrap rounded text-xs',
     {
       'cursor-not-allowed bg-disabled-light text-disabled-dark':
         disabled || readonly,
+      'gap-1 bg-medium px-2 py-0.5': variant === 'default',
+      'h-6 gap-1.5 border border-medium bg-light pl-1.5 pr-2':
+        variant === 'outlined',
     },
     extraClasses
   )}
   aria-disabled={disabled ? true : undefined}
   aria-readonly={readonly ? true : undefined}
 >
+  {#if icon && variant === 'outlined'}
+    <Icon
+      name={icon}
+      cx="text-gray-6"
+      size="sm"
+    />
+  {/if}
   <span>
     {value}
   </span>
-  {#if !readonly}
+  {#if !readonly && removable}
     <button
       aria-label="Remove {value}"
       on:click={handleRemove}

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

@@ -1059,6 +1059,23 @@ const htmlSnippet = `
     />
   </div>
 
+  <!-- Outlined Pill -->
+  <h1 class="text-2xl">Outlined Pill</h1>
+  <div class="flex gap-4">
+    <Pill
+      value="Service"
+      variant="outlined"
+      icon="viam-service"
+      removable
+    />
+    <Pill
+      value="Component"
+      variant="outlined"
+      icon="viam-component"
+      removable={false}
+    />
+  </div>
+
   <!-- Prevent Handler -->
 
   <h1 class="text-2xl">Prevent Handler</h1>

packages/storybook/src/stories/pill.mdx

@@ -5,7 +5,7 @@ import * as PillStories from './pill.stories.svelte';
 
 # Pill
 
-Displays a list of items.
+Displays a pill.
 
 ```ts
 import { Pill } from '@viamrobotics/prime-core';
@@ -18,3 +18,7 @@ import { Pill } from '@viamrobotics/prime-core';
 <Canvas>
   <Story of={PillStories.Unremovable} />
 </Canvas>
+
+<Canvas>
+  <Story of={PillStories.Outlined} />
+</Canvas>

packages/storybook/src/stories/pill.stories.svelte

@@ -15,3 +15,12 @@ import { Pill } from '@viamrobotics/prime-core';
     readonly
   />
 </Story>
+
+<Story name="Outlined">
+  <Pill
+    value="Viam resource"
+    variant="outlined"
+    icon="viam-service"
+    removable={false}
+  />
+</Story>