feat(progress-circle): DLT-2983 add progress-circle component by braddialpad · Pull Request #1098 · dialpad/dialtone

Brad Paugh (braddialpad) · 2026-03-03T23:57:15Z

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

Feature

These types will not increment the version number, but will still deploy to documentation site on release:

📖 Jira Ticket

DLT-2983

📖 Description

Adds a new DtProgressCircle component — a circular SVG progress indicator for determinate upload or processing progress. Named "Progress Circle" (following Adobe Spectrum's convention) in anticipation of a future linear/bar variant.

Key changes:

New DtProgressCircle component with ariaLabel, progress (0–100), size (100–800, matching icon scale), and kind (color variant) props
Seven kind variants: default, brand, critical, positive, warning, info, ai
The ai kind renders an SVG <linearGradient> in <defs> since SVG strokes don't support CSS gradients — uses the same color stops as --dt-color-gradient-gold-red-magenta-purple converted to oklch
New CSS component d-progress-circle with BEM modifiers for size and kind
Old DtProgress component removed; image_carousel.vue updated to import DtProgressCircle from @/components/progress_circle
Exported from the dialtone-vue package barrel and registered in common/components_list.js
Full documentation page with interactive demo, variant examples, class table, and Vue API docs

📦 Cross-Package Impact

Package	Changes	Downstream Impact
`dialtone-css`	New `components/progress_circle.less`; old `progress.less` removed	`dialtone-vue` depends on these styles
`dialtone-vue`	New `DtProgressCircle` component + constants; `image_carousel.vue` consumer updated	Documentation site needs the built dist
`dialtone-documentation`	New `/components/progress-circle.html` page; sidebar nav entry; class table JSON	—

📄 Documentation Artifacts

Artifact	Status
Vue source (`components/progress_circle/progress_circle.vue`)	✅ Done
Tests (`progress_circle.test.js`, 16 passing)	✅ Done
Storybook stories (`progress_circle.stories.js` + Default + Variants templates)	✅ Done
Component docs JSON (auto-generated by `build-dialtone-vue-docs.mjs` on build)	✅ Done
VuePress docs (`docs/components/progress-circle.md` + `site-nav.json` + `_data/progress-circle.json`)	✅ Done
MCP server data (`packages/dialtone-mcp-server/src/data.ts`)	🚩 Needs update after merge

📝 Checklist

For all PRs:

I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
I have reviewed my changes.
I have added all relevant documentation.
I have considered the performance impact of my change.

For all Vue changes:

I have added / updated unit tests.
I have validated components with a screen reader.
I have validated components keyboard navigation.

For all CSS changes:

I have used design tokens whenever possible.
I have considered how this change will behave on different screen sizes.
I have visually validated my change in light and dark mode.
I have used gap or flexbox properties for layout instead of margin whenever possible.

If new component:

I am exporting any new components or constants:
- from the index.js in the component directory.
- from the index.js in the root (packages/dialtone-vue).
I have added the styles for the new component to the packages/dialtone-css package.
I have created a page for the new component on the documentation site in apps/dialtone-documentation.
I have added the new component to common/components_list.js
I have created a component story in storybook
I have created story / stories for any relevant component variants in storybook
I have created a docs page for the component in storybook.
I have checked that changing all props/slots via the UI in storybook works as expected.

🔮 Next Steps

Update packages/dialtone-mcp-server/src/data.ts to register DtProgressCircle
Create .mdx Storybook docs page
Validate with screen reader and keyboard navigation

github-actions · 2026-03-03T23:57:25Z

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

Brad Paugh (braddialpad) · 2026-03-04T00:00:32Z

Added size, but not quite sure how to constrain the colors yet.. Let me know your ideas.

Francis Rupert (francisrupert) · 2026-03-04T14:21:00Z

I'll play with it directly on your branch. I do think we need kind prop. And I want to tweak the SVG a bit. I'll also rename to DtProgressCircle, since we definitely should have a horizontal/vertical linear option too but should be its own component – probably DtProgressLinear.

And honestly I do wonder if our current Loader component should be deprecated in favor of an indeterminate variant of DtProgressCircle that animates. We can solve that later since that'd be a migration task to change current DtLoader to use that should we want to.

Josh Everhart (jeverhart-dialpad) · 2026-03-04T14:46:49Z

I'll play with it directly on your branch. I do think we need kind prop. And I want to tweak the SVG a bit. I'll also rename to DtProgressCircle, since we definitely should have a horizontal/vertical linear option too but should be its own component – probably DtProgressLinear.

And honestly I do wonder if our current Loader component should be deprecated in favor of an indeterminate variant of DtProgressCircle that animates. We can solve that later since that'd be a migration task to change current DtLoader to use that should we want to.

+1 for a kind option, I think it would be helpful to have the same kind options as DtButton

For the DtLoader idea, has there been any discussion about different loader variants? I've seen other systems have circle, dots, and other variants like the brand logo. Just a consideration before combining progress & loader in the future.

…LT-2983

github-actions · 2026-03-04T17:07:25Z

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1098/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1098/

Francis Rupert (francisrupert) · 2026-03-04T17:16:25Z

I'll refrain from reviewing officially, though I do approve from design perspective.

Brad Paugh (braddialpad) · 2026-03-04T17:28:26Z

For the DtLoader idea, has there been any discussion about different loader variants? I've seen other systems have circle, dots, and other variants like the brand logo. Just a consideration before combining progress & loader in the future.

Not currently, the purpose of DtLoader was to consolidate all of our different styles of loaders into this one style of loader.. That being said all it takes is someone to say that this style of loader doesn't work in their case and they need a different style of loader.

Brad Paugh (braddialpad) · 2026-03-04T17:29:53Z

I'll play with it directly on your branch. I do think we need kind prop. And I want to tweak the SVG a bit. I'll also rename to DtProgressCircle, since we definitely should have a horizontal/vertical linear option too but should be its own component – probably DtProgressLinear.

nice thanks! looks great

# [8.74.0-next.3](dialtone-css/v8.74.0-next.2...dialtone-css/v8.74.0-next.3) (2026-03-05) ### Features * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [3.211.0-next.1](dialtone-vue/v3.210.0...dialtone-vue/v3.211.0-next.1) (2026-03-05) ### Bug Fixes * **Combobox:** DLT-3057 combobox errors when hovering over dt-dropdown-separator ([#1097](#1097)) ([4798e0e](4798e0e)) ### Code Refactoring * **Combobox Multi Select:** NO-JIRA use logical css properties ([#1104](#1104)) ([a675daf](a675daf)) * **Components,recipes:** DLT-3043 DLT-3046 logical start/end naming with deprecated backward-compatible fallbacks ([#1079](#1079)) ([1d26a4e](1d26a4e)) * **Tokens:** DLT-3013 convert color system from HSL to OKLCH ([#1060](#1060)) ([42dc418](42dc418)) ### Features * **Avatar:** DLT-2942 updated avatar component ([#1047](#1047)) ([e50563d](e50563d)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) * **Text:** export text component from dialtone-vue ([757fdb7](757fdb7)) * **Tokens:** DLT-2937 introduce spacing and layout token systems ([#1045](#1045)) ([de23e12](de23e12)) * **Tokens:** update color ramps and consumer color migration tools DLT-3004 DLT-3005 DLT-3006 DLT-3007 DLT-3008 ([#1054](#1054)) ([28cb1de](28cb1de)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [9.167.0-next.1](dialtone/v9.166.0...dialtone/v9.167.0-next.1) (2026-03-05) ### Bug Fixes * **Combobox:** DLT-3057 combobox errors when hovering over dt-dropdown-separator ([#1097](#1097)) ([4798e0e](4798e0e)) * **Doc:** NO-JIRA correct font size utility json ([#1015](#1015)) ([76cf0fa](76cf0fa)) * possible merge issue in sidebarItem.vue ([5e2e91b](5e2e91b)) * **Stylelint:** disable hue-degree-notation rule and update OKLCH color syntax ([81f886e](81f886e)) * **Stylelint:** disable hue-degree-notation rule and update OKLCH color syntax ([8721f43](8721f43)) * **Tokens:** DLT-3053 preserve root font size variable as reference ([#1093](#1093)) ([112ab4b](112ab4b)) * **Tokens:** handle multi-layer box shadows correctly in postcss plugin ([feea7f1](feea7f1)) * **Tokens:** NO-JIRA output line-height as unitless instead of percentages ([#1040](#1040)) ([33d8505](33d8505)) * **Tokens:** wrap css math expressions with calc() in layered build ([#966](#966)) ([1635f61](1635f61)) * update @dialpad/i18n dependencies to latest versions ([7a4b777](7a4b777)) ### Code Refactoring * **Combobox Multi Select:** NO-JIRA use logical css properties ([#1104](#1104)) ([a675daf](a675daf)) * **Components,recipes:** DLT-3043 DLT-3046 logical start/end naming with deprecated backward-compatible fallbacks ([#1079](#1079)) ([1d26a4e](1d26a4e)) * **Css:** DLT-1876 css logical properties ([#872](#872)) ([1acd6c9](1acd6c9)) * **Style:** DLT-3014 wrap all styles in css cascade layers ([#1061](#1061)) ([f8b3fed](f8b3fed)) * **Text:** DLT-2883 rename headline sizes from xxl => 2xl, etc ([#1029](#1029)) ([0ac86f3](0ac86f3)) * **Tokens:** DLT-2884 deprecate space tokens in favor of size tokens ([#1013](#1013)) ([63f6d2f](63f6d2f)) * **Tokens:** DLT-3013 convert color system from HSL to OKLCH ([#1060](#1060)) ([42dc418](42dc418)) ### Documentation * DLT-1510 DLT-1511 DLT-1512 site redesign and ia ([#968](#968)) ([6ea7eb9](6ea7eb9)) * DLT-2908 ui kits landing page ([#1049](#1049)) ([d805b9d](d805b9d)) ### Features * **Avatar:** DLT-2942 updated avatar component ([#1047](#1047)) ([e50563d](e50563d)) * **Button,tabs,split Button:** visual refresh and slot updates DLT-2946 DLT-2947 DLT-2965 ([#1090](#1090)) ([ffdd56f](ffdd56f)) * **Css Utility:** DLT-2715 add default color for border css utilities ([#874](#874)) ([71310ab](71310ab)) * **Filter Pill:** DLT-2704 create component ([#473](#473)) ([6267445](6267445)) * **Link,button:** DLT-3012 add underline prop ([#1059](#1059)) ([1cb91ea](1cb91ea)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) * **Style:** DLT-2976 update underline thickness and offset ([#1058](#1058)) ([1e56947](1e56947)) * **Text:** export text component from dialtone-vue ([757fdb7](757fdb7)) * **Text:** new vue component DLT-2864 DLT-2863 DLT-2862 ([#995](#995)) ([196ef8a](196ef8a)) * **Tokens:** DLT-1977 add high contrast design tokens and theme ([#938](#938)) ([a1c0457](a1c0457)) * **Tokens:** DLT-2767 exploratory shell themes ([#909](#909)) ([3afcf63](3afcf63)) * **Tokens:** DLT-2781 create color-assistive themes ([#921](#921)) ([a6cc397](a6cc397)) * **Tokens:** DLT-2802 DLT-2563 layered theming system and mode island component ([#945](#945)) ([5c72c6c](5c72c6c)) * **Tokens:** DLT-2937 introduce spacing and layout token systems ([#1045](#1045)) ([de23e12](de23e12)) * **Tokens:** update color ramps and consumer color migration tools DLT-3004 DLT-3005 DLT-3006 DLT-3007 DLT-3008 ([#1054](#1054)) ([28cb1de](28cb1de)) * **Typography, Tokens:** DLT-2856 DLT-2857 next typography system ([#994](#994)) ([d744e97](d744e97)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [8.74.0](dialtone-css/v8.73.0...dialtone-css/v8.74.0) (2026-03-06) ### Features * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [3.211.0](dialtone-vue/v3.210.0...dialtone-vue/v3.211.0) (2026-03-06) ### Bug Fixes * **Combobox:** DLT-3057 combobox errors when hovering over dt-dropdown-separator ([#1097](#1097)) ([4798e0e](4798e0e)) * **Tooltip:** NO-JIRA add Shadow DOM support for DtTooltipDirective ([#1100](#1100)) ([121ffa2](121ffa2)) ### Code Refactoring * **Progress Circle:** NO-JIRA update ai gradient with css variables and fewer stops ([#1105](#1105)) ([8dd19ea](8dd19ea)) ### Features * **Editor:** NO-JIRA added props allowBackgroundColor & allowLineHeight ([#1103](#1103)) ([7c90308](7c90308)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

# [9.167.0](dialtone/v9.166.0...dialtone/v9.167.0) (2026-03-06) ### Bug Fixes * **Combobox:** DLT-3057 combobox errors when hovering over dt-dropdown-separator ([#1097](#1097)) ([4798e0e](4798e0e)) * **Tooltip:** NO-JIRA add Shadow DOM support for DtTooltipDirective ([#1100](#1100)) ([121ffa2](121ffa2)) ### Code Refactoring * **Progress Circle:** NO-JIRA update ai gradient with css variables and fewer stops ([#1105](#1105)) ([8dd19ea](8dd19ea)) ### Features * **Editor:** NO-JIRA added props allowBackgroundColor & allowLineHeight ([#1103](#1103)) ([7c90308](7c90308)) * **Loader,progress Circle:** NO-JIRA polish DtProgressCircle visual and align DtLoader visual with DtProgressCircle ([#1102](#1102)) ([7b9e9b6](7b9e9b6)) * **Progress Circle:** DLT-2983 add progress-circle component ([#1098](#1098)) ([c0f0e40](c0f0e40)) ### Reverts * NO-JIRA revert progress circle polish commits for re-PR ([#1101](#1101)) ([a212c41](a212c41))

Brad Paugh (braddialpad) added 2 commits March 3, 2026 15:33

feat(component): DLT-2983 add new progress component

6ab5334

add size prop

1833e92

Brad Paugh (braddialpad) requested review from Francis Rupert (francisrupert), Ignacio Ropolo (iropolo) and Nina Repetto (ninarepetto) as code owners March 3, 2026 23:57

Brad Paugh (braddialpad) self-assigned this Mar 3, 2026

Brad Paugh (braddialpad) added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label Mar 3, 2026

fix storybook showing PROGRESS_SIZE_DEFAULT

d846634

Francis Rupert (francisrupert) added 5 commits March 4, 2026 10:18

rename to DtProgressCircle; update svg shape; added kind (color) prop

7caae4c

css class doc

cb897ba

interactive demo and improve variant examples

116e545

simplify code examples doc

af38154

Merge branch 'DLT-2983' of https://github.com/dialpad/dialtone into D…

e0b82b4

…LT-2983

Francis Rupert (francisrupert) changed the title ~~feat(progress): DLT-2983 add progress component~~ feat(progress-circle): DLT-2983 add progress-circle component Mar 4, 2026

Francis Rupert (francisrupert) added no-visual-test Add this tag when the PR does not need visual testing and removed visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests labels Mar 4, 2026

Brad Paugh (braddialpad) merged commit c0f0e40 into staging Mar 4, 2026
32 checks passed

Brad Paugh (braddialpad) deleted the DLT-2983 branch March 4, 2026 21:25

Francis Rupert (francisrupert) mentioned this pull request Mar 8, 2026

feat(button): DLT-3086 update loading state to use dt-loader component #1111

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(progress-circle): DLT-2983 add progress-circle component#1098

feat(progress-circle): DLT-2983 add progress-circle component#1098
Brad Paugh (braddialpad) merged 8 commits intostagingfrom
DLT-2983

Brad Paugh (braddialpad) commented Mar 3, 2026 •

edited by atlassian Bot

Loading

Uh oh!

github-actions Bot commented Mar 3, 2026

Uh oh!

Brad Paugh (braddialpad) commented Mar 4, 2026

Uh oh!

Francis Rupert (francisrupert) commented Mar 4, 2026

Uh oh!

Josh Everhart (jeverhart-dialpad) commented Mar 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

Francis Rupert (francisrupert) commented Mar 4, 2026

Uh oh!

Brad Paugh (braddialpad) commented Mar 4, 2026

Uh oh!

Brad Paugh (braddialpad) commented Mar 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Brad Paugh (braddialpad) commented Mar 3, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Obligatory GIF (super important!)

🛠️ Type Of Change

📖 Jira Ticket

📖 Description

📦 Cross-Package Impact

📄 Documentation Artifacts

📝 Checklist

🔮 Next Steps

Uh oh!

github-actions Bot commented Mar 3, 2026

Uh oh!

Brad Paugh (braddialpad) commented Mar 4, 2026

Uh oh!

Francis Rupert (francisrupert) commented Mar 4, 2026

Uh oh!

Josh Everhart (jeverhart-dialpad) commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Mar 4, 2026

Uh oh!

Francis Rupert (francisrupert) commented Mar 4, 2026

Uh oh!

Brad Paugh (braddialpad) commented Mar 4, 2026

Uh oh!

Brad Paugh (braddialpad) commented Mar 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Brad Paugh (braddialpad) commented Mar 3, 2026 •

edited by atlassian Bot

Loading

Josh Everhart (jeverhart-dialpad) commented Mar 4, 2026 •

edited

Loading