APP-2198-FIX: Added padding and refactored function (viamrobotics#454)

ethanlookpotts · Dec 19, 2023 · 17fee7f · 17fee7f
1 parent cc53499
commit 17fee7f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 30 deletions.
diff --git a/packages/core/src/lib/toast/__tests__/toast.spec.ts b/packages/core/src/lib/toast/__tests__/toast.spec.ts
@@ -23,7 +23,6 @@ describe('toast', () => {
     await act(() => {
       context.toast({
         message: 'This is a success toast message',
-        variant: ToastVariant.Success,
       });
     });
 

diff --git a/packages/core/src/lib/toast/context.ts b/packages/core/src/lib/toast/context.ts
@@ -12,15 +12,17 @@ import { uniqueId } from '$lib/unique-id';
 import { pausableProgress } from '$lib/notification';
 import type { ToastVariantType } from '.';
 
+export type Toast = (params: ToastParams) => void;
+
 /** Internal toast context. */
 export interface ToastContext {
   state: ToastState;
-  toast: (params: ToastParams) => void;
+  toast: Toast;
 }
 export interface ToastParams {
   message: string;
   action?: { text: string; handler: () => unknown } | undefined;
-  variant: ToastVariantType;
+  variant?: ToastVariantType;
 }
 
 /** Internal toast state. */
@@ -34,7 +36,7 @@ export interface ToastElement {
   id: string;
   message: string;
   action?: { text: string; handler: () => unknown } | undefined;
-  variant: ToastVariantType;
+  variant?: ToastVariantType;
   pause: () => void;
   resume: () => void;
   dismiss: () => void;
@@ -102,8 +104,9 @@ export const createToastContext = (): ToastContext => {
 };
 
 /** Provide toast state to a component tree. */
-export const provideToast = (context = createToastContext()): void => {
+export const provideToast = (context = createToastContext()): Toast => {
   setContext(ToastContextKey, context);
+  return context.toast;
 };
 
 const useToastContext = (): ToastContext => {
@@ -117,7 +120,7 @@ const useToastContext = (): ToastContext => {
 };
 
 /** Get access to the toast notifier in a component. */
-export const useToast = (): ((params: ToastParams) => void) => {
+export const useToast = (): Toast => {
   return useToastContext().toast;
 };
 

diff --git a/packages/core/src/lib/toast/toast-banner.svelte b/packages/core/src/lib/toast/toast-banner.svelte
@@ -20,7 +20,7 @@ export { extraClasses as cx };
 
 <div
   class={cx(
-    'relative flex w-auto items-center gap-2 border bg-medium p-3 text-sm',
+    'relative flex w-auto items-center gap-2 border bg-medium p-2 text-sm',
     extraClasses
   )}
 >

diff --git a/packages/core/src/lib/toast/toast-container.svelte b/packages/core/src/lib/toast/toast-container.svelte
@@ -28,7 +28,7 @@ $: 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"
+  class="pointer-events-auto fixed bottom-0 left-1/2 top-auto z-max -translate-x-1/2 transform overflow-hidden p-1.5"
 >
   <ul class="flex flex-col items-center gap-2">
     {#each $toasts as { id, pause, resume, ...toast } (id)}

diff --git a/packages/storybook/src/stories/use-toast.mdx b/packages/storybook/src/stories/use-toast.mdx
@@ -16,12 +16,10 @@ The root layout component is probably the best place to set up the context.
 ```svelte
 <!-- +layout.svelte -->
 <script lang="ts">
-import { ToastContainer, provideToast } from '@viamrobotics/prime-core';
+import { ToastContainer } from '@viamrobotics/prime-core';
 
 import PageRoot from '$lib/layout/page-root.svelte';
 import PageContent from '$lib/layout/page-content.svelte';
-
-provideToast();
 </script>
 
 <PageRoot>
@@ -37,10 +35,10 @@ provideToast();
 To display a toast, use the `useToast` function:
 
 ```ts
-import { useToast, ToastVariant } from '@viamrobotics/prime-core';
+import { provideToast } from '@viamrobotics/prime-core';
 
 const doSomethingCrazy = () => {
-  const toast = useToast();
+  const toast = provideToast();
 
   toast({ message: 'Hello, Brooklyn!', variant: ToastVariant.Success });
 };
@@ -49,20 +47,20 @@ const doSomethingCrazy = () => {
 Right now only different variants of a success toast is supported.
 
 ```ts
-import { useToast } from '@viamrobotics/prime-core';
+import { provideToast } from '@viamrobotics/prime-core';
 
 const doSomethingCrazy = () => {
-  const toast = useToast();
+  const toast = provideToast();
   const exampleHanderFunction = () => void;
 
-  toast({ message: 'Plain slice please!', variant: ToastVariant.Success });
-  toast({ message: 'Plain slice please!', variant: ToastVariant.Success, action: { text: 'action', handler: exampleHandlerFunction });
+  toast({ message: 'Plain slice please!' });
+  toast({ message: 'Plain slice please!', action: { text: 'action', handler: exampleHandlerFunction });
 
 };
 ```
 
 ```ts
-import { toast } from '@viamrobotics/prime-core';
+import { provideToast } from '@viamrobotics/prime-core';
 ```
 
 <Canvas>

diff --git a/packages/storybook/src/stories/use-toast.stories.svelte b/packages/storybook/src/stories/use-toast.stories.svelte
@@ -1,16 +1,8 @@
 <script lang="ts">
 import { Meta, Story } from '@storybook/addon-svelte-csf';
-import {
-  Button,
-  ToastContainer,
-  ToastVariant,
-  provideToast,
-  useToast,
-} from '@viamrobotics/prime-core';
+import { Button, ToastContainer, provideToast } from '@viamrobotics/prime-core';
 
-provideToast();
-
-const toast = useToast();
+const toast = provideToast();
 </script>
 
 <Meta title="APIs/useToast" />
@@ -25,7 +17,6 @@ const toast = useToast();
         on:click={() =>
           toast({
             message: 'Success message',
-            variant: ToastVariant.Success,
           })}
       >
         Success Toast without action button
@@ -35,7 +26,6 @@ const toast = useToast();
         on:click={() =>
           toast({
             message: 'Success message',
-            variant: ToastVariant.Success,
             action: {
               text: 'action',
               handler: () => {