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.

...

  • id – Specifies a unique identifier for the component used for programmatic access. For example, "warehouseRaster" enables targeted manipulation of this specific raster component.
  • dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "warehouse-section-raster" allows test scripts to reliably locate this component during automated testing.
  • enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the raster can be highlighted during onboarding or tutorial flows to explain its functionality to new users.
  • guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Section Selection", "de-DE": "Bereichsauswahl"} provides clear identification during guided tours.
  • guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Click on sections to select/deselect them", "de-DE": "Klicken Sie auf Bereiche, um sie auszuwählen/abzuwählen"} provides detailed instructions during guided tours.

Authorization

(Configured in Authorization)

  • visibilityPolicySetId – Determines the visibility of the component based on specified policy sets. For example, setting to "warehouseManagersOnly" restricts the raster visibility to users with warehouse manager privileges, ensuring that only authorized personnel can view or modify the raster selections.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

  • Figme: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-71930&t=ftfrOGkPzlG2GaTo-1
  • Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id7/6-image-raster

Guidelines

Usage

  • Use Raster to enable position-based selection over a fixed image such as seating maps or warehouse layouts; bind the background via image and make the grid visible with enableRaster.
  • Use for discrete, cell-level selections (not free-form drawing). Handle taps/clicks with events.ON_RASTER_CLICK and persist/hand off selections using getData.
  • Keep the component present only when needed using displayConditions (state-driven show/hide) or visibilityPolicySetId (role-gated availability).

Sizing & Layout

  • Size the drawing plane explicitly so the grid aligns with the image: set rasterWidth/rasterHeight and define cell size with rectSize (square) or rectW/rectH (rectangular).
  • Prefer cell sizes that map cleanly to the underlying image scale to avoid misalignment and accidental multi-cell hits. Configure via rectSize or rectW/rectH.
  • Add outer breathing room only via the component’s own paddingClass.

States & Feedback

  • Represent selection state with the visual tokens: use rectBackgroundColor for selected cells and ensure any cell text remains readable via textColor.
  • Expose/Hide grid lines to indicate mode shifts (e.g., view vs. select) using toggleRasterOn/toggleRasterOff; read current mode with getRasterState.

Color & Contrast

  • Ensure axis labels are legible over the image by choosing an axisTextColor with sufficient contrast against the background.
  • Maintain readable selection overlays by pairing rectBackgroundColor with a contrasting textColor.
  • On busy images, turn grid lines on (toggleRasterOn) to aid targeting.

Visibility & Authorization

  • Gate visibility by role/policy using visibilityPolicySetId.
  • Use displayConditions to show/hide based on page state (e.g., show only after an image is available or a location is selected).

Content & Localization

  • Name the component clearly for authors via displayName so it’s easy to find and maintain in large structures.

Dos & Don’ts

DoDon’tArticle setting(s)
Size the canvas and cells to the image so selections align.Rely on defaults that misalign grid and background.rasterWidth, rasterHeight, rectSize / rectW, rectH
Toggle grid lines to clarify target areas on busy images.Leave the grid off when the image reduces legibility.toggleRasterOn, toggleRasterOff, enableRaster
Use high-contrast colors for selected cells and their text.Indicate selection with low-contrast fills or color-only cues.rectBackgroundColor, textColor
Initialize/refresh selections from your source.Hardcode stale selections into the image.dataSourceId, datasourceParametersMap, reloadData
Read the current grid state before toggling.Rapidly flip grid visibility without checking state.getRasterState, toggleRasterOn, toggleRasterOff
Limit interaction to cell clicks and handle them centrally.Depend on hidden affordances or image-only hotspots.events.ON_RASTER_CLICK
Hide the component for unauthorized users.Show it and hope downstream checks prevent changes.visibilityPolicySetId, displayConditions

Accessibility

  • Provide stable automation and testing hooks via dataTestId (and id for programmatic access).
  • Optional guided tour hotspot can surface inline instructions; localize copy with guidedTourHotSpotTitle and guidedTourHotSpotDescription.
    • When using the guided tour hotspot, keep title/description concise and provide translations via guidedTourHotSpotTitle/guidedTourHotSpotDescription.
  • Expose dataTestId consistently so automated accessibility checks can target the component reliably.