2024-01-10 PRIME design maintenance (viamrobotics#467)

ethanlookpotts · Jan 17, 2024 · db1be63 · db1be63
1 parent 3643cac
commit db1be63
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 89 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.83",
+  "version": "0.0.84",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/__tests__/radio.spec.ts b/packages/core/src/lib/__tests__/radio.spec.ts
@@ -67,20 +67,11 @@ describe('Radio', () => {
     expect(screen.getByText('Test radio options')).toBeVisible();
   });
 
-  it('Renders the legend correctly when disabled', () => {
-    render(Radio, { ...common, disabled: true });
-
-    const legend = screen.getByText('Test radio options');
-    expect(legend).toHaveClass('text-disabled-dark cursor-not-allowed');
-  });
-
   it('Renders the legend correctly when required', () => {
     render(Radio, { ...common, required: true });
 
     const legend = screen.getByText('Test radio options');
-    expect(legend).toHaveClass(
-      'after:ml-1 after:text-danger-dark after:content-["*"]'
-    );
+    expect(legend).toHaveClass('after:text-danger-dark after:content-["*"]');
   });
 
   it('Renders in a row if specified', () => {

diff --git a/packages/core/src/lib/input/numeric-input.svelte b/packages/core/src/lib/input/numeric-input.svelte
@@ -40,6 +40,7 @@ $: pattern = isNumber ? '^([-+,0-9.]+)' : '[0-9]+';
   {pattern}
   {step}
   {...$$restProps}
+  placeholder={$$restProps.placeholder ?? 0}
   bind:value
   bind:input
   on:input

diff --git a/packages/core/src/lib/radio.svelte b/packages/core/src/lib/radio.svelte
@@ -56,10 +56,8 @@ $: getIcon = (option: string): IconName =>
   {#if $$slots.legend}
     <legend
       class={cx(
-        cx('mb-1 flex text-xs', {
-          'text-subtle-1': !disabled,
-          'cursor-not-allowed text-disabled-dark': disabled,
-          'after:ml-1 after:text-danger-dark after:content-["*"]': required,
+        cx('mb-1 flex text-xs text-subtle-1', {
+          'after:text-danger-dark after:content-["*"]': required,
         })
       )}
     >
@@ -105,9 +103,11 @@ $: getIcon = (option: string): IconName =>
           name={getIcon(option)}
           cx={cx({
             'text-disabled-dark': disabled,
+            'text-gray-9': !disabled && option === selected,
+            'text-gray-6': !disabled && option !== selected,
           })}
         />
-        <span class="pl-1.5 peer-focus:underline">
+        <span class="pl-1.5">
           {option}
         </span>
       </Label>

diff --git a/packages/storybook/src/stories/input.mdx b/packages/storybook/src/stories/input.mdx
@@ -37,7 +37,7 @@ An opinionated input for text values that only allows specified regex. The allow
 import { RestrictedTextInput } from '@viamrobotics/prime-core';
 
 const restrictInput = (inputValue: string) =>
-  inputValue.replaceAll(/[^a-n]/gu, '');
+  inputValue.replaceAll(/[^a-zA-Z0-9]/gu, '');
 ```
 
 <Canvas>

diff --git a/packages/storybook/src/stories/input.stories.svelte b/packages/storybook/src/stories/input.stories.svelte
@@ -10,7 +10,7 @@ import {
 } from '@viamrobotics/prime-core';
 
 const restrictInput = (inputValue: string) =>
-  inputValue.replaceAll(/[^a-n]/gu, '');
+  inputValue.replaceAll(/[^a-zA-Z0-9]/gu, '');
 </script>
 
 <Meta title="Elements/Input" />
@@ -34,21 +34,28 @@ const restrictInput = (inputValue: string) =>
 </Story>
 
 <Story name="Restricted Text">
-  <div class="mb-2 max-w-[200px]">
-    <RestrictedTextInput
-      value=""
-      {restrictInput}
-      tooltipDescription="Only lowercase a-n allowed"
-    />
-  </div>
+  <Label>
+    Username
+    <div
+      slot="input"
+      class="mb-2 max-w-[200px]"
+    >
+      <RestrictedTextInput
+        value=""
+        {restrictInput}
+        tooltipDescription="Valid characters: letters, numbers"
+        placeholder="funkymonkey89"
+      />
+    </div>
+  </Label>
 </Story>
 
 <Story name="Numeric">
-  <NumericInput cx="max-w-[200px]" />
+  <NumericInput cx="max-w-[80px]" />
 </Story>
 
 <Story name="Slider">
-  <SliderInput cx="max-w-[200px]" />
+  <SliderInput cx="max-w-[80px]" />
 </Story>
 
 <Story name="Range">

diff --git a/packages/storybook/src/stories/label.mdx b/packages/storybook/src/stories/label.mdx
@@ -12,5 +12,7 @@ import { Label } from '@viamrobotics/prime-core';
 ```
 
 <Canvas>
-  <Story of={LabelStories.Basic} />
+  <Story of={LabelStories.Input} />
 </Canvas>
+
+TODO(ethanlook): add other input types here!
diff --git a/packages/storybook/src/stories/modal.mdx b/packages/storybook/src/stories/modal.mdx
@@ -12,9 +12,9 @@ import { Modal } from '@viamrobotics/prime-core';
 ```
 
 <Canvas>
-  <Story of={ModalStories.Default} />
+  <Story of={ModalStories.Small} />
 </Canvas>
 
 <Canvas>
-  <Story of={ModalStories.Small} />
+  <Story of={ModalStories.Default} />
 </Canvas>
diff --git a/packages/storybook/src/stories/modal.stories.svelte b/packages/storybook/src/stories/modal.stories.svelte
@@ -8,17 +8,16 @@ let smallModalOpen = false;
 
 <Meta title="Elements/Modal" />
 
-<Story name="Default">
-  <div class="h-[500px]">
-    <Button on:click={() => (defaultModalOpen = true)}>Open</Button>
+<Story name="Small">
+  <div class="h-[200px]">
+    <Button on:click={() => (smallModalOpen = true)}>Open</Button>
     <Modal
-      isOpen={defaultModalOpen}
-      on:close={() => (defaultModalOpen = false)}
+      isOpen={smallModalOpen}
+      variant="small"
+      on:close={() => (smallModalOpen = false)}
     >
-      <svelte:fragment slot="title">Default title</svelte:fragment>
-      <svelte:fragment slot="message"
-        >This is the default modal.</svelte:fragment
-      >
+      <svelte:fragment slot="title">Small modal title</svelte:fragment>
+      <svelte:fragment slot="message">This is a small modal.</svelte:fragment>
       <Button
         slot="primary"
         on:click={() => console.log('Primary button clicked')}
@@ -36,16 +35,20 @@ let smallModalOpen = false;
   </div>
 </Story>
 
-<Story name="Small">
-  <div class="h-[200px]">
-    <Button on:click={() => (smallModalOpen = true)}>Open</Button>
+<Story name="Default">
+  <div class="h-[500px]">
+    <Button on:click={() => (defaultModalOpen = true)}>Open</Button>
     <Modal
-      isOpen={smallModalOpen}
-      variant="small"
-      on:close={() => (smallModalOpen = false)}
+      isOpen={defaultModalOpen}
+      on:close={() => (defaultModalOpen = false)}
     >
-      <svelte:fragment slot="title">Small modal title</svelte:fragment>
-      <svelte:fragment slot="message">This is a small modal.</svelte:fragment>
+      <svelte:fragment slot="title">Default title</svelte:fragment>
+      <div
+        slot="message"
+        class="h-full border border-dashed border-light"
+      >
+        This is a large modal.
+      </div>
       <Button
         slot="primary"
         on:click={() => console.log('Primary button clicked')}

diff --git a/packages/storybook/src/stories/pill.mdx b/packages/storybook/src/stories/pill.mdx
@@ -5,20 +5,31 @@ import * as PillStories from './pill.stories.svelte';
 
 # Pill
 
-Displays a pill.
+There are two types of pills, `default` (no icon) and `outlined` (icon).
+Either type can be removable or read-only.
+
+The `outlined` variant should be used to represent objects within Viam
+like components, services, machines, fragments, etc. The icon should be
+the appropriate icon for the object type and the text should be the
+user-defined name of the object (ie. the machine name, component name,
+etc).
 
 ```ts
 import { Pill } from '@viamrobotics/prime-core';
 ```
 
 <Canvas>
-  <Story of={PillStories.Primary} />
+  <Story of={PillStories.Default} />
 </Canvas>
 
 <Canvas>
-  <Story of={PillStories.Unremovable} />
+  <Story of={PillStories.DefaultNotRemovable} />
 </Canvas>
 
 <Canvas>
   <Story of={PillStories.Outlined} />
 </Canvas>
+
+<Canvas>
+  <Story of={PillStories.OutlinedNotRemovable} />
+</Canvas>
diff --git a/packages/storybook/src/stories/pill.stories.svelte b/packages/storybook/src/stories/pill.stories.svelte
@@ -5,22 +5,70 @@ import { Pill } from '@viamrobotics/prime-core';
 
 <Meta title="Elements/Pill" />
 
-<Story name="Primary">
-  <Pill value="cool pill" />
+<Story name="Default">
+  <div class="flex flex-row gap-1.5">
+    <Pill value="Lion" />
+    <Pill value="Tiger" />
+    <Pill value="Bear" />
+  </div>
 </Story>
 
-<Story name="Unremovable">
-  <Pill
-    value="Not removable"
-    readonly
-  />
+<Story name="Default Not Removable">
+  <div class="flex flex-row gap-1.5">
+    <Pill
+      value="Lion"
+      removable={false}
+    />
+    <Pill
+      value="Tiger"
+      removable={false}
+    />
+    <Pill
+      value="Bear"
+      removable={false}
+    />
+  </div>
 </Story>
 
 <Story name="Outlined">
-  <Pill
-    value="Viam resource"
-    variant="outlined"
-    icon="viam-service"
-    removable={false}
-  />
+  <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">
+  <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}
+    />
+  </div>
 </Story>
diff --git a/packages/storybook/src/stories/radio.mdx b/packages/storybook/src/stories/radio.mdx
@@ -26,7 +26,3 @@ import { Radio } from '@viamrobotics/prime-core';
 <Canvas>
   <Story of={RadioStories.Disabled} />
 </Canvas>
-
-<Canvas>
-  <Story of={RadioStories.Row} />
-</Canvas>
diff --git a/packages/storybook/src/stories/radio.stories.svelte b/packages/storybook/src/stories/radio.stories.svelte
@@ -8,50 +8,39 @@ import { Radio } from '@viamrobotics/prime-core';
 <Story name="Basic">
   <Radio
     name="basic"
-    options={['Opt 1', 'Opt 2', 'Opt 3']}
-    selected="Opt 1"
+    options={['Lion', 'Tiger', 'Bear']}
+    selected="Lion"
   />
 </Story>
 
 <Story name="With legend">
   <Radio
     name="legend"
-    options={['Opt 1', 'Opt 2']}
-    selected="Opt 1"
+    options={['Lion', 'Tiger', 'Bear']}
+    selected="Lion"
   >
-    <svelte:fragment slot="legend">These are your options</svelte:fragment>
+    <svelte:fragment slot="legend">Favorite animal</svelte:fragment>
   </Radio>
 </Story>
 
 <Story name="Required">
   <Radio
     name="required"
-    options={['To be', 'Not to be']}
-    selected="Opt 1"
+    options={['Lion', 'Tiger', 'Bear']}
+    selected="Lion"
     required
   >
-    <svelte:fragment slot="legend">Answer the question</svelte:fragment>
+    <svelte:fragment slot="legend">Favorite animal</svelte:fragment>
   </Radio>
 </Story>
 
 <Story name="Disabled">
   <Radio
     name="disabled"
-    options={['Frank', 'Dave']}
-    selected="Frank"
+    options={['Lion', 'Tiger', 'Bear']}
+    selected="Lion"
     disabled
   >
-    <svelte:fragment slot="legend"
-      >I'm afraid that's something I cannot allow to happen.
-    </svelte:fragment>
+    <svelte:fragment slot="legend">Favorite animal</svelte:fragment>
   </Radio>
 </Story>
-
-<Story name="Row">
-  <Radio
-    name="row"
-    options={['Left', 'Right']}
-    selected="Left"
-    direction="row"
-  />
-</Story>