Skip to content

Add Progress Bar Component - #325

Open
ghoshArnab wants to merge 5 commits into
pegasystems:masterfrom
ghoshArnab:feature/progress-bar
Open

ghoshArnab wants to merge 5 commits into
pegasystems:masterfrom
ghoshArnab:feature/progress-bar

Conversation

@ghoshArnab

@ghoshArnab ghoshArnab commented Sep 17, 2026 •

Copy link
Copy Markdown

Summary

  • add the Pega_Extensions_ProgressBar field component
  • provide determinate and indeterminate Progress Bar states with accessible progressbar semantics
  • add tone, size, milestone markers, status messaging, reduced-motion support, and polished animation
  • add Designer metadata, Storybook examples, docs, realistic mocks, and focused tests

Validation

  • npm test -- --runInBand src/components/Pega_Extensions_ProgressBar/demo.test.tsx
  • npm run lint:types
  • npx eslint src/components/Pega_Extensions_ProgressBar --no-cache
  • npx prettier --check src/components/Pega_Extensions_ProgressBar
  • npm run validate-schema

@ghoshArnab ghoshArnab changed the title Add modern progress bar component Add progress bar component Sep 17, 2026
@ghoshArnab ghoshArnab changed the title Add progress bar component Add Progress Bar Component Sep 17, 2026
Ghosh, Arnab added 4 commits September 17, 2026 18:39
…updates.

Converts the component from a Field to a Widget that reads its value from a
data page and refreshes only via PCore.getMessagingServiceManager(), with no
polling and no static value/max props. Adds min/max normalization support
and falls back to a DATAPAGE_UPDATED subscription when used on a page
without a case context. Updates demos, tests, and docs to a rapid-update
job scenario.
…eterminate rendering.

Adds a toneProperty so the data page can override the static tone prop when
it reports a valid value (accent/success/warning/danger), with an
isProgressTone guard validating it. Simplifies the indeterminate state to
render only the continuously animated fill, dropping the status/value
header text so the effect reads as plain continuous progress rather than a
labeled loading state.
Renames the continuous prop/config property to indeterminateOnly for
clarity across index.tsx, config.json, demo stories/tests, and docs, and
trims redundant "no data page" wording from labels and copy.
…efault look.

Replaces the earlier high-contrast stripe animation with a subtle
translucent texture on the same tone color, animated as a seamless
one-direction drift using a fixed background-size tile so the loop has
no seam. Also removes dead code: the indeterminate branch of
getProgressStatus could never render since the status header is
always hidden while indeterminate.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant