Skip to content

Conversation

@monam2
Copy link
Contributor

@monam2 monam2 commented Sep 10, 2025

closes #46863

Summary

Adds a customizable track slot to CircularProgress and updates docs/API/tests.

  • API: add enableTrackSlot?: boolean (default false)
  • CSS: add .MuiCircularProgress-track
  • Behavior: when enabled, render a subtle background track <circle> (same r/strokeWidth as the foreground, aria-hidden="true", no dash in determinate)
  • Docs: add CircularEnableTrack demo; update API docs to include the prop and class
  • Tests: cover default off, render on, geometry match, no dash in determinate
  • Compatibility: no breaking changes

note1: The docs section is titled “Circular track”. I’m open to renaming it to “Circular enableTrack” if reviewers prefer aligning the demo title with the prop name.
note2: I intentionally didn’t include dash customization for the track in this PR to keep the scope focused. If you believe this feature would be useful, please open a new issue and assign it to me; I’d be happy to proceed with a follow-up PR.

Demo

2025-09-1011 04 15-ezgif com-video-to-gif-converter

@mui-bot
Copy link

mui-bot commented Sep 10, 2025

Netlify deploy preview

Bundle size report

Bundle Parsed size Gzip size
@mui/material 🔺+334B(+0.06%) 🔺+90B(+0.06%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against c0fe648

@monam2 monam2 force-pushed the feat/circularprogress-track-slot branch from 85847e4 to 8f70499 Compare September 10, 2025 15:29
@monam2
Copy link
Contributor Author

monam2 commented Sep 10, 2025

Sorry, I missed those changes because I had some work in progress.

@zannager zannager added component: CircularProgress The React component. scope: progress Changes related to the progress. labels Sep 11, 2025
@zannager zannager requested a review from siriwatknp September 11, 2025 10:33
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 Great job.

Pushed minor tweaks to use the theme token

@siriwatknp siriwatknp requested a review from sai6855 September 12, 2025 05:59
@siriwatknp
Copy link
Member

Request a second eye from @sai6855

Copy link
Contributor

@sai6855 sai6855 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM as well 👍

@sai6855
Copy link
Contributor

sai6855 commented Sep 12, 2025

@siriwatknp I don't see slots and slotProps pattern implemented for CircularProgress component. Should we do it as similar to other components (In another PR)?

@siriwatknp
Copy link
Member

@siriwatknp I don't see slots and slotProps pattern implemented for CircularProgress component. Should we do it as similar to other components (In another PR)?

Yes, please proceed for both Circular and Linear Progress (can be in the same PR).

@siriwatknp siriwatknp merged commit b5b5149 into mui:master Sep 12, 2025
21 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: CircularProgress The React component. scope: progress Changes related to the progress.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[CircularProgress] Add track slot to be customizable

5 participants