design maintenance - Button indeterminant button variant (viamrobotic…

…s#511)
ethanlookpotts · Apr 18, 2024 · 0ad67e3 · 0ad67e3
1 parent a568d87
commit 0ad67e3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/button/button.svelte b/packages/core/src/lib/button/button.svelte
@@ -90,7 +90,7 @@ $: handleDisabled = preventHandler(disabled);
         'text-gray-4': disabled,
       })}
     >
-      <Progress />
+      <Progress variant={variant === 'danger' ? 'light' : 'dark'} />
     </span>
   {:else if icon}
     <span

diff --git a/packages/core/src/lib/button/progress.svelte b/packages/core/src/lib/button/progress.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+export let variant: 'dark' | 'light';
+</script>
+
 <!-- @TODO(mp) Rip this out and make it our canonical loader. -->
 <div class="container -ml-1 flex w-4 items-center p-[1.5px]">
   {#each { length: 8 } as _, index}
@@ -6,7 +10,10 @@
         transform: rotate({index * 45}deg);
         animation-delay: {index * 100}ms;
       "
-      class="pill absolute -mt-[0.5px] h-px w-[3px] rounded-[1px] bg-gray-8"
+      class="pill absolute -mt-[0.5px] h-px w-[3px] rounded-[1px] {variant ===
+      'dark'
+        ? 'bg-gray-8'
+        : 'bg-white'}"
     />
   {/each}
 </div>

diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
@@ -560,6 +560,10 @@ const onHoverDelayMsInput = (event: Event) => {
     </Button>
 
     <Button progress="indeterminate">Loading</Button>
+    <Button
+      progress="indeterminate"
+      variant="danger">Loading</Button
+    >
 
     <Button
       variant="dark"