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.

...

  • 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.
  • 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

(General UX and Accessibility Guidelines from source)

  • Design must account for different user abilities, including color blindness, low vision, partial sight, or tunnel vision.
  • Ensure that labels, placeholders, and UI elements remain distinguishable for users with color perception issues (Protanopia, Tritanopia, Deuteranopia, Monochromacy).
  • Provide adequate contrast and clear typography to support users with low vision or blurred vision.
  • Input fields and labels should remain readable under reduced contrast sensitivity and obstructed fields of vision.
  • Guided tour hotspots and translated labels should also follow accessibility principles to remain usable across all supported languages.

Accessibility

...

  • Capture multilingual copy and bind it for submission via dataField and controlsRequestType (e.g., send in BODY).
  • Localize the field label with labelTranslations.
  • Pre-populate known strings with defaultValue.
  • Preserve in-progress work across reloads with saveInLocalStorage.

Sizing & Layout

  • Adjust spacing around the control using paddingClass.
  • Keep labels concise in labelTranslations to maintain compact layout.

States & Feedback

  • Visibility: Control presence with hidden and displayConditions.
  • Editability: Present as view-only with readonly.
  • Validity: Enforce required locales/limits with validation; react to changes via events.ON_VALUE_CHANGE.

Data-Driven / Conditional Behavior

  • Specify required locales and character limits with validation.
  • Establish consistent baselines with defaultValue.

Visibility & Authorization

  • Gate visibility with visibilityPolicySetId.
  • When users may view but not edit, disable interaction with authorizationDisable and clarify state via readonly.

Content & Localization

  • Provide localized onboarding for tours with enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.
  • Ensure serialized output keys are correct using dataField and controlsRequestType.

Dos & Don’ts

DoDon’tArticle 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
Bind the field to the correct submission path.Submit translations under an unexpected key or location.dataField, controlsRequestType
Localize guided-tour copy for onboarding.Use English-only hotspot guidance.enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription

Accessibility

  • Provide clear, localized labels using labelTranslations.
  • Expose non-editable state programmatically with readonly (and disable interaction via authorizationDisable when appropriate).
  • Enforce required locales and constraints through validation to avoid ambiguous partial entries.
  • Localize tour guidance using guidedTourHotSpotTitle and guidedTourHotSpotDescription.
  • Avoid color-only cues; rely on rule-based feedback via validation and clear text via labelTranslations.
  • Reduce cognitive load by hiding irrelevant inputs with displayConditions and seeding predictable values via defaultValue.
  • Maintain readability in dense layouts using paddingClass.