Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Pictogram
Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=26-1558&t=ftfrOGkPzlG2GaTo-1
Overview
- The Dynamic Pictogram Component is a visual element that displays predefined pictograms.
- It supports conditional display logic that adapts the pictogram based on data context.
- The component is useful for visual indicators, status displays, or category markers.
- Appearance such as size and spacing can be customized for layout flexibility.
...
| Token | Description |
|---|---|
| displayName | Display name of the component in the structure panel |
| name | Specifies which pictogram to display from a predefined set |
| size | Sets the size of the pictogram (xs, sm, md, lg, xl) |
| widthAuto | Controls automatic width adjustment of the pictogram container |
| rules | Defines conditional display rules based on context data |
| paddingClass | Configures spacing around the pictogram using CSS classes |
| events | Configurable component events |
| ON_INIT (Events) | Event triggered when the component is initialized |
| ON_DESTROY (Events) | Event triggered when the component is removed from the DOM |
| visibilityPolicySetId | Determines component visibility based on policy sets |
| displayConditions | Defines conditions for showing or hiding the component |
| id | Unique identifier for programmatic access |
| dataTestId | Identifier for automated testing |
| enableAsHotspot | Enables component as a guided tour hotspot |
| guidedTourHotSpotTitle | Sets translated title for guided tour hotspot |
| guidedTourHotSpotDescription | Sets translated description for guided tour hotspot |
...
- visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "contentVisibilityPolicy" restricts the pictogram visibility to users with specific content access permissions, allowing for role-based display of visual indicators.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=26-1558&t=ftfrOGkPzlG2GaTo-1
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id1/3-pictograms
Guidelines
Usage
- Represent a clear semantic state or category with a single pictogram. Set a default via
name, and swap it when context changes viarules. - Help users learn what the symbol means during onboarding. Turn on hotspot mode with
enableAsHotspotand provide localizedguidedTourHotSpotTitleandguidedTourHotSpotDescription. - Keep authoring neat. Give the component a purposeful authoring label with
displayName.
...
| Do | Don’t | Article setting(s) | |||
|---|---|---|---|---|---|
Set a default pictogram via name and override with mutually exclusive rules. | Depend on overlapping/ambiguous rules with no fallback. | name, rules | |||
Use size="sm" or size="xs" inline; reserve lg/xl for focal visuals. | Mix sizes randomly within the same row. | size | |||
Enable widthAuto for tight inline alignment. | Force extra width that misaligns with adjacent text. | widthAuto | |||
Add paddingClass to create comfortable spacing. | Let the pictogram touch neighboring elements. | paddingClass | |||
| Hide when status is unknown. | Show a misleading default graphic during uncertainty. | displayConditions | |||
Use visibilityPolicySetId for role-restricted symbols. | Rely on convention to imply “hidden for some users.” | visibilityPolicySetId | |||
| Explain the symbol in onboarding via hotspot text. | Put essential meaning only in documentation elsewhere. | enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription | Initialize on ON_INIT and clean up on ON_DESTROY. | Leave timers/listeners running after navigation. | events.ON_INIT, events.ON_DESTROY |
| Provide stable automation hooks. | Target the pictogram by visual heuristics in tests. | id, dataTestId |
...
