MudToggleGroup: Refactor borders, Add border opacity support#11496
MudToggleGroup: Refactor borders, Add border opacity support#11496danielchalmers merged 1 commit intoMudBlazor:devfrom
Conversation
github-actions
bot
added
the
enhancement
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the MudToggleGroup component’s border implementation by moving border styling into CSS, introduces palette-based border opacity support, and adjusts delimiter rendering for outlined groups.
- Introduce
.mud-toggle-group-outlinedCSS class with dynamic palette color and opacity support - Refactor horizontal/vertical delimiter rules to only apply under outlined
- Update Razor class builder to emit new CSS classes instead of inline border utilities
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/MudBlazor/Styles/components/_togglegroup.scss | Moved border styling from inline to .mud-toggle-group-outlined, added palette-based color variants and opacity handling, and scoped delimiters under the outlined class. |
| src/MudBlazor/Components/Toggle/MudToggleGroup.razor.cs | Changed AddClass calls to emit mud-toggle-group-outlined and color-specific classes, removed old inline border and border-solid classes. |
Comments suppressed due to low confidence (1)
src/MudBlazor/Components/Toggle/MudToggleGroup.razor.cs:83
- New CSS classes for outlined and palette color variants have been introduced. It would be helpful to add or update unit tests to verify that
mud-toggle-group-outlinedand the corresponding color classes are correctly applied when theOutlinedparameter is true.
.AddClass("mud-toggle-group-outlined", Outlined)
| .mud-toggle-group-outlined { | ||
| border-width: 1px; | ||
| border-color: rgb(from var(--mud-palette-text-primary) r g b / var(--mud-palette-border-opacity)); | ||
|
|
There was a problem hiding this comment.
The .mud-toggle-group-outlined rule defines border-width and border-color but omits border-style. Without border-style: solid, the border will not render. Please add border-style: solid; under this selector.
| border-style: solid; |
| .AddClass($"mud-toggle-group-size-{Size.ToDescriptionString()}") | ||
| .AddClass("mud-toggle-group-rtl", RightToLeft) | ||
| .AddClass($"border mud-border-{Color.ToDescriptionString()} border-solid", Outlined) | ||
| .AddClass($"mud-toggle-group-{Color.ToDescriptionString()}") |
There was a problem hiding this comment.
[nitpick] The color variant class (mud-toggle-group-{color}) is applied unconditionally. It only affects outlined groups, so consider adding it under the same Outlined predicate to avoid emitting unused classes on non-outlined components.
| .AddClass($"mud-toggle-group-{Color.ToDescriptionString()}") | |
| .AddClass($"mud-toggle-group-{Color.ToDescriptionString()}", Outlined) |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## dev #11496 +/- ##
=======================================
Coverage 91.14% 91.15%
=======================================
Files 466 466
Lines 14497 14498 +1
Branches 2816 2816
=======================================
+ Hits 13214 13215 +1
Misses 644 644
Partials 639 639 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Did you check with the vertical? Lgtm, we need this fix |
|
Don't see any issues with CheckMark, FixedContent, Vertical |
Description
How Has This Been Tested?
visually
Type of Changes
Checklist
dev).