Versions Compared

Old Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 3

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Link

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

  • The Link Component is a versatile UI element used to create interactive links within applications.
  • It supports customization with icons, tooltips, and multiple styling options.
  • It is useful for creating navigation items, action links, or clickable text with indicators.
  • The component helps guide users by combining text with visual and interactive cues.

...

  • id – Specifies a unique identifier for the component used for programmatic access. For example, "detailsNavigationLink" enables targeted manipulation of this specific link through scripts or automated tests.
  • dataTestId – Sets the testing hook ID for automated testing. For example, setting to "details-link" allows test scripts to reliably locate this component during automated testing.
  • enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the link can be highlighted during onboarding or tutorial flows to draw user attention to important navigation options.
  • guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Detail Navigation", "de-DE": "Detailnavigation"} provides clear identification during guided tours.
  • guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click here to view detailed information", "de-DE": "Klicken Sie hier, um detaillierte Informationen anzuzeigen"} provides detailed instructions during guided tours.
  • Links should be easily distinguishable from regular text by using consistent styling such as color, underline, or icon indicators.
  • Avoid using only color to indicate link state; combine it with another visual cue (e.g., underline or bold).
  • Provide clear and descriptive link text so users understand the purpose without needing additional context.
  • Use icons alongside text only when they add clarity to the link’s meaning or destination.
  • Ensure tooltips and link text do not duplicate each other; tooltips should provide additional context.

...

  • Use the Link for inline navigation or lightweight actions initiated by clicking text. Provide clear, localized text via titleTranslations and wire the action with ON_LINK_CLICK.
  • Indicate the current location or selection by toggling active: true.
  • Only disable links that should remain visible but non-interactive using disabled; otherwise hide them using visibilityPolicySetId or displayConditions.
  • Adjust clickable comfort and spacing with paddingClass.
  • Use leftIcon / rightIcon to add meaning while keeping the primary label in titleTranslations.
  • Supported visual states are default (enabled), active, and disabled.
  • Provide supplemental hover context via tooltips rather than changing the label on hover using showTooltip and tooltipTextTranslations.
  • Keep tooltips short, localized, and optional with showTooltip and tooltipTextTranslations.
  • Position tooltips using tooltipPlacement; add a modest tooltipDelay to reduce accidental reveals.
  • Do not place critical instructions only in the tooltip; ensure core meaning is in titleTranslations.
  • Show/hide the link with displayConditions; keep conditions mutually exclusive to prevent flicker.
  • Gate clickability without hiding by binding to authorizationDisable.
  • Hide links entirely for unauthorized audiences via visibilityPolicySetId.
  • Combine visibilityPolicySetId (who sees) with authorizationDisable (who can click) for precise control.
  • Write action-oriented, self-sufficient text (avoid “Click here”) and localize it with titleTranslations.
  • For guided onboarding, opt into hotspots with enableAsHotspot, and provide guidedTourHotSpotTitle and guidedTourHotSpotDescription.
DoDon’tArticle setting(s)
Use descriptive, localized text (e.g., “View details”).Use vague labels (“Click here”, “More”).titleTranslations
Mark the current page with active: true.Fake “current” styling via ad-hoc approaches.active
Add an external indicator icon on the right.Rely on color alone to imply “external”.rightIcon, titleTranslations
Use tooltips for brief, optional context.Put essential instructions only in a tooltip.showTooltip, tooltipTextTranslations, tooltipDelay
Disable when users should see but not use.Hide permission-blocked links users expect to see.authorizationDisable
Hide sensitive links entirely.Show sensitive links and count on disable alone.visibilityPolicySetId
Drive visibility with conditions.Leave obsolete links visible during state changes.displayConditions
Wire actions to the click event.Depend on unrelated components to trigger the action.events, ON_LINK_CLICK
Provide a stable test hook.Target links in tests by visible text only.dataTestId
Use hotspots for onboarding callouts.Overload tooltips for multi-step instructions.enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription
  • Convey state without color-only meaning by using active / disabled and optional icons via leftIcon / rightIcon.
  • When indicating special behaviors (e.g., external destinations), prefer adding an icon (rightIcon) in addition to the descriptive text in titleTranslations.
  • Provide stable hooks for automated accessibility checks with dataTestId and id.
  • Localize guided-tour content so assistive tech announces accurate context using guidedTourHotSpotTitle and guidedTourHotSpotDescription.
  • If you enable tooltips, ensure they are supplemental and short; rely on the visible label in titleTranslations for the essential meaning.