fix(panel): handle fragment header children safely #4454
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
There was a problem hiding this comment.
Pull request overview
This PR enhances the PanelHeader component to properly handle React Fragments as children by detecting them with a new isFragment utility and wrapping them appropriately. The change also updates the wrapper element from span to div for all non-valid-element children cases.
Key changes:
- Added fragment detection using the
isFragmentutility imported from@/internals/utils - Changed the wrapper element from
spantodivfor wrapped children (including plain text, arrays, and fragments) - Added test coverage to verify fragment children are properly wrapped with the
.rs-panel-titleclass
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/Panel/PanelHeader.tsx | Imports isFragment utility and updates the children wrapping logic to detect and handle React Fragments, while changing the wrapper element from span to div |
| src/Panel/test/Panel.spec.tsx | Adds test case verifying that React Fragments passed as children are correctly wrapped in a div with the rs-panel-title class |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4454 +/- ##
=======================================
Coverage 94.47% 94.48%
=======================================
Files 559 559
Lines 13740 13740
Branches 4080 4081 +1
=======================================
+ Hits 12981 12982 +1
+ Misses 687 686 -1
Partials 72 72
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This pull request improves the handling of React Fragments as children in the
PanelHeadercomponent, ensuring consistent rendering and wrapping of header content. It also adds a test to verify this new behavior.Component enhancements:
PanelHeaderto check for React Fragments using the newisFragmentutility and wrap such children in adivwith the correct class, ensuring consistent structure for all header content. [1] [2]Testing improvements:
PanelHeader, its content is correctly wrapped and rendered.