MudProgressCircular: Calculate view box size based on stroke width#11557
Merged
ScarletKuro merged 3 commits intoMudBlazor:devfrom Jun 28, 2025
Merged
Conversation
github-actions
bot
added
the
bug
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## dev #11557 +/- ##
=======================================
Coverage 91.20% 91.20%
=======================================
Files 466 466
Lines 14688 14697 +9
Branches 2855 2855
=======================================
+ Hits 13396 13405 +9
Misses 646 646
Partials 646 646 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR ensures that the SVG viewBox of MudProgressCircular dynamically adjusts when the StrokeWidth changes, preventing the circle from being clipped.
- Calculates a new
viewBoxinOnParametersSetbased onStrokeWidth - Updates the Razor markup to use the computed
_viewBoxinstead of a static value - Adds unit tests to verify correct viewBox values across stroke widths
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/MudBlazor/Components/Progress/MudProgressCircular.razor.cs | Compute _viewBox dynamically in OnParametersSet |
| src/MudBlazor/Components/Progress/MudProgressCircular.razor | Bind SVG viewBox attribute to the computed _viewBox |
| src/MudBlazor.UnitTests/Components/ProgressCircularTests.cs | Add and correct tests for viewBox logic and existing test cases |
| src/MudBlazor.UnitTests.Viewer/TestComponents/Progress/MudProgressCircularWidthTest.razor | Provide a live demo for variable StrokeWidth in the test viewer |
Comments suppressed due to low confidence (2)
src/MudBlazor.UnitTests/Components/ProgressCircularTests.cs:158
- Consider adding a test case for a negative
StrokeWidth(e.g.,-5) to validate that theMath.Max(0, StrokeWidth)guard correctly treats negatives as zero and produces the same viewBox.
[TestCase(0, "24 24 40 40")]
src/MudBlazor/Components/Progress/MudProgressCircular.razor.cs:21
- Replace the hard-coded
MagicNumberwith a computed circumference (e.g.,int circumference = (int)(2 * Math.PI * CircleRadius)) or rename it to something likeCircumferenceto avoid magic numbers and make future radius changes safe.
private const int MagicNumber = 126; // weird, but required for the SVG to work
mckaragoz
approved these changes
Jun 26, 2025
Member
|
Yeah, this was one of the known bug. Happy to see this PR. |
ScarletKuro
approved these changes
Jun 27, 2025
|
This was referenced Aug 1, 2025
Closed
This was referenced Aug 11, 2025
This was referenced Oct 6, 2025
This was referenced Nov 12, 2025
This was referenced Dec 12, 2025
Closed
Closed
This was referenced Dec 29, 2025
This was referenced Jan 9, 2026
Closed
This was referenced Feb 10, 2026
Closed
This was referenced Feb 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Currently the view box size remains static while the stroke width value can be changed. This can result in a stroke width that eventually renders the circle outside the bounds of the view box. This PR adjusts the view box size based on the value of the stroke width.
Resolves #11550
How Has This Been Tested?
Visually and Unit test
Type of Changes
Checklist
dev).