Versions Compared

Old Version 1

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.

...

TokenDescription
displayNameDisplay name of the component in the structure panel
nameSpecifies which pictogram to display from a predefined set
sizeSets the size of the pictogram (xs, sm, md, lg, xl)
widthAutoControls automatic width adjustment of the pictogram container
rulesDefines conditional display rules based on context data
paddingClassConfigures spacing around the pictogram using CSS classes
eventsConfigurable 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
visibilityPolicySetIdDetermines component visibility based on policy sets
displayConditionsDefines conditions for showing or hiding the component
idUnique identifier for programmatic access
dataTestIdIdentifier for automated testing
enableAsHotspotEnables component as a guided tour hotspot
guidedTourHotSpotTitleSets translated title for guided tour hotspot
guidedTourHotSpotDescriptionSets 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.
  • 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

[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

DoDon’tArticle 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
Provide stable automation hooks.Target the pictogram by visual heuristics in tests.id, dataTestId

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.