Skip to content

Add indeterminate state to RadialProgress - #1227

Merged
marcomontalbano merged 1 commit into
mainfrom
radial-progress-indeterminate
Sep 10, 2026
Merged

Add indeterminate state to RadialProgress#1227
marcomontalbano merged 1 commit into
mainfrom
radial-progress-indeterminate

Conversation

@marcomontalbano

@marcomontalbano marcomontalbano commented Sep 9, 2026

Copy link
Copy Markdown
Member

What I did

  • Widen RadialProgress's percentage prop to number | "indeterminate", for work that has started but has no knowable end (eg: a request handed to a background worker).
  • Render the indeterminate state as a spinning three-quarter arc.
  • Title the SVG In progress when indeterminate, alongside the existing Pending and <n>% titles.
  • Add an Indeterminate story and tests covering the new state, its title, and its transform.

How to test

https://deploy-preview-1227--commercelayer-app-elements.netlify.app/?path=/docs/atoms-radialprogress--docs#indeterminate

  1. Run pnpm dev and open Storybook.
  2. Go to Atoms → RadialProgress → Indeterminate: the arc should spin continuously, with a quarter of the circle left open.
  3. Check Pending and Percentage are unchanged: the dashed circle and the filled circle still start at 12 o'clock and do not spin.
  4. In the Indeterminate story controls, add an icon (eg: shoppingBag) and confirm it renders centered on a white fill.
  5. Hover each story and confirm the tooltip reads In progress, Pending, and 42% respectively.
  6. Run pnpm test and pnpm ts:check.

Checklist

  • Make sure your changes are tested (stories and/or unit, integration, or end-to-end tests).
  • Make sure to add/update documentation regarding your changes.
  • You are NOT deprecating/removing a feature.

@netlify

netlify Bot commented Sep 9, 2026

Copy link
Copy Markdown

Deploy Preview for commercelayer-app-elements ready!

Name Link
🔨 Latest commit c3c3a9d
🔍 Latest deploy log https://app.netlify.com/projects/commercelayer-app-elements/deploys/6aa17003291b5600082cd3bf
😎 Deploy Preview https://deploy-preview-1227--commercelayer-app-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@marcomontalbano marcomontalbano self-assigned this Sep 9, 2026
@marcomontalbano marcomontalbano added the enhancement New feature or request label Sep 9, 2026
@marcomontalbano
marcomontalbano marked this pull request as ready for review September 9, 2026 15:03
@pkg-pr-new

pkg-pr-new Bot commented Sep 9, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/commercelayer/app-elements/@commercelayer/app-elements@1227

commit: c3c3a9d

@marcomontalbano
marcomontalbano merged commit a417ee6 into main Sep 10, 2026
16 checks passed
@marcomontalbano
marcomontalbano deleted the radial-progress-indeterminate branch September 10, 2026 07:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants