Local Modal Drawer

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

Local Modal Drawers are alternative to Local Modals to accomplish longer and self-contained workflows. A typical example is when filling up a form to create or add a request.

They open from bottom to top and can be dismissed by the buttons on their header.

Local Modal Drawers are disruptive. 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 Drawer 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('drawer');
        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 Drawer" id="button-open"></tpg-primary-button>
    <div style="position: relative">
      <tpg-local-modal-drawer id="drawer" is-open>
        <tpg-modal-header
          heading-placement="center"
          slot="header"
          id="header"
        >
          <tpg-quaternary-button
            size="small"
            label="Cancel"
            slot="leading-btn"
            id="button-close"
          ></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" 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-drawer>

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

React

    const ref = useRef();

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

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

    return (
      <tpg-primary-button
        label="Open Local Modal Drawer"
        id="button-open"
        @tpg-click=${handleOpen}
      ></tpg-primary-button>
      <div style="position: relative">
        <tpg-local-modal-drawer ref=${ref} id="drawer" is-open>
          <tpg-modal-header
            heading-placement="center"
            slot="header"
            id="header"
          >
            <tpg-quaternary-button
              size="small"
              label="Cancel"
              slot="leading-btn"
              id="button-close"
              @tpg-click=${handleClose}
            ></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" 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-drawer>

        <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