Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Clock
Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11613-77301&t=iosNC2AkSTGs5lMh-1
Overview
- The Dynamic Clock Component is a countdown timer that provides visual feedback as time progresses.
- Users can start, stop, and monitor countdown periods.
- The timer shows visual warnings when approaching time limits.
- It is useful for time-sensitive operations, timing processes, or activity monitoring.
...
- enableAsHotspot: Enables the clock component as a guided tour hotspot. When enabled, the clock can be highlighted during guided tours to draw user attention to timing features.
- guidedTourHotSpotTitle: Sets the title for the guided tour hotspot with multilingual support. For example,
{"en-US": "Monitor Operation Time", "de-DE": "Betriebszeit überwachen"}. - guidedTourHotSpotDescription: Sets the description for the guided tour hotspot with multilingual support. For example,
{"en-US": "Click the play button to start timing your operation. The timer will warn you when time is running out.", "de-DE": "Klicken Sie auf die Wiedergabetaste, um die Zeitmessung Ihres Vorgangs zu starten. Der Timer warnt Sie, wenn die Zeit knapp wird."}.
Guidelines
[NO DATA AVAILABLE]
Accessibility
...
Usage
- Use the Clock to time a bounded activity by setting the total duration via
countDownBarInSeconds. - Provide an early warning window so users can prepare before time expires by configuring
warningRangeInPercent.
Interactions & Events
- React to environment or preference changes using
ON_GLOBAL_PARAMETERS_CHANGE. - Clean up timers, listeners, or analytics hooks when the Clock is removed via
ON_DESTROY.
Dos & Don’ts
| Do | Don’t | Article setting(s) |
|---|---|---|
| Start and stop the timer through explicit event wiring. | Assume the timer starts automatically without control. | ON_CLOCK_COUNTDOWN_START, ON_CLOCK_COUNTDOWN_STOP |
| Handle the zero-time boundary to close the loop on the flow. | Ignore expiry and leave the state unresolved. | ON_CLOCK_COUNTDOWN_EXCEEDED |
| Apply global changes deterministically (recalculate, then restart). | Mutate duration/threshold mid-countdown without rules. | ON_GLOBAL_PARAMETERS_CHANGE, countDownBarInSeconds, ON_CLOCK_COUNTDOWN_START |
| Provide localized hotspot text when using guided help. | Enable the hotspot with placeholder or untranslated strings. | enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription |
| Remove timers/listeners when the Clock is removed. | Leave background processes running after teardown. | ON_DESTROY |
Accessibility
- Do not rely on color alone to communicate the warning state; pair the visual change with
ON_CLOCK_COUNTDOWN_WARNING_REACHEDso downstream cues (e.g., announcements) can run for users with color-vision deficiencies. - Provide adequate time to perceive changes: set
warningRangeInPercentearly enough to give users a meaningful buffer before expiry, acknowledging low-vision scenarios where perceivability can be reduced. - Keep hotspot text concise microcontent and never the sole place for critical instructions; it should supplement, not replace, primary UI affordances.
