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

Pictogram

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.

Specs

Tokens

Structure

(Configured in General Properties)

• displayName - Sets the display name of the component shown in the structure panel. For example, "Status Pictogram" allows for easy identification of the pictogram's purpose in the component structure, making it easier for developers to locate and work with this specific component.

(Configured in Visual Properties)

• name - Specifies which pictogram to display from the available predefined set. Options include 'boardlet', 'dashboard', 'database', 'dialog', 'menu', 'permission', 'policy', and several others. For example, selecting "dashboard" displays a dashboard-themed pictogram that can represent analytics or reporting features.

(Configured in Visibility)

• displayConditions - Defines conditions for displaying the component. This allows showing or hiding the pictogram based on complex rules involving other form values, user roles, or application state. For example, the pictogram might only be shown when related data meets certain criteria.

Styling

(Configured in Visual Properties)

• size - Sets the size of the pictogram. Options include 'xs', 'sm', 'md', 'lg', and 'xl'. For example, setting size to "md" creates a medium-sized pictogram that's suitable for inline usage within content areas, while "xl" creates a large pictogram that can serve as a focal point.
• widthAuto - Controls whether the pictogram container automatically adjusts its width to fit the content. When set to true, the pictogram container will be only as wide as necessary; when false, it will follow fixed layout rules. This is useful for controlling alignment within complex layouts.
• paddingClass - Configures spacing around the pictogram using CSS classes. For example, "p-2" adds light padding on all sides of the pictogram, improving its visual spacing within its container.

Actions & Variants

(Configured in Events)

• events - Configures the events that the component can trigger and respond to:
• ON_INIT - Triggered when the pictogram component is initialized. Can be used to perform setup operations when the component first appears.
• ON_DESTROY - Triggered when the pictogram component is removed from the DOM. Useful for cleanup operations and releasing resources.

Testing

(Configured in Testing Hooks)

• id - Specifies a unique identifier for the component used for programmatic access. For example, "statusPictogram" enables targeted manipulation of this specific pictogram through scripts or automated tests.
• dataTestId - Sets the testing hook ID for automated testing. For example, setting to "status-pictogram" allows test scripts to reliably locate this component during automated testing.
• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the pictogram can be highlighted during onboarding or tutorial flows to explain its meaning to users.
• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Status Indicator", "de-DE": "Statusanzeige"} provides clear identification during guided tours.
• guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This icon shows the current approval status", "de-DE": "Dieses Symbol zeigt den aktuellen Genehmigungsstatus"} provides detailed context during guided tours.

Authorization

(Configured in Authorization)

• 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 via rules.
• Help users learn what the symbol means during onboarding. Turn on hotspot mode with enableAsHotspot and provide localized guidedTourHotSpotTitle and guidedTourHotSpotDescription.
• Keep authoring neat. Give the component a purposeful authoring label with displayName.

Sizing & Layout

• Pick a size that matches emphasis and density. Use size="xs"/"sm" for inline, size="md" for general content, size="lg"/"xl" for focal emphasis.
• Let the icon hug its graphic bounds when needed. Enable intrinsic width with widthAuto.
• Add breathing room where necessary. Apply spacing using paddingClass (e.g., p-2, px-2).
• Keep sets visually consistent. Use one size value across a group so shapes align and don’t jitter.

Data-Driven / Conditional Behavior

• Map data → pictogram deterministically. Use rules to define mutually exclusive conditions that switch the displayed name. Keep name as the fallback when no rule matches.
• Avoid layout shift during swaps. Standardize size for all rule outcomes and add consistent paddingClass.

Visibility & Authorization

• Role-based gating. Restrict who can see the pictogram with visibilityPolicySetId.
• Context-based gating. Show/hide based on runtime context using displayConditions (for example, hide when status is unknown).

Content & Localization

• Choose from the predefined pictogram set. Select the most recognizable option for the concept (for example, dashboard, database) with name.
• Localize onboarding copy only. Provide translated hotspot title/description with guidedTourHotSpotTitle and guidedTourHotSpotDescription; enable display via enableAsHotspot. Do not place critical meaning solely in hotspot text.

Dos & Don’ts

Accessibility

• Shape-based meaning: convey state by switching the pictogram with name and rules rather than relying on color alone.
  • Use mutually exclusive rules and a fallback. Configure rules so only one condition matches and keep name as the default when none do.
  • Standardize outcome sizing. Keep the same size (and, if needed, the same paddingClass) for all rules outcomes to maintain predictable legibility.
• Predictable presence: hide the pictogram when not applicable using displayConditions to avoid noisy placeholders.
• Readable scale: increase legibility with size where needed.
• Separation: preserve perceptual grouping with paddingClass.