APP-2198: Addressing stylistic issues in toast (viamrobotics#457)

micheal-parks · Jan 9, 2024 · cde5dae · cde5dae
1 parent fa44161
commit cde5dae
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 27 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts
@@ -50,6 +50,7 @@ export {
 
 export {
   ToastContainer,
+  ToastBanner,
   provideToast,
   useToast,
   ToastVariant,

diff --git a/packages/core/src/lib/toast/context.ts b/packages/core/src/lib/toast/context.ts
@@ -62,15 +62,14 @@ export const createToastContext = (): ToastContext => {
     const pause = () => setPaused(id, true);
     const resume = () => setPaused(id, false);
     const dismiss = () => remove(id);
-    const { progress, unsubscribe } = pausableProgress({
+    const { unsubscribe } = pausableProgress({
       isPaused,
       totalDuration: ToastDuration,
       onComplete: dismiss,
     });
 
     const toast = {
       id,
-      progress,
       pause,
       resume,
       dismiss,

diff --git a/packages/core/src/lib/toast/toast-banner.svelte b/packages/core/src/lib/toast/toast-banner.svelte
@@ -2,7 +2,7 @@
 
 <script lang="ts">
 import cx from 'classnames';
-import { Button, Icon } from '$lib';
+import { Icon, IconButton } from '$lib';
 import { iconName, iconClasses } from './variants';
 
 /** The message displayed on the toast */
@@ -20,11 +20,11 @@ export { extraClasses as cx };
 
 <div
   class={cx(
-    'relative flex w-auto items-center gap-2 border bg-medium p-2 text-sm',
+    'relative flex h-10 w-max max-w-[480px] items-center border bg-medium pl-3 pr-1 text-sm',
     extraClasses
   )}
 >
-  <div class="w-[18px]">
+  <div class="mr-4 flex gap-2">
     <Icon
       size="lg"
       name={iconName}
@@ -33,24 +33,25 @@ export { extraClasses as cx };
       aria-hidden={false}
       aria-label="success"
     />
-  </div>
 
-  <div class="mr-auto">{message}</div>
+    <p class="truncate">{message}</p>
+  </div>
 
-  {#if action}
-    <button
-      on:click={action.handler}
-      aria-label="Perform action"
-    >
-      <span class="text-sm font-medium hover:underline">{action.text}</span>
-    </button>
-  {/if}
-  <Button
-    variant="ghost"
-    cx="text-gray-7"
-    aria-label="Dismiss toast"
-    on:click={dismiss}
-  >
-    <Icon name="close" />
-  </Button>
+  <div class="flex gap-1">
+    {#if action}
+      <button
+        type="button"
+        on:click={action.handler}
+        aria-label="Perform action"
+      >
+        <span class="text-sm font-medium hover:underline">{action.text}</span>
+      </button>
+    {/if}
+    <IconButton
+      cx="text-gray-7"
+      label="Dismiss toast"
+      icon="close"
+      on:click={dismiss}
+    />
+  </div>
 </div>
diff --git a/packages/core/src/lib/toast/toast-container.svelte b/packages/core/src/lib/toast/toast-container.svelte
@@ -28,12 +28,12 @@ $: pageIsVisible.set(visibilityState === 'visible');
 <div
   role="status"
   aria-label="Toasts"
-  class="pointer-events-auto fixed bottom-0 left-1/2 top-auto z-max -translate-x-1/2 transform overflow-hidden p-1.5"
+  class="fixed bottom-0 left-1/2 top-auto z-max -translate-x-1/2 transform pb-6"
 >
-  <ul class="flex flex-col items-center gap-2">
+  <ul class="flex flex-col items-center gap-3">
     {#each $toasts as { id, pause, resume, ...toast } (id)}
       <li
-        in:fly={{ y: 256 }}
+        in:fly={{ y: 64 }}
         out:fade
         animate:flip={{ duration: 200 }}
         on:mouseenter={pause}

diff --git a/packages/storybook/src/stories/toast-banner.mdx b/packages/storybook/src/stories/toast-banner.mdx
@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import * as ToastBannerStories from './toast-banner.stories.svelte';
+
+<Meta title='Elements/ToastBanner' />
+
+# ToastBanner
+
+Toast Banner message of type success.
+
+```ts
+import { ToastBanner } from '@viamrobotics/prime-core';
+```
+
+<Canvas>
+  <Story of={ToastBannerStories.Success} />
+</Canvas>
+
+<Canvas>
+  <Story of={ToastBannerStories.SuccessWithEmphasizedAction} />
+</Canvas>
diff --git a/packages/storybook/src/stories/toast-banner.stories.svelte b/packages/storybook/src/stories/toast-banner.stories.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+import { Meta, Story } from '@storybook/addon-svelte-csf';
+import { ToastBanner } from '@viamrobotics/prime-core';
+</script>
+
+<Meta title="Elements/ToastBanner" />
+
+<Story name="Success">
+  <ToastBanner
+    message="Success message"
+    dismiss={() => {
+      console.log('Clicked close button');
+    }}
+    cx="max-w-[240px]"
+  />
+</Story>
+
+<Story name="SuccessWithEmphasizedAction">
+  <ToastBanner
+    message="Success message"
+    dismiss={() => {
+      console.log('Clicked close button');
+    }}
+    action={{
+      text: 'action',
+      handler: () => {
+        console.log('Clicked action');
+      },
+    }}
+    cx="max-w-[280px]"
+  />
+</Story>