fix: slider background should respect borderRadius property#21447
fix: slider background should respect borderRadius property#21447mayur9210 wants to merge 2 commits intoapache:masterfrom
Conversation
|
Thanks for your contribution! Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only. |
There was a problem hiding this comment.
Pull request overview
This pull request fixes a visual bug where the slider dataZoom component's background does not properly respect the borderRadius configuration option. The fix ensures that when borderRadius is specified, the background rectangle is clipped to match the rounded corners.
Key changes:
- Retrieves the
borderRadiusvalue from the dataZoomModel configuration - Applies the
borderRadiusto the background Rect shape'srproperty to enable rounded corners
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
Thanks for your contribution! There is already a PR #18959 that includes this fix and contains more fixes and features. I will merge your PR into it in the v6.2.0 release. |
Brief Information
This pull request is in the type of:
What does this PR do?
This pull request fixes a visual bug where the slider dataZoom component's background color does not respect the
borderRadiusconfiguration option. The fix ensures that whenborderRadiusis specified, the background rectangle is properly clipped to match the rounded corners.Fixed issues
Details
Before: What was the problem?
When using the slider dataZoom component with both
backgroundColorandborderRadiusconfigured, the background color would extend beyond the defined border radius, creating a visual inconsistency. The rounded corners were applied to some elements but not to the background rectangle, resulting in the background "bleeding" outside the intended bounds.The background rectangle was created without the
r(radius) property in the shape configuration, causing it to ignore theborderRadiussetting.After: How does it behave after the fixing?
The background rectangle now properly respects the
borderRadiusconfiguration. The fix retrieves theborderRadiusvalue from the dataZoomModel and applies it to the shape'srproperty, ensuring consistent rounded corners across all visual elements of the slider.Implementation details:
const borderRadius = dataZoomModel. get('borderRadius')to retrieve the configuration valuer: borderRadiusto the Rect shape properties to apply the border radiusThe fix is minimal (2 lines) and follows the existing pattern used in other parts of the codebase where border radius is applied to shapes.
Document Info
One of the following should be checked.
Misc
Security Checking
ZRender Changes
Related test cases or examples to use the new APIs
N/A - This is a bug fix for existing functionality. The
borderRadiusoption already exists in the dataZoom configuration; this fix simply ensures it's applied to the background element.Merging options