(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.

...

• 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.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

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.

...