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.

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

Visual Codes Scanner

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

Overview

  • The Visual Codes Scanner Component is a form control for capturing QR codes, barcodes, and other visual code formats.
  • It uses the device camera to scan codes directly.
  • The component provides a manual input option when scanning is not possible.
  • It is useful for inventory management, event check-ins, product authentication, and other quick data capture tasks.

...

  • authorizationDisable – Specifies a policy set that determines when the component should be disabled. For example, setting to "readOnlyPolicy" will disable the scanner for users who don't have scan permissions according to the specified policy.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Capture QR/bar/visual codes with a clear CTA. Set the button text via labelTranslations (e.g., “Scan code”).
  • Provide a manual fallback in the dialog. Configure alternativeInputLabelTranslations and confirmButtonLabelTranslations.
  • Control presence within the form. Toggle visibility using hidden.

States & Feedback

  • Display-only mode when editing isn’t allowed. Use readonly to show a value and disable scanning.
  • Control completion flow after success. Use closeDialogOnSuccess (true for single scan, false for batches).
  • Define reset behavior. Use defaultValue to restore a known value on form reset.

Data-Driven / Conditional Behavior

  • Persist—or deliberately don’t. Use saveInLocalStorage for repetitive workflows; leave off for sensitive data.

Visibility & Authorization

  • Disable by policy. Apply authorizationDisable to keep the control visible but non-interactive when scanning isn’t permitted.
  • Show a value while blocking interaction. Combine readonly with authorizationDisable to communicate state and permissions.

Content & Localization

  • Localize all visible strings. Provide labelTranslations, dialogTitleTranslations, alternativeInputLabelTranslations, and confirmButtonLabelTranslations.
  • Name the target explicitly. In dialogTitleTranslations, specify the code type (e.g., “Scan QR code”).
  • Keep CTA concise. Use short verbs in labelTranslations to reduce truncation.

Dos & Don’ts

DoDon’tArticle setting(s)
Localize the button label, dialog title, manual-entry label, and confirm action.Ship English-only text.labelTranslations, dialogTitleTranslations, alternativeInputLabelTranslations, confirmButtonLabelTranslations
Offer a manual entry path inside the dialog.Rely solely on camera scanning.alternativeInputLabelTranslations, confirmButtonLabelTranslations
Auto-close after a single successful scan.Auto-close during batch scanning.closeDialogOnSuccess
Persist the last scanned value for repeat workflows.Persist sensitive codes across sessions.saveInLocalStorage
Show values while preventing edits.Hide the control when the value must remain visible.readonly, hidden
Bind and route the value correctly in requests.Send the value in the wrong channel (e.g., HEADER when the API expects BODY).dataField, controlsRequestType
Keep the control visible but disabled when users lack permission.Hide permission-gated actions with no feedback.authorizationDisable, hidden
Instrument lifecycle and scan outcomes.Skip setup/cleanup hooks and lose telemetry.events, ON_INIT, ON_DESTROY, ON_SCAN_START, ON_SCAN_SUCCESS, ON_SCAN_ERROR
Use a stable test hook for automation.Target dynamic labels/selectors in tests.dataTestId

Accessibility

  • Localized labels and titles. Use labelTranslations and dialogTitleTranslations so assistive tech announces clear actions and context.
  • Non-interactive display when needed. Use readonly to prevent scanning while presenting values.
  • Predictable completion. Use closeDialogOnSuccess to reduce extra steps when a single scan completes.
  • Concise, specific copy. Keep all *Translations short and understandable; avoid jargon.
  • No color-only meaning. (No color tokens are exposed.) Ensure clarity via labels and dialog titles.
  • Permission clarity. Prefer authorizationDisable to signal disabled state; reserve hidden for cases where the control must not be discoverable.