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.
...
| Token | Description |
|---|---|
| displayName | Display name of the component in the structure panel |
| direction | Layout direction of the states (horizontal or vertical) |
| titleField | Field in data source containing the state title |
| subtitleField | Field in data source containing the state subtitle |
| stateIdField | Field in data source serving as unique identifier |
| currentStateField | Field that marks the current active state |
| sortOrderField | Field that defines order of states |
| readonly | Controls whether states are interactive or display-only |
| statusRules | Rules that define visual status of each state |
| informationConfigs | Configures additional information items per state |
| states | Defines static states when not using data source |
| paddingClass | CSS classes for spacing around the component |
| enableStaticData | Toggles static vs. dynamic data mode |
| getElementsDataSourceId | Data source ID for fetching states |
| getEntityCollectionHttpRequestParametersMap | HTTP request parameters for fetching data |
| events | Configurable component events |
| ON_INIT (Events) | Event triggered when component initializes |
| ON_DESTROY (Events) | Event triggered when component is removed |
| visibilityPolicySetId | Policy set controlling component visibility |
| displayConditions | Conditions for showing the component |
| id | Unique identifier for programmatic access |
| dataTestId | Testing hook ID for automated testing |
| enableAsHotspot | Enables component as a guided tour hotspot |
| guidedTourHotSpotTitle | Title of guided tour hotspot |
| guidedTourHotSpotDescription | Description of guided tour hotspot |
...
- 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"}.
Links
- Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-45017&t=ftfrOGkPzlG2GaTo-1
- Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id7/7-progress-states
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).
...
| 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. | readonlyinitialize 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 |
...
