Workflow Toast

<tpg-workflow-toast></tpg-workflow-toast>

General usage

Workflow Toast inform users about a task and can contain important workflow-related information, updates, feedback, or request for confirmations.

Workflow Toast are mildly disruptive, they can appear in the layout content of the Workflow Panel, or as a toast from the bottom Footer.

In both cases they do not belong with the other Workflow components.

Note

Workflow Toast is best to be used with the service class ToastService to handle showing, hiding, limiting visible toasts and more. Take a look ToastService documentation for how to implement it.

Guidelines

WorkflowToast scale in width to the parent container and in height by their content.

Sizing:

• min-width: 320px
• height: hug content

No matter the content the WorkflowToast will always have 8px left and right padding

TertiaryButton and StatusBadge cannot be shown at the same time.

One of the badges must always be shown in a Default Type. Both cannot be non-Default (e.g. accent, warning, danger, error, etc..)

The Main badge will always have “Type” priority.

Examples

Slots

We are using a pattern of named slots to give you the consumer more power and flexibility. When taking advantage of the named slots its important to follow your projects design guidelines.

Leading Badge

These are the standard default version of the tpg-workflow-toast with only the leading-badge slot defined.

Component

Vanilla JS

      <tpg-workflow-toast is-open>
        <tpg-badge
          emphasis="no-background-high"
          label="Placeholder text"
          slot="leading-badge"
          leading-icon-template={tpgIconPlaceholderCustom}
        ></tpg-badge>
      </tpg-workflow-toast>
      <tpg-workflow-toast is-open>
        <tpg-badge
          emphasis="no-background-high"
          label="Placeholder text"
          slot="leading-badge"
          type="error"
          leading-icon-template={tpgIconPlaceholderCustom}
        ></tpg-badge>
      </tpg-workflow-toast>
      <tpg-workflow-toast is-open>
        <tpg-badge
          emphasis="no-background-high"
          label="Placeholder text"
          slot="leading-badge"
          type="warning"
          leading-icon-template={tpgIconPlaceholderCustom}
        ></tpg-badge>
      </tpg-workflow-toast>
      <tpg-workflow-toast is-open>
        <tpg-badge
          emphasis="no-background-high"
          label="Placeholder text"
          slot="leading-badge"
          type="danger"
          leading-icon-template={tpgIconPlaceholderCustom}
        ></tpg-badge>
      </tpg-workflow-toast>

React

    <tpg-workflow-toast isOpen>
      <tpg-badge
        emphasis="no-background-high"
        label="Placeholder text"
        slot="leading-badge"
        leadingIconTemplate={tpgIconPlaceholderCustom}
      ></tpg-badge>
    </tpg-workflow-toast>
    <tpg-workflow-toast isOpen>
      <tpg-badge
        emphasis="no-background-high"
        label="Placeholder text"
        slot="leading-badge"
        type="error"
        leadingIconTemplate={tpgIconPlaceholderCustom}
      ></tpg-badge>
    </tpg-workflow-toast>
    <tpg-workflow-toast isOpen>
      <tpg-badge
        emphasis="no-background-high"
        label="Placeholder text"
        slot="leading-badge"
        type="warning"
        leadingIconTemplate={tpgIconPlaceholderCustom}
      ></tpg-badge>
    </tpg-workflow-toast>
    <tpg-workflow-toast isOpen>w
      <tpg-badge
        emphasis="no-background-high"
        label="Placeholder text"
        slot="leading-badge"
        type="danger"
        leadingIconTemplate={tpgIconPlaceholderCustom}
      ></tpg-badge>
    ></tpg-workflow-toast>

Trailing Badge

Use the trailing-badge slot to render a second badge component.

Component

Vanilla JS

      <tpg-workflow-toast
        id="wf-toast-trailing-badge"
        message="Placeholder text"
        is-open
      >
        <tpg-badge
          emphasis="no-background-high"
          label="Placeholder text"
          slot="leading-badge"
        ></tpg-badge>
        <tpg-badge
            label="This is the second badge"
            slot="trailing-badge"
        ></tpg-badge>
      </tpg-workflow-toast>

React

    <tpg-workflow-toast isOpen>
      <tpg-badge
        emphasis="no-background-high"
        label="Placeholder text"
        slot="leading-badge"
      ></tpg-badge>
      <tpg-badge
        label="This is the second badge"
        slot="trailing-badge"
      ></tpg-badge>
    </tpg-workflow-toast>

Trailing Tertiary Button

Use the trailing-tertiary-button slot to render a tertinary action button.

Component

Vanilla JS

    <tpg-workflow-toast is-open>
      <tpg-badge
        emphasis="no-background-high"
        label="Placeholder text"
        slot="leading-badge"
      ></tpg-badge>
      <tpg-tertiary-button
        label="Ok"
        slot="trailing-tertiary-button"
        size="small"
      ></tpg-tertiary-button>
    </tpg-workflow-toast>

React

    <tpg-workflow-toast isOpen>
      <tpg-badge
        emphasis="no-background-high"
        label="Placeholder text"
        slot="leading-badge"
      ></tpg-badge>
      <tpg-tertiary-button
        label="Ok"
        slot="trailing-tertiary-button"
        size="small"
      ></tpg-tertiary-button>
    </tpg-workflow-toast>

Triggering the toast

it is best to use the ToastManager to handle the triggering. Read its documentation here

The toast can be triggered by adding it to the DOM, and calling toast() on it. Note that after hide() is called (which happens automatically if you set a millisecond value for the duration attribute) the toast element is stripped from the DOM automatically. If you want to keep it around you will have to reinsert it. See the vanilla example for how to accomplish this.

However, it is worth noting that you should normally not have to do this, simply creating and discarding a toast element in each instance it is needed should work well enough in most cases. See the React example for how to do this.

Component

Vanilla JS

      <tpg-workflow-toast class="to-be-opened" duration="3000">
        <tpg-badge
          emphasis="no-background-high"
          label="Placeholder text"
          slot="leading-badge"
        ></tpg-badge>
        <tpg-tertiary-button
          label="Ok"
          slot="trailing-tertiary-button"
          size="small"
        ></tpg-tertiary-button>
      </tpg-workflow-toast>

      <script>
        document.addEventListener('DOMContentLoaded', () => {
          const toastOpener = document.querySelector('.open-toast');
          toastOpener.addEventListener('tpg-click', (e)=>{
            const parent = e.target.parentElement;
            const t = document.querySelector('.to-be-opened');
              const okButton = document.getElementById('wf-toast-opened-closing-button');
              okButton.addEventListener('tpg-click', (e)=>{
                t.hide();
              });

              // NOTE: you likely want to simply create and discard
              // toasts dynamically, unless you have very specific
              // optimization needs or other constraints.
            });
            t.toast();
          });
        });
      </script>

React

      function SomeComponent() {
        function handleOpen(e: TpgClickEvent) {
          const t = document.createElement('tpg-workflow-toast');
          t.duration = 3000;

          const leadingBadge = document.createElement('tpg-badge');
          leadingBadge.label = 'Placeholder text';
          leadingBadge.emphasis = 'no-background-high';
          leadingBadge.slot = 'leading-badge';

          const btn = document.createElement('tpg-tertiary-button');
          btn.label = 'Close';
          btn.slot = 'trailing-tertiary-button';
          btn.addEventListener('tpg-click', () => {
            t.hide();
          });

          t.appendChild(leadingBadge);
          t.appendChild(btn);

          const parent = e.target.parentElement;
          parent.appendChild(t);
          t.toast();
        }

        return (
          <>
            <tpg-primary-button
              label="Open toast"
              ontpg-click={handleOpen}
            ></tpg-primary-button>
          </>
        );
      }

Tables

Properties

Attribute	Property	Description	Type	Default Value
is-open	isOpen	Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.	boolean	false
duration	duration	The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `-1`, meaning the alert will not close on its own.	number	-1
position	position		string	''
is-queued	isQueued		boolean	false
_has-updated	_hasUpdated		boolean	false

Events

Event name	Reactjs attribute	Description
tpg-show	ontpg-show	The Toast emits the custom tpg-show event when starting the opening sequence.
tpg-after-show	ontpg-after-show	The Toast emits the custom tpg-after-show event after being opened and done rendering in the view.
tpg-hide	ontpg-hide	The Toast emits the custom tpg-hide event when starting the closing sequence.
tpg-after-hide	ontpg-after-hide	The Toast emits the custom tpg-after-hide event when done closing and removing the Toast from DOM.

Functions

Name	Description	Arguments
pauseAutoHide		No parameters
resumeAutoHide		No parameters

Slots

Name	Description
leading-badge	slot reserved for badge component to be used as the message of the toast
trailing-badge	slot reserved for badge component at the end of the toast
trailing-tertiary-button	slot reserved for a tertiary button at the end of the toast
	This is where the content of the toast will be displayed

CSS Parts

Attribute	Description
content	part for adding styling to the default slot

Sandbox