fix(ui-core): Render Button string children in span #16515
Conversation
WalkthroughThe pull request modifies the rendering logic of the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
libs/island-ui/core/src/lib/Button/Button.tsx (1)
104-108: Approved: Good solution to address the reported issue.The change effectively addresses the reported React bug by wrapping string children in a
<span>element when the variant is not 'text'. This should resolve the issues with DOM manipulation by third-party tools like Chrome's translation feature.For improved clarity, consider extracting the condition into a variable:
- {typeof children === 'string' && variant !== 'text' ? ( + {const shouldWrapInSpan = typeof children === 'string' && variant !== 'text'; + shouldWrapInSpan ? ( <span>{children}</span> ) : ( children )}This makes the code more readable and easier to maintain.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
- libs/island-ui/core/src/lib/Button/Button.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
libs/island-ui/core/src/lib/Button/Button.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #16515 +/- ##
=======================================
Coverage 36.77% 36.77%
=======================================
Files 6847 6847
Lines 141871 141875 +4
Branches 40422 40426 +4
=======================================
+ Hits 52167 52170 +3
- Misses 89704 89705 +1 Flags with carried forward coverage won't be shown. Click here to find out more.
... and 2 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
Datadog ReportAll test runs ✅ 34 Total Test Services: 0 Failed, 32 Passed Test ServicesThis report shows up to 10 services
|
Render Button string children in span
Attach a link to issue if relevant
What
Render direct string children of
<Button>in aspan.I've tested this and it does not affect/change any usage of button that I could find
Why
This is a workaround for a known bug in which React throws an error when re-rendering if the DOM has changed by some 3rd party (for example Chrome dynamic translation function, or some extensions):
Sparked by this issue, in which users that were most likely translating the page into f.x polish, could not continue to the next screen in the application because of this.
I narrowed the bug down to the Button component when in
loadingstate:The loading state renders children in a
<span>, but normally the children are just rendered directly. I'm guessing this difference plus the 3rd party manipulation of the DOM causes the error, at least this change fixes it.Screenshots / Gifs
Attach Screenshots / Gifs to help reviewers understand the scope of the pull request
Checklist:
Summary by CodeRabbit
New Features
Bug Fixes
<span>element when the button variant is not set to 'text'.