2024-03-06 design maintenance (viamrobotics#489)

Kschappacher · Mar 7, 2024 · 8269e47 · 8269e47
1 parent 2c7ad0f
commit 8269e47
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 64 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.94",
+  "version": "0.0.95",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/__tests__/label.spec.ts b/packages/core/src/lib/__tests__/label.spec.ts
@@ -16,8 +16,7 @@ describe('Label', () => {
     render(Label, { position: 'left' });
 
     const label = screen.getByText('Name:');
-    expect(label).toHaveClass('text-xs text-subtle-1');
-    expect(label).toHaveClass('inline whitespace-nowrap');
+    expect(label).toHaveClass('inline text-xs text-subtle-1');
   });
 
   it('Renders the label text as disabled', () => {

diff --git a/packages/core/src/lib/__tests__/pill.spec.ts b/packages/core/src/lib/__tests__/pill.spec.ts
@@ -46,11 +46,6 @@ 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();

diff --git a/packages/core/src/lib/__tests__/radio.spec.ts b/packages/core/src/lib/__tests__/radio.spec.ts
@@ -74,13 +74,6 @@ describe('Radio', () => {
     expect(legend).toHaveClass('after:text-danger-dark after:content-["*"]');
   });
 
-  it('Renders in a row if specified', () => {
-    render(Radio, { ...common, direction: 'row' });
-    expect(
-      screen.getByText('Test radio options').nextElementSibling
-    ).toHaveClass('flex-row gap-2');
-  });
-
   it('Renders in a column if specified', () => {
     render(Radio, { ...common, direction: 'col' });
     expect(

diff --git a/packages/core/src/lib/label.svelte b/packages/core/src/lib/label.svelte
@@ -51,7 +51,7 @@ export { extraClasses as cx };
 >
   <span
     class={cx('flex text-xs', {
-      'inline whitespace-nowrap': position === 'left',
+      inline: position === 'left',
       'text-subtle-1': !disabled,
       'cursor-not-allowed text-disabled-dark': disabled,
       'after:ml-1 after:text-danger-dark after:content-["*"]': required,

diff --git a/packages/core/src/lib/pill.svelte b/packages/core/src/lib/pill.svelte
@@ -27,9 +27,6 @@ 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 = '';
 
@@ -57,16 +54,15 @@ const handleRemove = () => {
     {
       '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',
+      'gap-1 bg-medium px-2 py-0.5': !icon,
+      'h-6 gap-1.5 border border-medium bg-light pl-1.5 pr-2': icon,
     },
     extraClasses
   )}
   aria-disabled={disabled ? true : undefined}
   aria-readonly={readonly ? true : undefined}
 >
-  {#if icon && variant === 'outlined'}
+  {#if icon}
     <Icon
       name={icon}
       cx="text-gray-6"

diff --git a/packages/core/src/lib/radio.svelte b/packages/core/src/lib/radio.svelte
@@ -43,9 +43,6 @@ export let disabled = false;
 /** Whether or not the fieldset should render as required */
 export let required = false;
 
-/** The `flex` direction to apply to the option radio inputs. */
-export let direction: 'col' | 'row' = 'col';
-
 /** Additional CSS classes to pass to the fieldset. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
@@ -76,20 +73,15 @@ $: handleDisabledKeydown = preventKeyboardHandler(disabled);
     </legend>
   {/if}
 
-  <div
-    class={cx('flex gap-2', {
-      'flex-col': direction === 'col',
-      'flex-row': direction === 'row',
-    })}
-  >
+  <div class="flex flex-col gap-2">
     {#each optionsInternal as { label, value, description, icon }}
       {@const isSelected = value === selected}
       {@const radioIcon = isSelected ? 'radiobox-marked' : 'radiobox-blank'}
       <Label
         position="left"
         {disabled}
         cx={[
-          'whitespace-nowrap text-xs',
+          'cursor-pointer text-xs',
           {
             'text-subtle-1': !isSelected && !disabled,
             'cursor-not-allowed text-disabled-dark': disabled,
@@ -110,14 +102,16 @@ $: handleDisabledKeydown = preventKeyboardHandler(disabled);
           on:click|capture={handleDisabled}
           on:keydown|capture={handleDisabledKeydown}
         />
-        <Icon
-          name={radioIcon}
-          cx={cx({
-            'text-disabled-dark': disabled,
-            'text-gray-9': !disabled && isSelected,
-            'text-gray-6': !disabled && !isSelected,
-          })}
-        />
+        <div>
+          <Icon
+            name={radioIcon}
+            cx={cx({
+              'text-disabled-dark': disabled,
+              'text-gray-9': !disabled && isSelected,
+              'text-gray-6': !disabled && !isSelected,
+            })}
+          />
+        </div>
         <span class="pl-1.5">
           <span class="flex gap-1.5">
             {#if icon}

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -1109,20 +1109,12 @@ const onHoverDelayMsInput = (event: Event) => {
       disabled
       value="Baz"
     />
-  </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}
     />
@@ -1188,14 +1180,27 @@ const onHoverDelayMsInput = (event: Event) => {
     >
       <svelte:fragment slot="legend">Disabled Radio</svelte:fragment>
     </Radio>
+  </div>
 
+  <div>
     <Radio
-      options={['Opt 1', 'Opt 2', 'Opt 3']}
-      selected="Opt 1"
-      name="row-radio"
-      direction="row"
+      name="Upload model"
+      options={[
+        {
+          label: 'New model',
+          value: 'new model',
+          description: 'Upload a new model',
+        },
+        {
+          label: 'New version',
+          value: 'new version',
+          description:
+            'Upload a new version of a model that already exists in Viam',
+        },
+      ]}
+      selected="new model"
     >
-      <svelte:fragment slot="legend">Row Radio</svelte:fragment>
+      <svelte:fragment slot="legend">Upload model</svelte:fragment>
     </Radio>
   </div>
 

diff --git a/packages/storybook/src/stories/pill.mdx b/packages/storybook/src/stories/pill.mdx
@@ -27,9 +27,9 @@ import { Pill } from '@viamrobotics/prime-core';
 </Canvas>
 
 <Canvas>
-  <Story of={PillStories.Outlined} />
+  <Story of={PillStories.Icon} />
 </Canvas>
 
 <Canvas>
-  <Story of={PillStories.OutlinedNotRemovable} />
+  <Story of={PillStories.IconNotRemovable} />
 </Canvas>
diff --git a/packages/storybook/src/stories/pill.stories.svelte b/packages/storybook/src/stories/pill.stories.svelte
@@ -30,43 +30,37 @@ import { Pill } from '@viamrobotics/prime-core';
   </div>
 </Story>
 
-<Story name="Outlined">
+<Story name="Icon">
   <div class="flex flex-row gap-1.5">
     <Pill
       value="my-base"
-      variant="outlined"
       icon="viam-component"
     />
     <Pill
       value="my-movement-sensor"
-      variant="outlined"
       icon="viam-component"
     />
     <Pill
       value="my-nav-service"
-      variant="outlined"
       icon="viam-service"
     />
   </div>
 </Story>
 
-<Story name="Outlined Not Removable">
+<Story name="Icon Not Removable">
   <div class="flex flex-row gap-1.5">
     <Pill
       value="my-base"
-      variant="outlined"
       icon="viam-component"
       removable={false}
     />
     <Pill
       value="my-movement-sensor"
-      variant="outlined"
       icon="viam-component"
       removable={false}
     />
     <Pill
       value="my-nav-service"
-      variant="outlined"
       icon="viam-service"
       removable={false}
     />