Add progress to icon button (#519)

viamrobotics · May 16, 2024 · 7971d1d · 7971d1d
1 parent 7dd93fb
commit 7971d1d
Show file tree

Hide file tree

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

diff --git a/packages/core/src/lib/button/icon-button.svelte b/packages/core/src/lib/button/icon-button.svelte
@@ -13,6 +13,7 @@ For user triggered actions.
 import cx from 'classnames';
 import { Icon, type IconName } from '$lib';
 import { preventHandler } from '$lib/prevent-handler';
+import Progress from '$lib/progress/progress.svelte';
 
 /** The icon shown in the button. */
 export let icon: IconName;
@@ -29,6 +30,9 @@ export let type: 'button' | 'submit' | 'reset' = 'button';
 /** The communicated action type to the user. */
 export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
 
+/** Shows progress indicator. Determinite progress is a @TODO */
+export let progress: 'indeterminate' | number | undefined = undefined;
+
 /** Additional CSS classes to pass to the button. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
@@ -59,5 +63,9 @@ $: handleDisabled = preventHandler(disabled);
   on:click
   on:click|capture={handleDisabled}
 >
-  <Icon name={icon} />
+  {#if progress}
+    <Progress variant={variant === 'danger' ? 'light' : 'dark'} />
+  {:else}
+    <Icon name={icon} />
+  {/if}
 </button>
diff --git a/packages/core/src/lib/progress/progress.svelte b/packages/core/src/lib/progress/progress.svelte
@@ -5,14 +5,11 @@ export let variant: 'dark' | 'light' = 'dark';
 </script>
 
 <div
-  class={cx(
-    'container -ml-1 flex h-4 w-4 items-center justify-center p-[1.5px]',
-    {
-      '': size === 'small',
-      'scale-[1.125]': size === 'medium',
-      'scale-[1.5]': size === 'large',
-    }
-  )}
+  class={cx('container flex h-4 w-4 items-center justify-center p-[1.5px]', {
+    '': size === 'small',
+    'scale-[1.125]': size === 'medium',
+    'scale-[1.5]': size === 'large',
+  })}
 >
   <div class="translate-x-[-6.5px]">
     {#each { length: 8 } as _, index}

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -566,6 +566,13 @@ const onHoverDelayMsInput = (event: Event) => {
     </Button>
 
     <Button progress="indeterminate">Loading</Button>
+    <IconButton
+      label="Pause"
+      variant="secondary"
+      progress="indeterminate"
+      icon="pause"
+      cx="border border-light"
+    />
     <Button
       progress="indeterminate"
       variant="danger">Loading</Button

diff --git a/packages/storybook/src/stories/icon-button.mdx b/packages/storybook/src/stories/icon-button.mdx
@@ -26,3 +26,7 @@ import { IconButton } from '@viamrobotics/prime-core';
 <Canvas>
   <Story of={IconButtonStories.Disabled} />
 </Canvas>
+
+<Canvas>
+  <Story of={IconButtonStories.Progress} />
+</Canvas>
diff --git a/packages/storybook/src/stories/icon-button.stories.svelte b/packages/storybook/src/stories/icon-button.stories.svelte
@@ -35,3 +35,11 @@ import { IconButton } from '@viamrobotics/prime-core';
     disabled
   />
 </Story>
+
+<Story name="Progress">
+  <IconButton
+    icon="refresh"
+    progress="indeterminate"
+    label="Restart object"
+  />
+</Story>