Page History
(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.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=15534-397394&t=ftfrOGkPzlG2GaTo-1
- Live style guide: tba
Guidelines
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
alternativeInputLabelTranslationsandconfirmButtonLabelTranslations. - Control presence within the form. Toggle visibility using
hidden.
...
| Do | Don’t | Article 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 |
...
