Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Progress States
Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-45017&t=ftfrOGkPzlG2GaTo-1
Overview
- The Dynamic Progress States component displays a sequence of states to show progression through a process, workflow, or journey.
- It can visualize status information from a data source or from static configurations.
- The layout can be horizontal or vertical depending on the process type.
- Each state supports customizable appearance, including titles, subtitles, and additional information.
- The component is useful for tracking current progress and context within multi-step workflows.
...
- id - Specifies the unique identifier for the component, used for programmatic access. Example: "orderProcessingStates".
- dataTestId - Sets the testing hook ID for automated testing. Example: "order-process-states-component".
- enableAsHotspot - Enables the component as a guided tour hotspot. When set to true, the component can be highlighted during guided tours. Example: true.
- guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. Example: {"en-US": "Order Process", "fr-FR": "Processus de commande"}.
- guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. Example: {"en-US": "Track the progress of your order through these states", "fr-FR": "Suivez la progression de votre commande à travers ces états"}.
Guidelines
Usage
- visualize progression through discrete steps using either dynamic or static sources. configure with
enableStaticData,states, orgetElementsDataSourceIdandgetEntityCollectionHttpRequestParametersMap. - indicate the active step by mapping the data field that marks it as current via
currentStateField. - present key labels by mapping titles and subtitles from your data (
titleField,subtitleField) or, in static mode, viastates[].titleTranslationsandstates[].subtitleTranslations. - add compact, per-state context (dates, metrics) using
informationConfigs(supportsiconNameand localized text).
Sizing & Layout
- switch between left-to-right and top-down presentations using
direction. - tune outer spacing with
paddingClassto keep content readable. - keep text succinct by sourcing only short labels via
titleField/subtitleField(or concisestates[].*Translations) so step headers remain scannable.
States & Feedback
- drive visual status per step using
statusRulesand resolve conflicts with rulepriority. - avoid color-only meaning by pairing status with short, noncritical text via
informationConfigs.
Interactions & Events
- enforce view-only timelines by setting
readonly: truewhen no actions are expected.
Visibility & Authorization
- hide or show the component based on app state via
displayConditions.
[NO DATA AVAILABLE]
Accessibility
...
- restrict visibility for roles/entitlements via
visibilityPolicySetId.
Content & Localization
- localize all user-visible copy:
states[].titleTranslations,states[].subtitleTranslations,informationConfigs[].text,guidedTourHotSpotTitle,guidedTourHotSpotDescription.
Dos & Don’ts
| Do | Don’t | Article setting(s) |
|---|---|---|
map currentStateField to the data flag that marks the active step so users always see “where they are.” | infer the active step implicitly from order or status alone. | currentStateField |
use sortOrderField (or array order in states) to keep the sequence stable across refreshes. | rely on backend default ordering that can change between calls. | sortOrderField, states[] |
keep process flows readable by choosing the appropriate direction. | force horizontal layout for lengthy, top-down processes. | direction |
| provide concise titles/subtitles from data mappings or translations. | place long paragraphs in step headers. | titleField, subtitleField, states[].titleTranslations, states[].subtitleTranslations |
show extra, noncritical details with informationConfigs (e.g., updated times). | encode critical instructions only inside the extra info. | informationConfigs[] |
drive status with explicit statusRules and set rule priority to avoid conflicts. | combine overlapping rules and hope the renderer resolves them. | statusRules |
make timelines non-interactive when appropriate by setting readonly: true. | leave interactive affordances enabled when no actions exist. | readonly |
| initialize and fetch on mount; free resources on unmount. | attach listeners or start polling without cleanup. | events.ON_INIT, events.ON_DESTROY, getElementsDataSourceId, getEntityCollectionHttpRequestParametersMap |
| gate visibility with policies or conditions. | show sensitive progress to everyone and rely on copy to warn. | visibilityPolicySetId, displayConditions |
| add onboarding hints using guided hotspot fields. | rely on color or status names alone to teach the UI. | enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription |
| expose stable identifiers for testing and analytics. | query DOM by volatile text content. | id, dataTestId |
| maintain readable spacing around the control. | let the component touch neighboring elements. | paddingClass |
Accessibility
- deterministically identify the active step for assistive technologies using
currentStateField. - ensure status is not color-only by pairing visual status with short text lines configured in
informationConfigs(driven bystatusRules). - where onboarding is necessary, use localized hotspot copy to guide users (
enableAsHotspot,guidedTourHotSpotTitle,guidedTourHotSpotDescription). - keep titles and subtitles short and descriptive for clear announcements (
titleField,states[].titleTranslations,states[].subtitleTranslations). - avoid rapid status changes by using unambiguous predicates and explicit
priorityinstatusRules. - localize supplemental information for clarity across locales (
informationConfigs[].text).
