Allow rendering Labels as nested children in XAxis and YAxis. and Reference elements#6219
Allow rendering Labels as nested children in XAxis and YAxis. and Reference elements#6219
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR enables rendering Labels as nested children in XAxis and YAxis components by introducing a React context-based approach to pass viewBox data. This replaces the previous array parsing mechanism with a more React-friendly pattern.
Key changes:
- Introduces CartesianLabelContext to provide viewBox data to nested Label components
- Updates CartesianAxis to render children Labels through context instead of direct child parsing
- Adds new CartesianLabelFromLabelProp component for handling label prop compatibility
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| test-vr/playwright-ct.config.ts | Adds expect timeout configuration for test stability |
| storybook/stories/API/cartesian/XAxis.stories.tsx | Updates story to demonstrate nested Label components in XAxis |
| src/component/Label.tsx | Implements CartesianLabelContext and provider for passing viewBox to nested Labels |
| src/cartesian/CartesianAxis.tsx | Updates axis rendering to use context provider and support nested Label children |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
| if (isValidElement(label)) { | ||
| if (label.type === Label) { | ||
| return cloneElement<LabelProps>(label, { key: 'label-implicit', ...commonProps }); | ||
| return cloneElement<SVGElement>(label, { key: 'label-implicit', ...commonProps }); |
There was a problem hiding this comment.
The type parameter SVGElement is incorrect for cloneElement when cloning a Label component. This should be LabelProps to match the original typing and ensure proper prop typing.
| return cloneElement<SVGElement>(label, { key: 'label-implicit', ...commonProps }); | |
| return cloneElement<LabelProps>(label, { key: 'label-implicit', ...commonProps }); |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6219 +/- ##
==========================================
- Coverage 96.70% 96.68% -0.02%
==========================================
Files 221 221
Lines 19880 19926 +46
Branches 4102 4106 +4
==========================================
+ Hits 19224 19265 +41
- Misses 650 655 +5
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportChanges will increase total bundle size by 4.9kB (0.2%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: recharts/bundle-umdAssets Changed:
view changes for bundle: recharts/bundle-es6Assets Changed:
view changes for bundle: recharts/bundle-cjsAssets Changed:
|
… and ReferenceLine
Description
Instead of parsing array of children, pass the viewBox in React context where Label can read it.
Related Issue
Fixes #6156
#5768
Motivation and Context
Removing findAllByType
How Has This Been Tested?
VR tests, storybook
Screenshots (if appropriate):
No visual difference
Types of changes
Checklist: