Versions Compared

Old Version 1

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Date Interval Counter

Link to Figma: tba

Overview

  • The Dynamic Date Interval Counter Component calculates and displays the time difference between a specified date and the current date.
  • It is useful for showing durations such as “days since event” or “time elapsed since creation.”
  • The component can handle both single objects and collections of data.
  • It extracts dates from specified fields and formats the elapsed time in different ways.

...

  • dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "order-age-counter" allows test scripts to reliably locate this component during automated testing.
  • enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the counter can be highlighted during onboarding or tutorial flows to explain its meaning to users.
  • guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Ticket Age", "de-DE": "Ticket-Alter"} provides clear identification during guided tours.
  • guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "This shows how long the ticket has been open", "de-DE": "Dies zeigt, wie lange das Ticket geöffnet ist"} provides detailed context during guided tours.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

Usage

  • Use the counter to show elapsed time since a specific date taken directly from your data via dateDataField; pick a field path (supports dot notation like order.submitDate) that reliably resolves to a valid date.
  • Select precision with durationType: days for coarse status, daysWithHours for moderate precision, daysWithHoursAndMinutes for time‑sensitive contexts.
  • Name the instance clearly for authors via displayName so it’s easy to find in the structure panel.

Sizing & Layout

  • Adjust outer spacing only with paddingClass.
  • Match padding intensity to context using paddingClass values (lighter in dense metadata, heavier when the counter needs separation).
  • Keep the visual footprint stable by fixing a single durationType per instance; avoid runtime format switches.

Data-Driven / Conditional Behavior

  • Hide the counter when the source date is missing or invalid using displayConditions bound to dateDataField.
  • For dataSourceType: collection, ensure dateDataField exists on the first item; otherwise hide with displayConditions to avoid misleading “0 days” outputs.
  • Prevent flapping by keeping displayConditions mutually exclusive within the same rule set.
  • Align units across comparable counters by choosing the same durationType where users make side-by-side comparisons.

Visibility & Authorization

  • Restrict visibility based on user roles or policies using visibilityPolicySetId for sensitive durations.

Dos & Don’ts

DoDon’tArticle setting(s)
Bind to a date field that always exists (use dot notation if needed).Point to an optional or inconsistently typed field that yields “invalid date.”dateDataField
Choose one suitable precision and keep it fixed per instance.Flip between days and daysWithHoursAndMinutes mid-session.durationType
Hide when the source date is missing or invalid.Show “0 days” for records without a date.displayConditions, dateDataField
Use single when reading from one record; collection when the source is a list.Assume collections and singles behave the same or read from the wrong index.dataSourceType, dateDataField
Refresh the value when global parameters change.Leave stale values after context updates.events.ON_GLOBAL_PARAMETERS_CHANGE
Add spacing only through the component’s padding token.Rely on external CSS wrappers to create spacing.paddingClass
Gate sensitive counters by policy.Show sensitive durations to all users.visibilityPolicySetId
Localize the hotspot copy for tours.Hard‑code English strings in the tour.enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription
Provide a stable automation handle.Select the component by brittle DOM structure.dataTestId

Accessibility

  • Hide non-meaningful output by using displayConditions when dateDataField is empty or invalid.
  • Provide localized guidance in tours using enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.
  • Match durationType precision to the task so assistive tech announces sufficient context.
  • Keep format consistent per instance and update on events.ON_GLOBAL_PARAMETERS_CHANGE to avoid surprise changes.
  • Use visibilityPolicySetId to prevent exposing sensitive time information to unauthorized users.