Local Modal

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

Local Modals are task-oriented workflows containing the steps the user must take to accomplish a task.

Local Modals are disruptive. Only use them when you need the user’s full attention for the action they are trying to accomplish.

They usually appear aligned to the center of the Workflow Panel over a “Background Overlay”. When Local Modals, are summoned by a Footer action, they can also appear aligned with the bottom of the Workflow Panel (its Footer).

Their footer follows the rules of the Footer component.

Note

Take a look at Modal Header and Footer component documentation. They are usually slotted into local modal.

Examples

Basic

Component

Vanilla JS

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const modal = document.getElementById('modal');
        const header = document.getElementById('header');
        header.addEventListener("tpg-scroll-up", () => {
          modal.scrollUp();
        });
        header.addEventListener("tpg-scroll-down", () => {
          modal.scrollDown();
        });
        const globalButton = document.getElementById('global');
        globalButton.addEventListener("tpg-click", () => {
          modal.showModal();
        });
      });
    </script>
    <tpg-primary-button label="Open Local Modal" id="global"></tpg-primary-button>
    <tpg-local-modal id="modal" is-open>
      <tpg-modal-header
        heading-placement="center"
        slot="header"
        manual-scroll
        id="header"
      >
        <tpg-quaternary-button
          icon-template={tpgIconArrowBack}
          label="Text"
          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>
      <tpg-footer slot="footer">
        <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>

React

    <tpg-local-modal id="modal" is-open>
      <tpg-modal-header
        headingPlacement="center"
        slot="header"
        manualScroll
        id="header"
      >
        <tpg-quaternary-button
          iconTemplate=%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22#E8F0F3%22%20d=%22M20%2011H7.83l5.59-5.59L12%204l-8%208%208%208%201.41-1.41L7.83%2013H20z%22/%3E%3C/svg%3E
          label="Text"
          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', flexDirection: '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>
      <tpg-footer slot="footer">
        <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>

Positioned relative to nearest parent

The modals positioning attribute is used to set the modals positioning. The positioning attribute can be set to local or global. The default value is global.

In local mode, the modal will be positioned relative to the nearest parent element with positioning set to relative. In global mode, the modal will be positioned relative to the viewport.

Component

Vanilla JS

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const modal = document.getElementById('modal');
        const header = document.getElementById('header');
        header.addEventListener("tpg-scroll-up", () => {
          modal.scrollUp();
        });
        header.addEventListener("tpg-scroll-down", () => {
          modal.scrollDown();
        });
        const globalButton = document.getElementById('global');
        globalButton.addEventListener("tpg-click", () => {
          modal.showModal();
        });
      });
    </script>
    <tpg-primary-button label="Open Local Modal" id="global"></tpg-primary-button>
    <tpg-local-modal id="modal" is-open>
      <tpg-modal-header
        heading-placement="center"
        slot="header"
        manual-scroll
        id="header"
      >
        <tpg-quaternary-button
          icon-template={tpgIconArrowBack}
          label="Text"
          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>
      <tpg-footer slot="footer">
        <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>

React

    <tpg-local-modal id="modal" is-open>
      <tpg-modal-header
        headingPlacement="center"
        slot="header"
        manualScroll
        id="header"
      >
        <tpg-quaternary-button
          iconTemplate=%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20fill=%22none%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22#E8F0F3%22%20d=%22M20%2011H7.83l5.59-5.59L12%204l-8%208%208%208%201.41-1.41L7.83%2013H20z%22/%3E%3C/svg%3E
          label="Text"
          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', flexDirection: '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>
      <tpg-footer slot="footer">
        <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>

Tables

Properties

Attribute	Property	Description	Type	Default Value
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
positioning	positioning	Determines the positioning of the modal: "global" for centering on the screen, "local" for centering within a parent container.	'global' | 'local'	'global'
allow-scroll	allowScroll	If the modal should prevent scrolling of the background when open.	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