Toast Service

Note

Toast Service is not a component. It is a class for handling the toasts.

const toastService = new ToastService()

Guidelines

Only render one variant of toast at a time. Never combine toast-message and workflow-toast.

Limit the max amount of toasts visible to not overflow other action items.

tpg-workflow-toast should be mounted inside the content of tpg-workflow-panel.

Properties

maxVisible

maxVisible is defined on instantiation of ToastService. It controls how mnay toasts can be visible before the toasts start to queue up and wait for their turn.

mount

mountis defined on instantiation of ToastService. Only set this if you want to render the toasts within an element. mount defines where to place the toast stack. Default is document.body.

Note - When setting mount, the toast stack will change from posiiton: fixed to position: absolute and you need to set the mounted object to have position: relative.

placement

Where to place the toast.

Toast Variants

We have two different variants of toasts, take a look at the props and how to style them on their own page.

Toast Message

Workflow Toast

Examples

Triggering the toast

Use this to showcase the toast in the entire view.

Component

Vanilla JS

    <tpg-primary-button
      label="Trigger Toast"
      class="open-toast"
    ></tpg-primary-button>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const toastService = new ToastService({
          maxVisible: 3,
          placement: 'bottom-middle',
        });

        const toastTrigger = document.querySelector('#trigger-toast');
        toastTrigger.addEventListener('tpg-click', (e) => {
          const t = document.createElement('tpg-toast-message');
          t.duration = 5000;
          t.message = 'Placeholder text';
          toastService.add(t);
        });
      });
    </script>

React

    const SomeComponent = () => {
      // If its a client component, feel free
      // to create the ToastService directly in the ref
      const toastServiceRef =
        useRef(new ToastService({ maxVisible: 3, placement: 'bottom-middle'}));

      // If its a server component, add a useEffect
      // to make sure it initializes on the client side.
      useEffect(() => {
        toastServiceRef.current =
          new ToastService({ maxVisible: 3, placement: 'bottom-middle'});
      }, []);

      const triggerToast = () => {
        const t = document.createElement('tpg-toast-message');
        t.duration = 5000;
        t.message = 'Placeholder text';
        toastServiceRef.current.add(t);
      };
      return (
        <tpg-primary-button
          label="Trigger Toast"
          ontpg-click={triggerToast}
        ></tpg-primary-button>
      );
    }

Triggering the toast within a specific container

Component

Vanilla JS

    <tpg-primary-button
      label="Trigger Toast"
      class="open-toast"
    ></tpg-primary-button>
    <div id="mount"></div>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const mount = document.getElementById('mount');
        const toastService = new ToastService({
          maxVisible: 3,
          mount,
          placement: 'bottom-middle',
        });

        const toastTrigger = document.querySelector('#trigger-toast');
        toastTrigger.addEventListener('tpg-click', (e) => {
          const t = document.createElement('tpg-toast-message');
          t.duration = 5000;
          t.message = 'Placeholder text';
          toastService.add(t);
        });
      });
    </script>

React

    const SomeComponent = () => {
      // If its a client component, feel free
      // to create the ToastService directly in the ref
      const toastServiceRef =
        useRef(new ToastService({ maxVisible: 3, placement: 'bottom-middle'}));

      useEffect(() => {
        const mount = document.getElementById('mount');
        if (!mount) {
          return;
        }
        toastServiceRef.current = new ToastService({ maxVisible: 3, placement: 'bottom-middle', mount});
      }, []);

      const triggerToast = () => {
        const t = document.createElement('tpg-toast-message');
        t.duration = 5000;
        t.message = 'Placeholder text';
        toastServiceRef.current.add(t);
      };
      return (
        <>
          <tpg-primary-button
            label="Trigger Toast"
            ontpg-click={triggerToast}
          ></tpg-primary-button>
          <div id="mount"></div>
        </>
      );
    }

Passing down custom framework components

ToastService can also handle custom framework components as long as they have the same interface as one of the toast variants. This can be useful if you want to create wrapper components around the toast variants to add additional functionality or styling.

React

function App() {
  const toastServiceRef = useRef<ToastService | undefined>(undefined);

  useEffect(() => {
    toastServiceRef.current = new ToastService({});
  }, []);

  const showToast = (component: React.ReactElement) => {
    let root: Root;
    toastServiceRef.current?.addCustomComponent({
      cleanup: () => {
        root.unmount();
      },
      render: (container) => {
        root = createRoot(container);
        root.render(component);
      },
    });
  };

  return (
    <button
      onClick={() =>
        showToast(<TpgToastMessage message="This is a toast message!" />)
      }
    >
      Show Toast
    </button>
  );
}

Vue

const toastServiceRef = ref<ToastService | null>(null);

onMounted(() => {
  toastServiceRef.value = new ToastService({});
});

const show = (content: VNode) => {
  let vnode: VNode;
  toastServiceRef.value?.addCustomComponent({
    render: (container: HTMLElement) => {
      vnode = content;
      render(vnode, container);
    },
    cleanup: () => {
      render(null, vnode.el?.parentElement!);
    }
  });
};

const showToast = () => {
  show(h(TpgToastMessage, { message: "This is a toast message!" }));
}
</script>

<template>
  <tpg-primary-button
    v-on:tpg-click="showToast"
    label="Show Toast"
  ></tpg-primary-button>
</template>