Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Translation Input
Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11628-199694&t=ftfrOGkPzlG2GaTo-1
Overview
- The Translation Input component is a form control for entering and managing multilingual text.
- It provides a simple interface with integrated language selection.
- It supports internationalization where text values must exist in multiple languages.
- Common use cases include product descriptions, error messages, and user-facing text.
...
- authorizationDisable - Specifies a policy set that determines when the component should be disabled based on user permissions. For example, setting to "translatorOnlyPolicy" will disable the translation input for users who don't have translation privileges according to the specified policy.
- visibilityPolicySetId - Determines the visibility of the component based on specified policy sets. For example, setting to "contentEditorsPolicy" restricts the translation input visibility to users with content editing privileges.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11628-199694&t=ftfrOGkPzlG2GaTo-1
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/1-text-input
Guidelines
Usage
- Capture multilingual copy and bind it for submission via
dataFieldandcontrolsRequestType(e.g., send inBODY). - Localize the field label with
labelTranslations. - Pre-populate known strings with
defaultValue. - Preserve in-progress work across reloads with
saveInLocalStorage.
...
| Do | Don’t | Article setting(s) | |||
|---|---|---|---|---|---|
| Localize the field label for every supported locale. | Hard-code an English-only label. | labelTranslations | |||
| Pre-fill known strings to reduce work. | Make users retype baseline text. | defaultValue | |||
| Require critical locales before submit. | Rely on color or external notes to mark a locale as required. | validation | |||
| Keep the control visible but read-only when users must see but not change text. | Hide the control when users still need to read it. | readonly, authorizationDisable | |||
| Persist drafts across reloads for long tasks. | Risk losing work on refresh or navigation. | saveInLocalStorage | |||
| Show the control only when prerequisites are met. | Show it at all times and confuse users. | displayConditions, hidden | |||
| Initialize data on mount and clean up on unmount. | Fetch on first keystroke and leak listeners. | ON_INIT, ON_DESTROY, events | |||
| Bind the field to the correct submission path. | Submit translations under an unexpected key or location. | dataField, controlsRequestType | Provide stable automation hooks. | Select the control by label text in tests. | id, dataTestId |
| Localize guided-tour copy for onboarding. | Use English-only hotspot guidance. | enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription |
...
