Page History
...
- 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.
Links
- 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
...
- Pick the visual emphasis that matches the page context by setting
boardletTypetoNormal(bordered) for stronger separation orGhost(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 settingmoreIconVisible: 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.
...
| Do | Don’t | Article 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
Protocol of implemented accessibility measures
- Provide localized output to assistive tech by filling
boardletNameTranslationsandtitleTranslations/titlefor all supported locales. - Maintain predictable reading and navigation order by keeping section visibility (
showHeader,showFooter) and sectionlayoutstable during interaction. - Ensure overflow actions remain discoverable by enabling
moreIconVisible, so important commands are reachable without shrinking targets. - Expose
dataTestIdto support automated accessibility checks and regression testing.
...
- Avoid using color alone to convey meaning; augment with recognizable
leftIcon/rightIconand cleartitleTranslations/titletext.Reduce focus jumps by avoiding mid-session toggles of major regions; prefer configuringshowHeader/showFooteronce duringevents.ON_INITand managing long content withscrollingEnabled.
