Versions Compared

Old Version 4

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.

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

Icon

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=4473-363995&t=ftfrOGkPzlG2GaTo-1

Overview

  • The Icon component is a versatile UI element that displays an interactive icon.
  • It supports customizable appearance, behavior, and conditional display options.
  • The component includes styling options, tooltips, and hover states.
  • Icons can change appearance dynamically based on data context.
  • It is useful for interactive indicators, status displays, or clickable action buttons.

...

  • visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "adminAct

Links:

  • Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=4473-363995&t=ftfrOGkPzlG2GaTo-1
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id1/1-icons-24

Guidelines

Usage

  • Use the Icon to present a recognizable symbol via name when a compact, tappable affordance or status indicator is needed.
  • Use an Icon as an actionable control when you can wire outcomes to ON_ICON_CLICK.
  • Use an Icon for data or status feedback when the graphic should react to context using thresholdConfig.
  • Provide contextual hints with tooltips only as supplemental help by enabling showTooltip and supplying tooltipTextTranslations. Do not put critical information exclusively in the tooltip.

...

  • Turn on tooltips with showTooltip and provide localized copy with tooltipTextTranslations.
  • Position the tooltip so it does not occlude nearby content by choosing tooltipPlacement that best fits the context.
  • Use tooltipDelay to reduce flicker during transient hovers; 300–500 ms is a common range.
  • Treat tooltips as supplemental only; never put essential instructions exclusively in the tooltip.

Interactions & Events

  • Execute actions, navigation, or workflows when the icon is activated by handling ON_ICON_CLICK.
  • Perform setup or data binding when the icon mounts by listening to ON_INIT.
  • Release resources or log analytics when the icon unmounts via ON_DESTROY.

Data-Driven / Conditional Behavior

...

DoDon’tArticle setting(s)
Do provide a localized tooltip using tooltipTextTranslations when the icon meaning may be ambiguous.Don’t rely on a tooltip as the only place to explain a critical action.showTooltip, tooltipTextTranslations
Do use iconOnHover to give immediate hover feedback on interactive icons.Don’t change the icon on hover if the icon is not clickable.iconOnHover
Do configure a default rule in thresholdConfig to handle unexpected data.Don’t leave gaps in conditions that cause the icon to flicker between states.thresholdConfig
Do choose tooltipPlacement that avoids obscuring nearby UI.Don’t cover the icon itself with the tooltip if an alternate side is available.tooltipPlacement
Do use paddingClass to enlarge the tap target area visually and comfortably.Don’t cram the icon against neighboring elements without padding.paddingClass
Do hide icons the user must not see using visibilityPolicySetId or displayConditions.Don’t show unauthorized or contextually irrelevant icons.visibilityPolicySetId, displayConditions

Accessibility

Protocol of implemented accessibility measures

  • Provide localized, concise tooltip content using tooltipTextTranslations when showTooltip is enabled to assist recognition without depending on language-specific icons.
  • Avoid color-only meaning by swapping to distinct glyphs or filled or outlined variants via thresholdConfig.
  • Ensure icons intended as actions clearly indicate interactivity by defining iconOnHover so hover state is perceivable.
  • Expose stable hooks for automated accessibility tests and focus workflows with dataTestId and id.
  • For guided help, provide descriptive, localized copy through guidedTourHotSpotTitle and guidedTourHotSpotDescription when enableAsHotspot is set.

...

  • Pair data-driven icon changes from thresholdConfig with tooltipTextTranslations so meaning is not conveyed by color or shape alone.
  • Use paddingClass to create comfortable hit areas and reduce accidental clicks, supporting motor accessibility.
  • Prevent surprise tooltips by setting a considerate tooltipDelay and choosing non-obscuring tooltipPlacement.