Workflow Panel

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

The Workflow Panel is a fundamental element within the application’s user interface, positioned on the right side to cater to the user’s primary interactions and navigation within the application. This component serve as a centralized hub, consolidating essential features and functionalities in a single, accessible location. By doing so, it aims to redefine the user experience, fostering a more intuitive and efficient workflow.

Examples

Without content

This is the most simple, basic version of the workflow-panel. Showing the min-height and min-width when panel-content slot is empty.

Component

Code

        <tpg-workflow-panel id="workflow-panel-1">
          <tpg-breadcrumbs id="breadcrumbs-1" slot="breadcrumbs" trailing-menu manual-scroll>
            <tpg-breadcrumb-item value="Test 1" label="Fully"></tpg-breadcrumb-item>
            <tpg-breadcrumb-item value="Test 2" label="Not-stacked"></tpg-breadcrumb-item>
            <tpg-menu-item slot="action" label="Action Item 1"></tpg-menu-item>
            <tpg-menu-item slot="action" label="Action Item 2"></tpg-menu-item>
          </tpg-breadcrumbs>
          <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-menu-item value="1" label="banana apple" slot="menu"></tpg-menu-item>
            <tpg-menu-item value="2" label="cobra boat" slot="menu"></tpg-menu-item>
            <tpg-menu-item value="3" label="bonkers bingo" slot="menu"></tpg-menu-item>
          </tpg-footer>
        </tpg-workflow-panel>

When slotting in content using default slot

Use the default slot to fill the workflow-panel with content. The panel will grow in height, and when reaching the max available height a scroll-bar appears.

Component

Code

<div style="height: 500px;" class="not-content">
        <tpg-workflow-panel id="workflow-panel-2">
          <tpg-breadcrumbs id="breadcrumbs-2" slot="breadcrumbs" trailing-menu manual-scroll>
            <tpg-breadcrumb-item value="Test 1" label="Fully"></tpg-breadcrumb-item>
            <tpg-breadcrumb-item value="Test 2" label="Stacked"></tpg-breadcrumb-item>
            <tpg-menu-item slot="action" label="Action Item 1"></tpg-menu-item>
            <tpg-menu-item slot="action" label="Action Item 2"></tpg-menu-item>
          </tpg-breadcrumbs>
        <div style="display: flex; flex-direction: column; gap: 0.75rem">
            <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-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>
          </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-menu-item value="1" label="banana apple" slot="menu"></tpg-menu-item>
            <tpg-menu-item value="2" label="cobra boat" slot="menu"></tpg-menu-item>
            <tpg-menu-item value="3" label="bonkers bingo" slot="menu"></tpg-menu-item>
          </tpg-footer>
        </tpg-workflow-panel>
      </div>

Tables

Properties

Attribute	Property	Description	Type	Default Value
No properties found.

Events

Event name	Reactjs attribute	Description
No events found.

Functions

Name	Description	Arguments
scrollDown	Scrolls down the content by scrollAmount	scrollAmount: ??? = 50
scrollUp	Scrolls up the content by scrollAmount	scrollAmount: ??? = 50

Slots

Name	Description
breadcrumbs	Slot reserved for a tpg-breadcrumbs.
footer	Slot reserved for tpg-footer
	Slot reserved for the content of the workflow panel.

CSS Parts

Attribute	Description
No CSS parts found.

Sandbox