Versions Compared

Old Version 1

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

Saved on

compared with

New Version 2

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

Saved on

Key

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

...

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

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Use icons for clear, concise actions or status—not decoration. Prefer text labels when meaning could be ambiguous.
  • Keep inline action icons aligned consistently within their parent pattern.
  • Move low-priority or extra actions into an overflow menu when space is constrained (pattern-level decision; icon supports this by remaining compact and hideable via displayConditions).

Sizing & Layout

  • Use the component’s size tokens: size: "sm" | "lg". (Exact pixel mapping is defined elsewhere in the design system.)
  • Respect grid/spacing via container layout and the component’s paddingClass to avoid “floating” icons.
  • Ensure usable tap/click targets by increasing the hit area with paddingClass or a clickable wrapper element (if applicable in your layout).

States & Feedback

  • Define and implement states at design/dev time:
  • Default: base icon via name.
  • Hover: optional affordance via iconOnHover.
  • Focus/Active/Disabled: implement using container or host element states (e.g., button wrapper), and/or displayConditions to hide instead of show a disabled icon.
  • Provide a visible keyboard focus indicator using the wrapper/control (the Icon itself has no dedicated focus token).

Color & Contrast

  • Apply high-contrast styling through your theme or container styles so icons remain legible in varied environments.
  • Do not rely on color alone for meaning; pair color with icon swaps (filled/outline, warning/check) using thresholdConfig or with nearby text.

Tooltips

  • Use tooltips for supplemental context only; keep copy brief.
  • Configure with component tokens:
  • showTooltip (on/off), tooltipTextTranslations (localized text),
  • tooltipPlacement (top/bottom/left/right),
  • tooltipDelay (ms before showing).
  • Avoid placing critical information only in a tooltip.

Interactions & Events

  • Bind primary behavior to ON_ICON_CLICK (navigate, run workflow, etc.).
  • Use ON_INIT for setup and ON_DESTROY for cleanup where needed.

Data-Driven Icons (Thresholds)

  • Use thresholdConfig to map data to icon/appearance (e.g., status: "complete" → check; "overdue" → warning).
  • Prefer icon swap or shape change (vs. subtle color changes) for state transitions.
  • Keep rules mutually exclusive and stable to avoid rapid toggling.

Visibility & Authorization

  • Use displayConditions to hide irrelevant or inapplicable icons entirely.
  • Use visibilityPolicySetId to show actions only to authorized users/roles.

Content & Localization

  • Keep tooltip strings action-aligned and concise; localize with tooltipTextTranslations (supports template expressions).
  • Use displayName for structure-panel clarity (e.g., “Status Indicator Icon”).

Environments & Input Methods

  • Assume mouse, keyboard, and touch. Increase clickable target area with paddingClass or a wrapper element to accommodate different inputs.

Accessibility

DoDon’tRelevant settings / notes
Use the component’s size tokens and spacing: set size: "sm" | "lg" and add padding via paddingClass to align with grid.Hard-code pixel sizes or ignore spacing tokens so icons “float” off-grid.size, paddingClass
Provide a clear hover affordance by swapping to a related icon with iconOnHover.Change the meaning of the action on hover (hover should not mislead or repurpose the action).iconOnHover
Ensure a visible keyboard focus state on the interactive wrapper (e.g., button) that contains the Icon.Rely on hover-only feedback or omit focus indication entirely.Wrapper control (outside Icon)
Use thresholdConfig to swap icons (e.g., warning/check) to convey status.Rely on color alone to indicate state/meaning.thresholdConfig
Keep tooltips short and supplemental, configured with placement and delay appropriate to context.Put critical instructions only in a tooltip or use long tooltip text.showTooltip, tooltipTextTranslations, tooltipPlacement, tooltipDelay
Bind the primary action to ON_ICON_CLICK and make the outcome obvious (navigate, open dialog, run workflow).Require unusual gestures (e.g., double-click) or bury logic in non-obvious places.events.ON_ICON_CLICK
Hide irrelevant/inapplicable icons entirely using displayConditions.Show disabled “clutter” that users can’t act on.displayConditions
Restrict sensitive actions to the right audiences via visibilityPolicySetId.Expose privileged actions to all users.visibilityPolicySetId
Expand the tap/click target with paddingClass or a suitable wrapper to meet hit-area expectations.Leave tiny hit areas that are easy to miss, especially on touch.paddingClass (+ wrapper)
Keep inline action icons consistently placed; move overflow actions into an overflow pattern and hide extras conditionally.Cram many icons into tight spaces or place them inconsistently across similar views.Pattern-level + displayConditions
Ensure adequate contrast via your theme/container so icons are legible in varied environments.Use low-contrast icons that disappear against the background.Theme/container styles (outside Icon)
Localize tooltip copy using tooltipTextTranslations and keep it action-aligned.Hard-code tooltip text in a single language.tooltipTextTranslations
Name the component meaningfully for structure clarity (e.g., “Status Indicator Icon”).Leave generic names that obscure the icon’s purpose.displayName