Local Modal Workflow

<tpg-local-modal-workflow></tpg-local-modal-workflow>

Local Modal Workflow are higher-architecture alternative to Local Modals Drawers. They are designed to accomplish complex, self-contained workflows that incorporate secondary task-oriented workflows (that will most likely take place in Local Modals Drawers).

They open from bottom to top and can be dismissed by the “Back” button on their header. Said button will always display an arrow back icon followed by the name of the destination they are pointing to.

Local Modal Workflow are disruptive, they take over the whole height of the Workflow panel ad the aim to direct the user focus only on the task at hand. Only use them when you need the user’s full attention for the action they are trying to accomplish.

Their footer follows the rules of the Modal Footer component.

Note

Local Modal Workflow extends Local Modal.
Also take a look at Modal Header and Footer component documentation. They are usually slotted into local modal drawer.

Examples

Component

Vanilla JS

    <script>
    {
      document.addEventListener('DOMContentLoaded', () => {
        const localModalDrawer = document.getElementById('modal-workflow');
        const openButton = document.getElementById('button-open');
        const closeButton = document.getElementById('button-close');
        openButton.addEventListener("tpg-click", () => {
          localModalDrawer.showModal();
        });
        closeButton.addEventListener("tpg-click", () => {
          localModalDrawer.hideModal();
        });
      });
    }
    </script>
    <tpg-primary-button label="Open Local Modal Workflow" id="button-open"></tpg-primary-button>
    <div style="position: relative; margin-top: 1rem">
      <tpg-local-modal-workflow id="modal-workflow" is-open>
        <tpg-modal-header
          heading-placement="center"
          slot="header"
        >
          <tpg-quaternary-button id="button-close" size="small" label="Text" icon-template={tpgIconArrowBack} slot="leading-btn"></tpg-quaternary-button>
          <tpg-badge
            slot="heading-badge"
            size="lg"
            label="Heading"
            emphasis="no-background"
            type="neutral"
          ></tpg-badge>
          <tpg-menu-item slot="menu-item" label="Label 1"></tpg-menu-item>
          <tpg-menu-item slot="menu-item" label="Label 2"></tpg-menu-item>
          <tpg-menu-item slot="menu-item" label="Label 3"></tpg-menu-item>
          <tpg-menu-item slot="menu-item" label="Label 4"></tpg-menu-item>
          <tpg-menu-item slot="menu-item" label="Label 5"></tpg-menu-item>
        </tpg-modal-header>
        <div style="display: flex; flex-direction: column; gap: 0.75rem">
          <div>
            <tpg-section-header label="Section Header"></tpg-section-header>
            <tpg-text-field label="Text Label" placeholder="Placeholder"></tpg-text-field>
          </div>
          <div style="display: flex; gap: 0.75rem; justify-content: space-between">
            <tpg-text-field style="flex: 1" label="Text Label" placeholder="Placeholder"></tpg-text-field>
            <tpg-text-field style="flex: 1" label="Text Label" placeholder="Placeholder"></tpg-text-field>
          </div>
          <div style="display: flex; gap: 0.75rem; justify-content: space-between">
            <tpg-text-field style="flex: 2" label="Text Label" placeholder="Placeholder"></tpg-text-field>
            <tpg-text-field style="flex: 1" label="Text Label" placeholder="Placeholder"></tpg-text-field>
          </div>
          <div style="display: flex; gap: 0.75rem; justify-content: space-between">
            <tpg-text-field style="flex: 1" label="Text Label" placeholder="Placeholder"></tpg-text-field>
            <tpg-text-field style="flex: 2" label="Text Label" placeholder="Placeholder"></tpg-text-field>
          </div>
        </div>
        <tpg-footer slot="footer" emphasis="no-background">
          <tpg-secondary-button label="Back" slot="left-button"></tpg-secondary-button>
          <tpg-primary-button label="Next" slot="right-button"></tpg-primary-button>
        </tpg-footer>
      </tpg-local-modal-workflow>

      <tpg-workflow-panel></tpg-workflow-panel>
      </div>

React

    const ref = useRef();

    const handleOpen = () => {
      ref.current.showModal();
    }

    const handleClose = () => {
      ref.current.hideModal();
    }

    <tpg-primary-button @tpg-click=${handleOpen} label="Open Local Modal Workflow" id="button-open"></tpg-primary-button>
    <div style="position: relative; margin-top: 1rem">
      <tpg-local-modal-workflow id="modal-workflow" is-open>
        <tpg-modal-header
          heading-placement="center"
          slot="header"
        >
          <tpg-quaternary-button @tpg-click=${handleClose} id="button-close" size="small" label="Text" icon-template={tpgIconArrowBack} slot="leading-btn"></tpg-quaternary-button>
          <tpg-badge
            slot="heading-badge"
            size="lg"
            label="Heading"
            emphasis="no-background"
            type="neutral"
          ></tpg-badge>
          <tpg-menu-item slot="menu-item" label="Label 1"></tpg-menu-item>
          <tpg-menu-item slot="menu-item" label="Label 2"></tpg-menu-item>
          <tpg-menu-item slot="menu-item" label="Label 3"></tpg-menu-item>
          <tpg-menu-item slot="menu-item" label="Label 4"></tpg-menu-item>
          <tpg-menu-item slot="menu-item" label="Label 5"></tpg-menu-item>
        </tpg-modal-header>
        <div style="display: flex; flex-direction: column; gap: 0.75rem">
          <div>
            <tpg-section-header label="Section Header"></tpg-section-header>
            <tpg-text-field label="Text Label" placeholder="Placeholder"></tpg-text-field>
          </div>
          <div style="display: flex; gap: 0.75rem; justify-content: space-between">
            <tpg-text-field style="flex: 1" label="Text Label" placeholder="Placeholder"></tpg-text-field>
            <tpg-text-field style="flex: 1" label="Text Label" placeholder="Placeholder"></tpg-text-field>
          </div>
          <div style="display: flex; gap: 0.75rem; justify-content: space-between">
            <tpg-text-field style="flex: 2" label="Text Label" placeholder="Placeholder"></tpg-text-field>
            <tpg-text-field style="flex: 1" label="Text Label" placeholder="Placeholder"></tpg-text-field>
          </div>
          <div style="display: flex; gap: 0.75rem; justify-content: space-between">
            <tpg-text-field style="flex: 1" label="Text Label" placeholder="Placeholder"></tpg-text-field>
            <tpg-text-field style="flex: 2" label="Text Label" placeholder="Placeholder"></tpg-text-field>
          </div>
        </div>
        <tpg-footer slot="footer" emphasis="no-background">
          <tpg-secondary-button label="Text" slot="left-button"></tpg-secondary-button>
          <tpg-primary-button label="Text" slot="right-button"></tpg-primary-button>
        </tpg-footer>
      </tpg-local-modal-workflow>

      <tpg-workflow-panel></tpg-workflow-panel>
    </div>

Tables

Properties

Attribute	Property	Description	Type	Default Value
positioning	positioning	Determines the positioning of the modal: "global" for centering on the screen, "local" for centering within a parent container.	'global' | 'local'	'local'
allow-scroll	allowScroll	If the modal should prevent scrolling of the background when open.	boolean	true
is-open	isOpen	Whether or not the modal is open. Note: its recommended to open and close the modal through js methods showModal() and close();	boolean	false
prevent-close-on-click-outside	preventCloseOnClickOutside	Prevents the modal from closing when clicking outside.	boolean	false

Events

Event name	Reactjs attribute	Description

Functions

Name	Description	Arguments
scrollDown	Scrolls down the content by scrollAmount	scrollAmount: ??? = 50
scrollUp	Scrolls up the content by scrollAmount	scrollAmount: ??? = 50
canScroll	Check if fit is possible to scroll	No parameters
showModal	Opens the dialog - for consumers.	No parameters
hideModal	Closes the dialog - for consumers.	No parameters

Slots

Name	Description
header	Slot reserved for a tpg-modal-header.
footer	Slot reserved for tpg-footer
	reserved for the content of the local modal.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox