2023-12-20 Storybook design maintenance (viamrobotics#456)

anjinai · Dec 21, 2023 · 19024bc · 19024bc
1 parent 7fcb3e5
commit 19024bc
Show file tree

Hide file tree

Showing 13 changed files with 124 additions and 117 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ A collection of UI elements.
 
 [`@viamrobotics/prime-core`][core] - Core components. Exported as Svelte components.
 
-[`@viamrobotics/prime-blocks`][blocks] - Large blocks of UI that often have dependencies like [Threlte][]. Exported as Svelte components.
+[`@viamrobotics/prime-blocks`][blocks] - Large blocks of UI that often have dependencies like [Threlte][threlte]. Exported as Svelte components.
 
 [legacy]: https://github.com/viamrobotics/prime/tree/main/packages/legacy
 [core]: https://github.com/viamrobotics/prime/tree/main/packages/core

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/button/icon-button.svelte b/packages/core/src/lib/button/icon-button.svelte
@@ -29,12 +29,6 @@ export let type: 'button' | 'submit' | 'reset' = 'button';
 /** The communicated action type to the user. */
 export let variant: 'primary' | 'danger' = 'primary';
 
-/**
- * The text that appears in a native popup box on hover. Defaults to the value
- * of `label`.
- */
-export let title = label;
-
 /** Additional CSS classes to pass to the button. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
@@ -46,7 +40,6 @@ $: handleDisabled = preventHandler(disabled);
   {type}
   aria-label={label}
   aria-disabled={disabled ? true : undefined}
-  {title}
   class={cx(
     'inline-flex h-7.5 w-7.5 select-none items-center justify-center whitespace-nowrap',
     {
@@ -55,7 +48,7 @@ $: handleDisabled = preventHandler(disabled);
       'cursor-not-allowed text-gray-4': disabled,
       'hover:text-gray-7 active:text-gray-8':
         variant === 'primary' && !disabled,
-      'hover:bg-[rgba(190,53,54,0.08)] hover:text-danger-dark active:bg-[rgba(190,53,54,0.16)] active:text-danger-dark':
+      'hover:bg-danger-dark hover:bg-opacity-[0.08] hover:text-danger-dark active:bg-[rgba(190,53,54,0.16)] active:text-danger-dark':
         variant === 'danger' && !disabled,
     },
     extraClasses

diff --git a/packages/core/src/lib/icon/icon.svelte b/packages/core/src/lib/icon/icon.svelte
@@ -51,6 +51,7 @@ const hasNameProperty = Object.hasOwn(paths, name);
 -->
 <svg
   class={cx(
+    'text-gray-6',
     sizes[size],
     {
       hidden: !hasNameProperty,

diff --git a/packages/storybook/src/stories/banner.mdx b/packages/storybook/src/stories/banner.mdx
@@ -26,3 +26,7 @@ import { Banner } from '@viamrobotics/prime-core';
 <Canvas>
   <Story of={BannerStories.Danger} />
 </Canvas>
+
+<Canvas>
+  <Story of={BannerStories.DangerWithEmphasizedAction} />
+</Canvas>
diff --git a/packages/storybook/src/stories/banner.stories.svelte b/packages/storybook/src/stories/banner.stories.svelte
@@ -6,48 +6,72 @@ import { Button, Banner } from '@viamrobotics/prime-core';
 <Meta title="Elements/Banner" />
 
 <Story name="Info">
-  <Banner variant="info">
+  <Banner
+    variant="info"
+    cx="max-w-[600px]"
+  >
     <svelte:fragment slot="title">Info message</svelte:fragment>
-    <svelte:fragment slot="subtitle"
-      >Here is some helpful information. This message should be no longer than
-      three lines of text.</svelte:fragment
-    >
-    <svelte:fragment slot="action"
-      ><a href="https://prime.viam.com/">This is the action link.</a
-      ></svelte:fragment
-    >
+    <svelte:fragment slot="subtitle">
+      Here is some helpful information. This message should be no longer than
+      three lines of text.
+    </svelte:fragment>
+    <svelte:fragment slot="action">
+      <a href="https://prime.viam.com/">View details</a>
+    </svelte:fragment>
   </Banner>
 </Story>
 
 <Story name="Success">
-  <Banner variant="success">
+  <Banner
+    variant="success"
+    cx="max-w-[600px]"
+  >
     <svelte:fragment slot="title">Success message</svelte:fragment>
-    <svelte:fragment slot="subtitle"
-      >Here is some helpful information. This message should be no longer than
-      three lines of text.</svelte:fragment
-    >
-    <svelte:fragment slot="actionEmphasize">
-      <Button variant="dark">This is the action emphasized.</Button>
+    <svelte:fragment slot="subtitle">
+      Here is some helpful information. This message should be no longer than
+      three lines of text.
     </svelte:fragment>
   </Banner>
 </Story>
 
 <Story name="Warning">
-  <Banner variant="warning">
+  <Banner
+    variant="warning"
+    cx="max-w-[600px]"
+  >
     <svelte:fragment slot="title">Warning message</svelte:fragment>
-    <svelte:fragment slot="subtitle"
-      >Here is some helpful information. This message should be no longer than
-      three lines of text.</svelte:fragment
-    >
+    <svelte:fragment slot="subtitle">
+      Here is some helpful information. This message should be no longer than
+      three lines of text.
+    </svelte:fragment>
   </Banner>
 </Story>
 
 <Story name="Danger">
-  <Banner variant="danger">
+  <Banner
+    variant="danger"
+    cx="max-w-[600px]"
+  >
+    <svelte:fragment slot="title">Danger message</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+      Here is some helpful information. This message should be no longer than
+      three lines of text.
+    </svelte:fragment>
+  </Banner>
+</Story>
+
+<Story name="DangerWithEmphasizedAction">
+  <Banner
+    variant="danger"
+    cx="max-w-[600px]"
+  >
     <svelte:fragment slot="title">Danger message</svelte:fragment>
-    <svelte:fragment slot="subtitle"
-      >Here is some helpful information. This message should be no longer than
-      three lines of text.</svelte:fragment
-    >
+    <svelte:fragment slot="subtitle">
+      Here is some helpful information. This message should be no longer than
+      three lines of text.
+    </svelte:fragment>
+    <svelte:fragment slot="actionEmphasize">
+      <Button variant="dark">Abandon ship</Button>
+    </svelte:fragment>
   </Banner>
 </Story>
diff --git a/packages/storybook/src/stories/code-snippet.stories.svelte b/packages/storybook/src/stories/code-snippet.stories.svelte
@@ -211,8 +211,8 @@ fn main() {
 }]
      `.trim()}
   >
-    <svelte:fragment slot="caption"
-      >Check out this cool captioned JSON!</svelte:fragment
-    >
+    <svelte:fragment slot="caption">
+      Check out this cool captioned JSON!
+    </svelte:fragment>
   </CodeSnippet>
 </Story>
diff --git a/packages/storybook/src/stories/context-menu.mdx b/packages/storybook/src/stories/context-menu.mdx
@@ -16,8 +16,9 @@ import {
 ```
 
 <Canvas>
-  <div class='flex items-start gap-4'>
-    <Story of={ContextMenuStories.Basic} />
-    <Story of={ContextMenuStories.Floating} />
-  </div>
+  <Story of={ContextMenuStories.Basic} />
+</Canvas>
+
+<Canvas>
+  <Story of={ContextMenuStories.Floating} />
 </Canvas>
diff --git a/packages/storybook/src/stories/context-menu.stories.svelte b/packages/storybook/src/stories/context-menu.stories.svelte
@@ -5,6 +5,7 @@ import {
   ContextMenuItem,
   ContextMenuSeparator,
   FloatingMenu,
+  IconButton,
   uniqueId,
 } from '@viamrobotics/prime-core';
 
@@ -20,42 +21,47 @@ const setFloatingMenuOpen = (isOpen: boolean) => {
 <Meta title="Elements/Context menu" />
 
 <Story name="Basic">
-  <ContextMenu id={menuID}>
-    <ContextMenuItem>Just a label</ContextMenuItem>
-    <ContextMenuItem icon="trash-can-outline">With icon</ContextMenuItem>
+  <ContextMenu
+    id={menuID}
+    cx="max-w-[150px]"
+  >
+    <ContextMenuItem icon="refresh">Restart</ContextMenuItem>
+    <ContextMenuItem icon="open-in-new">View more info</ContextMenuItem>
     <ContextMenuSeparator />
-    <ContextMenuItem variant="primary">Primary</ContextMenuItem>
     <ContextMenuItem
-      icon="close"
+      icon="trash-can-outline"
       variant="danger"
     >
-      Danger
+      Delete
     </ContextMenuItem>
   </ContextMenu>
 </Story>
 
 <Story name="Floating">
-  <FloatingMenu
-    placement="bottom-start"
-    offset={4}
-    isOpen={floatingMenuOpen}
-    onChange={setFloatingMenuOpen}
-  >
-    <svelte:fragment slot="control">
-      {floatingMenuOpen ? 'Close menu' : 'Open menu'}
-    </svelte:fragment>
-    <svelte:fragment slot="items">
-      <ContextMenuItem>Just a label</ContextMenuItem>
-      <ContextMenuItem icon="trash-can-outline">With icon</ContextMenuItem>
-      <ContextMenuSeparator />
-      <ContextMenuItem variant="primary">Primary</ContextMenuItem>
-      <ContextMenuItem
-        icon="close"
-        variant="danger"
-        on:click={() => setFloatingMenuOpen(false)}
-      >
-        Danger
-      </ContextMenuItem>
-    </svelte:fragment>
-  </FloatingMenu>
+  <div class="min-h-[150px]">
+    <FloatingMenu
+      placement="bottom-start"
+      offset={4}
+      isOpen={floatingMenuOpen}
+      onChange={setFloatingMenuOpen}
+    >
+      <svelte:fragment slot="control">
+        <IconButton
+          icon="dots-horizontal"
+          label="See more"
+        />
+      </svelte:fragment>
+      <svelte:fragment slot="items">
+        <ContextMenuItem icon="refresh">Restart</ContextMenuItem>
+        <ContextMenuItem icon="open-in-new">View more info</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem
+          icon="trash-can-outline"
+          variant="danger"
+        >
+          Delete
+        </ContextMenuItem>
+      </svelte:fragment>
+    </FloatingMenu>
+  </div>
 </Story>
diff --git a/packages/storybook/src/stories/icon-button.mdx b/packages/storybook/src/stories/icon-button.mdx
@@ -22,7 +22,3 @@ import { IconButton } from '@viamrobotics/prime-core';
 <Canvas>
   <Story of={IconButtonStories.Disabled} />
 </Canvas>
-
-<Canvas>
-  <Story of={IconButtonStories.WithTitle} />
-</Canvas>
diff --git a/packages/storybook/src/stories/icon-button.stories.svelte b/packages/storybook/src/stories/icon-button.stories.svelte
@@ -7,31 +7,23 @@ import { IconButton } from '@viamrobotics/prime-core';
 
 <Story name="Primary">
   <IconButton
-    icon="play-circle-outline"
-    label="Run"
+    icon="plus"
+    label="Add object"
   />
 </Story>
 
 <Story name="Danger">
   <IconButton
-    label="Stop"
-    icon="stop-circle-outline"
+    icon="trash-can-outline"
+    label="Delete object"
     variant="danger"
   />
 </Story>
 
 <Story name="Disabled">
   <IconButton
-    icon="play-circle-outline"
-    label="Run"
+    icon="refresh"
+    label="Restart object"
     disabled
   />
 </Story>
-
-<Story name="With title">
-  <IconButton
-    icon="play-circle-outline"
-    label="Run"
-    title="Run this command"
-  />
-</Story>
diff --git a/packages/storybook/src/stories/input.mdx b/packages/storybook/src/stories/input.mdx
@@ -5,8 +5,8 @@ import * as InputStories from './input.stories.svelte';
 
 # Input
 
-A simple user input. We use this input to build all of the other input types,
-so it is rarely beneificial to use this over the more specific varities.
+A simple user input. We use this input to build all of the other input types.
+This is ideal for text, email, and password fields.
 
 ```ts
 import { Input } from '@viamrobotics/prime-core';
@@ -29,18 +29,6 @@ import { Input } from '@viamrobotics/prime-core';
   <Story of={InputStories.Labeled} />
 </Canvas>
 
-# Text Input
-
-A user input for text values. This is ideal for text, email, and password fields.
-
-```ts
-import { TextInput } from '@viamrobotics/prime-core';
-```
-
-<Canvas>
-  <Story of={InputStories.Text} />
-</Canvas>
-
 # Restricted Text Input
 
 An opinionated input for text values that only allows specified regex. The allowed characters are specified by the `restrictInput` function.
@@ -96,5 +84,5 @@ import { RangeInput } from '@viamrobotics/prime-core';
 ```
 
 <Canvas>
-  <Story of={InputStories.RangeInput} />
+  <Story of={InputStories.Range} />
 </Canvas>