Versions Compared

Old Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version Current

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • visibilityPolicySetId – determines the visibility of the component based on specified policy sets. For example, setting it to "adminOnlyPolicy" restricts the boardlet to users with admin privileges.
  • Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11550-252668&t=iosNC2AkSTGs5lMh-1
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id5/2-boardlet

Guidelines

Header / Toolbar

...

  • The footerbar always controls the workflow of the boardlet.
  • Workflow-related actions are always placed at the bottom right. Hierarchy flows from bottom right to bottom left.
  • Allowed footerbar layouts:
  • Tabs only.
  • Tabs with buttons (maximum two).
  • Buttons only (maximum two).
  • Tabs with actionbar (secondary option, e.g., kiosk mode).
  • The footerbar has a fixed height and may never be multiline.

Example styling of the Boardlet Header and Footer

Usage

...

  • Pick the visual emphasis that matches the page context by setting boardletType to Normal (bordered) for stronger separation or Ghost (borderless) when the Boardlet should blend into surrounding content.
  • Keep the header action area compact: place at most three immediate actions in elements.header[] and the headerand expose the rest via the mandatory overflow by setting moreIconVisible: true.
  • Use the footer only for workflow-related actions or tabs. If there is no workflow, hide the region (showFooter: false) so the layout stays clean.
  • Provide a clear, localized identity: set a human-readable builder label with displayName, a localized product-facing name with boardletNameTranslations, and a localized header title with titleTranslations/title (the visual title reads from these values).

Sizing & Layout

  • Choose the overall arrangement using the root layout (horizontal for side-by-side sections or vertical for stacked presentation), and refine placement inside each region using the section-level layout on header, body, and footer.
  • Prevent clipping when content grows by enabling internal scrolling with scrollingEnabled: true; this preserves container height and reduces layout shifts.
  • Reduce visual noise by hiding unused chrome (showHeader: false, showFooter: false) instead of leaving empty regions.
  • Provide quick, recognizable affordances in the header by configuring leftIcon and/or rightIcon with symbols that match the Boardlet’s purpose (e.g., info, settings).

States & Feedback

...

  • Control presence of major regions at runtime with showHeader and showFooter to reflect task needs (e.g., hide footer after workflow completes).
  • Expose additional actions via overflow by toggling moreIconVisible; when true, users have a stable “more” entry point even when visible actions are limited.

Interactions & Events

  • Prepare the Boardlet on first render using events.ON_INIT (e.g., preload data, compute whether showFooter should be true, prime any section layout decisions).
  • Release resources and listeners on teardown with events.ON_DESTROY to keep the UI responsive and stable over time.
  • Provide deterministic automation hooks for QA and a11y testing with dataTestId so scripts can reliably target the Boardlet across builds.

...

  • Keep the layout steady while data updates by relying on scrollingEnabled: true and stable section layout values; avoid toggling showHeader/showFooter mid-session unless essential, and prefer making those decisions once during ON_INIT.
  • If the number of header actions varies with data, keep visible actions capped by limiting elements.header[] and depend on moreIconVisible: true for overflow consistency.

Visibility & Authorization

...

DoDon’tArticle setting(s)
Keep header actions to ≤3 and surface the rest via overflow.Crowd the header with many icons and no overflow.Header elements[] (limit count), moreIconVisible: true
Hide the footer when no workflow actions exist.Leave an empty footer occupying space.showFooter: false
Use layout: "vertical" in the body to stack dense content for readability.Force cramped side-by-side layouts that truncate content.Body layout: "vertical"
Enable scrollingEnabled when content can exceed visible height.Allow content to clip, overlap, or push other regions unpredictably.scrollingEnabled: true
Localize the name and title for all supported locales.Hard-code English-only strings.boardletNameTranslations, titleTranslations/titleInitialize data and flags on mount; dispose on unmount.Defer setup until first click and forget to clear timers or listeners.events.ON_INIT, events.ON_DESTROY

Accessibility

...

  • Provide localized output to assistive tech by filling boardletNameTranslations and titleTranslations/title for all supported locales.
  • Maintain predictable reading and navigation order by keeping section visibility (showHeader, showFooter) and section layout stable during interaction.
  • Ensure overflow actions remain discoverable by enabling moreIconVisible, so important commands are reachable without shrinking targets.
  • Expose dataTestId to support automated accessibility checks and regression testing.

...

  • Avoid using color alone to convey meaning; augment with recognizable leftIcon/rightIcon and clear titleTranslations/title text.Reduce focus jumps by avoiding mid-session toggles of major regions; prefer configuring showHeader/showFooter once during events.ON_INIT and managing long content with scrollingEnabled.