You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Dynamic Vertical Tab Panel Footer

Overview

  • The Dynamic Vertical Tab Panel Footer is a footer area for vertical tab panels.
  • It renders dynamic child elements such as buttons and text from the elements array.
  • It supports two layout directions to arrange content: vertical or horizontal.
  • It lets you control spacing with CSS padding classes via paddingClass.
  • It can act as a guided tour hotspot with a title and description for onboarding.

Example vertical Tab

Specs

Tokens

Token Description
elements Child dynamic elements rendered in the footer.
layout Layout direction for elements: vertical or horizontal.
paddingClass CSS padding classes applied to the footer.
gapClass Configures spacing between child elements (row/column gaps).
displayName Display name shown in the structure panel.
id Unique identifier for the footer component.
dataTestId Testing hook ID for automated tests.
enableAsHotspot Enables the footer as a guided tour hotspot.
guidedTourHotSpotTitle Title for the guided tour hotspot (supports translations).
guidedTourHotSpotDescription Description for the guided tour hotspot (supports translations).

Structure

(Configured in Visual Properties)

  • elements - Defines the child dynamic elements rendered in the footer. You can add buttons, text, or any supported dynamic component.
    Example: 
  [
    { "type": "DynamicButtonComponent", "props": { "label": "Save" } },
    { "type": "DynamicTextComponent", "props": { "text": "All changes saved." } }
  ]

(Configured in General Properties)

  • id - Specifies a unique identifier for the footer component.
  • displayName - Sets the display name of the footer, shown in the structure panel.

Labled Footer

Styling

(Configured in Visual Properties)

  • layout - Sets the layout direction for footer elements. Use "vertical" to stack elements or "horizontal" to arrange them side by side.
  • paddingClass - Applies CSS padding classes to the footer for spacing. For example, p-3 adds medium padding.
  • gapClass - Configures the spacing between child elements within the section. For example, {"row": "row-gap-4", "column": "column-gap-2"} creates consistent spacing between elements with more vertical than horizontal spacing.

Testing

(Configured in Testing hooks)

  • dataTestId - Sets a testing hook ID for automated tests. For example, set the value to upw-vertical-tab-footer so automated scripts can reliably target this component.
  • enableAsHotspot - Enables the footer as a guided tour hotspot. For example, set to true to highlight the footer during onboarding.
  • guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations.
    Example: json { "en-US": "Footer Actions" }
  • guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations.
    Example: json { "en-US": "Use these buttons to save or cancel changes." }
  • Figma:
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/other-components/vertical-tab-panel

Guidelines

Usage

  • Surface concise actions or short status text beneath a vertical tab panel by adding only the required child components in elements.
  • Opt in to guided onboarding by enabling the hotspot with localized copy via enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.
  • Keep footer content minimal; avoid complex layouts or long text. Use brief button labels and short status text via elements.

Sizing & Layout

  • Choose arrangement with layout: use "horizontal" for 1–2 compact items; switch to "vertical" for 3+ items or longer labels.
  • Control intra-footer spacing with gapClass (row/column gaps) rather than spacer children.
  • Apply inset with paddingClass to create comfortable breathing room around the footer content.
  • Express priority by ordering children in elements (e.g., primary action first, then secondary, then helper text).
  • Set an author-friendly name for quick identification during build-time using displayName.

Data-Driven / Conditional Behavior

  • Reflect progress or completion by swapping or reordering children in elements (e.g., replace “Save” button with “Saved” text) while keeping layout and gapClass stable.

Content & Localization

  • Localize hotspot copy and keep it brief and action-oriented using guidedTourHotSpotTitle and guidedTourHotSpotDescription.
  • displayName is authoring-only and not user-facing.

Dos & Don’ts

Do Don’t Article setting(s)
Stack 3+ items or long labels with layout: "vertical" to avoid wrap collisions. Force 3–4 actions into a single row that wraps unpredictably. layout
Use gapClass to create consistent row/column spacing between children. Insert empty spacer elements to fake spacing. gapClass, elements
Add inset with paddingClass to improve touch/scan comfort. Leave zero padding so actions hug edges. paddingClass
Opt in to a guided tour with localized title/description. Ship a hotspot with placeholder or English-only copy. enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription
Keep footer content to short actions and brief status text. Place long paragraphs or complex layouts in the footer. elements
Express action priority by ordering children explicitly. Reorder buttons mid-session without need, causing focus jumps. elements
Set a clear displayName for authors. Leave default or ambiguous names that hinder maintenance. displayName

Accessibility

  • Maintain a predictable reading order by choosing layout and arranging elements intentionally.
  • Ensure comfortable target separation using consistent internal spacing via gapClass and paddingClass.
  • Provide a stable automation handle for testing and audits with dataTestId.
  • Support localized hotspot copy via guidedTourHotSpotTitle and guidedTourHotSpotDescription when enableAsHotspot is active.
  • Prefer layout: "vertical" when labels risk wrapping, to preserve clarity and reading flow.
  • No labels