Page History
...
- adjust only the outer spacing with
paddingClass; no component height/width tokens are exposed. - set
displayNameto help authors identify the instance in the structure panel.
States & Feedback
- normal: set the current percentage with
updateProgress(n). - error: call
setInvalid(errorMessage)to show a failure message; recover withsetValid()and then resumeupdateProgress(...).
Data-Driven / Conditional Behavior
- clamp values so
updateProgress(n)only receives numbers between 0 and 100. - when upstream logic signals a failure, trigger
setInvalid(errorMessage); on recovery, callsetValid()and continue withupdateProgress.
Visibility & Authorization
- hide the component for ineligible users with
visibilityPolicySetId.
Content & Localization
- localize user-facing copy with
titleTranslationsfor the header anderrorMessagefor failures. - if used in guided tours, localize
guidedTourHotSpotTitleandguidedTourHotSpotDescription; enable withenableAsHotspot.
...
| Do | Don’t | Article setting(s) |
|---|---|---|
initialize to a known value on mount using ON_INIT then updateProgress(0 or cached). | leave the bar at an arbitrary default that doesn’t match real progress. | events.ON_INIT, updateProgress |
| update with values strictly within 0–100. | pass values outside the allowed range or non-numbers. | updateProgress |
| show an actionable failure message when progress cannot continue. | indicate failure only by color or by stopping updates with no explanation. | setInvalid, errorMessage |
| clear the error state when resolved, then resume updates. | keep the bar in error after the issue is fixed. | setValid, updateProgress |
| add outer spacing to suit context. | force spacing with external CSS overrides. | paddingClass |
| localize all user-facing copy (title, error, hotspot text). | ship English-only text. | titleTranslations, errorMessage, guidedTourHotSpotTitle, guidedTourHotSpotDescription |
| hide for ineligible users. | show sensitive progress to users who shouldn’t see it. | visibilityPolicySetId |
| provide stable hooks for automation and monitoring. | target the bar by brittle selectors. | id, dataTestId |
| annotate the component for tours when teaching the UI. | rely on ad-hoc callouts elsewhere to explain it. | enableAsHotspot, guidedTourHotSpotTitle, guidedTourHotSpotDescription |
| clean up listeners/timers on teardown. | leave background work running after navigation. | events.ON_DESTROY |
Accessibility
- provide localized context for what the bar represents using
titleTranslations. Keep it concise and specific so announcements are understandable. - convey failures with text via
setInvalid(errorMessage); clear withsetValid().- write
errorMessagetext that states the issue and, if relevant, the next action.
- write
- expose stable hooks for testing and audits using
dataTestIdandid. - prevent disclosure of restricted information by gating visibility with
visibilityPolicySetId. - localize guided-tour copy when hotspots are enabled using
guidedTourHotSpotTitleandguidedTourHotSpotDescription. - moderate announcement frequency by batching calls to
updateProgressto avoid rapid changes that can overwhelm users and assistive tech.