Skip to content

[material-ui][CircularProgress] Add track slot via enableTrackSlot - #46907

Merged
siriwatknp merged 8 commits into
mui:masterfrom
monam2:feat/circularprogress-track-slot
Sep 12, 2025
Merged

[material-ui][CircularProgress] Add track slot via enableTrackSlot#46907
siriwatknp merged 8 commits into
mui:masterfrom
monam2:feat/circularprogress-track-slot

Conversation

@monam2

@monam2 monam2 commented Sep 10, 2025

Copy link
Copy Markdown
Contributor

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

mui-bot commented Sep 10, 2025

Copy link
Copy Markdown

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

monam2 commented Sep 10, 2025

Copy link
Copy Markdown
Contributor Author

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

@siriwatknp siriwatknp left a comment

Copy link
Copy Markdown
Member

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
Copy Markdown
Member

Request a second eye from @sai6855

@sai6855 sai6855 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

LGTM as well 👍

@sai6855

sai6855 commented Sep 12, 2025

Copy link
Copy Markdown
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)?

@siriwatknp

Copy link
Copy Markdown
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