Footer

<tpg-footer></tpg-footer>

Usage

The Footer is a contextual action bar always located at the bottom of the Workflow Panel. It shows all the actions that directly affect the content currently shown in the Panel as: Primary Button - The primary action of the footer, often dedicated to information changes to the system (save, add, send etc.) Secondary Button - The secondary action of the footer, often dedicated to actions that support / complement the primary action Tertiary Button - The alternative “secondary action” of the footer Quaternary Action Button - Low priority action/s of the footer, they summon a List Menu containing less frequent actions (setting, import, export etc.) The menu content can vary depending on the footer state: default_active vs context_active

The Footer can contextually change depending on the content of the Workflow Panel: when this happens, the Footer type will switch from Default to Context_active upon the selection of a content item (list, entity, card, subcards etc.)

When a safety critical action is required, the Footer can grow in height showing a Danger_Button, while the others shall turn to Tertiary.

Guidelines

• Never show 2 Danger buttons at the same time!
• Dont force low-priority actions into the Footer.
• The menu can contain all actions that is not critical to the panel interaction.

Examples

The footer component by default provides four explicit slots for specific content that follows the main design principle from Grammar. left-button, right-button, top-button and menu. The former three are meant for a single item each, while the latter is for injecting menu items that will appear when clicking a menu button that is otherwise hidden.

Of these, the right-button slot should always have content, as this is meant for the footer’s main action. Omission of the left-button will affect the layout of the right-button.

You may freely switch between button tiers in the left and right slots, as long as you follow the design rules for the footer. Note that the top-button should only be used for danger buttons.

Button layouts

Right-button only

Component

Code

        <tpg-footer>
          <tpg-primary-button
              label="Next"
              slot="right-button"
          ></tpg-primary-button>
        </tpg-footer>

Both left and right button

Component

Code

    <tpg-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>

Both, with menu

Component

Code

<tpg-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-menu-item
      value="4"
      label="apple pen"
      slot="menu"
    ></tpg-menu-item>
    <tpg-menu-item
      value="5"
      label="final pineapple"
      slot="menu"
    ></tpg-menu-item>
    <tpg-menu-item
      value="6"
      label="tomato sandwich"
      slot="menu"
    ></tpg-menu-item>
</tpg-footer>

Right only with menu

Component

Code

<tpg-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-menu-item
      value="4"
      label="apple pen"
      slot="menu"
    ></tpg-menu-item>
    <tpg-menu-item
      value="5"
      label="final pineapple"
      slot="menu"
    ></tpg-menu-item>
    <tpg-menu-item
      value="6"
      label="tomato sandwich"
      slot="menu"
    ></tpg-menu-item>
</tpg-footer>

’Double’ layout (top-button)

Render the footer over two rows, the ‘top-button’ slot should only be used for showing a primary danger button

Component

Code

    <tpg-footer>
      <tpg-primary-button
          slot="top-button"
          label="Danger"
          type="danger"
      ></tpg-primary-button>
      <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-menu-item
          value="4"
          label="apple pen"
          slot="menu"
      ></tpg-menu-item>
      <tpg-menu-item
          value="5"
          label="final pineapple"
          slot="menu"
      ></tpg-menu-item>
      <tpg-menu-item
          value="6"
          label="tomato sandwich"
          slot="menu"
      ></tpg-menu-item>
    </tpg-footer>

Degrees of emphasis

You may pick between three different degrees of emphasis for the footer by means of the emphasis attribute. This affects the background of the component. For the default, you may omit it.

Default

Component

Code

    <tpg-footer emphasis="default">
      <tpg-primary-button
          slot="top-button"
          label="Danger"
          type="danger"
      ></tpg-primary-button>
      <tpg-secondary-button
          label="Back"
          slot="left-button"
      ></tpg-secondary-button>
      <tpg-primary-button
          label="Next"
          slot="right-button"
      ></tpg-primary-button>
    </tpg-footer>

Context Active

Component

Code

    <tpg-footer emphasis="context-active">
      <tpg-primary-button
          slot="top-button"
          label="Danger"
          type="danger"
      ></tpg-primary-button>
      <tpg-secondary-button
          label="Back"
          slot="left-button"
      ></tpg-secondary-button>
      <tpg-primary-button
          label="Next"
          slot="right-button"
      ></tpg-primary-button>
    </tpg-footer>

No Background

Component

Code

    <tpg-footer emphasis="no-background">
      <tpg-primary-button
          slot="top-button"
          label="Danger"
          type="danger"
      ></tpg-primary-button>
      <tpg-secondary-button
          label="Back"
          slot="left-button"
      ></tpg-secondary-button>
      <tpg-primary-button
          label="Next"
          slot="right-button"
      ></tpg-primary-button>
    </tpg-footer>

Slot override

If there is need for a special case of footer, where the normal buttons and menu don’t suffice, the slot-override attribute can be set to provide a different setup. In this case, the component provides separate slots that the consumer has full control over. By default, only the override-bottom-content slot is then visible. This completely replaces the default layout.

When using slot-override, you can turn on the double layout by also setting the double-slot attribute, to render the override-top-content slot.

You should style these slots using the provided CSS parts, however you get some sane defaults for free, like padding and gap.

Component

Vanilla JS

    <tpg-footer slot-override double-slot>
        <tpg-primary-button
          slot="override-top-content"
          label="Danger"
          type="danger"
        ></tpg-primary-button>
        <tpg-secondary-button
          slot="override-bottom-content"
          label="Back"
        ></tpg-secondary-button>
        <tpg-primary-button
          slot="override-bottom-content"
          label="Next"
        ></tpg-primary-button>
        <tpg-text-field
          slot="override-bottom-content"
          label="everything goes"
        ></tpg-text-field>
    </tpg-footer>

React

    <tpg-footer slotOverride doubleSlot>
        <tpg-primary-button
          slot="override-top-content"
          label="Danger"
          type="danger"
        ></tpg-primary-button>
        <tpg-secondary-button
          slot="override-bottom-content"
          label="Back"
        ></tpg-secondary-button>
        <tpg-primary-button
          slot="override-bottom-content"
          label="Next"
        ></tpg-primary-button>
        <tpg-text-field
          slot="override-bottom-content"
          label="everything goes"
        ></tpg-text-field>
    </tpg-footer>

Tables

Properties

Attribute	Property	Description	Type	Default Value
emphasis	emphasis	Background emphasis of the footer	'default' | 'context-active' | 'no-background'	'default'
slot-override	slotOverride	If the footer should render generic slots instead of normal layout	boolean	false
double-slot	doubleSlot	Set to render top override slot, with a divider between it and the bottom override slot. Only relevant together with `slotOverride`.	boolean	false

Events

Event name	Reactjs attribute	Description
tpg-select	ontpg-select	Emitted with the value of the selected slotted menu item. This event bubbles, so stop it's propagation if you need to contain it.

Functions

Name	Description	Arguments
No functions found.

Slots

Name	Description
left-button	Slot dedicated to the bottom left button of the footer
right-button	Slot dedicated to the bottom right button of the footer
top-button	Slot dedicated to the top button of the footer
menu	Slot dedicated to the menu items that should appear when the user clicks the ellipsis button
override-top-content	Slot reserved for buttons to be displayed above the horizontal divider when `slotOverride` and `doubleSlot` are true
override-bottom-content	Slot reserved for the bottom footer buttons when `slotOverride` is set to true

CSS Parts

Attribute	Description
left-button	Part for the left-button slot
right-button	Part for the right-button slot
top-button	Part for the top-button slot
menu	Part for the menu slot
override-top-content	Part reserved for the override-top-content slot
override-bottom-content	Part reserved for the override-bottom-content slot

Sandbox