fix(avatar): title type in Avatar #4529
Conversation
🦋 Changeset detectedLatest commit: 2930ad2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request introduces a patch dependency for the package Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (2)
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
🧹 Nitpick comments (1)
apps/docs/content/docs/components/alert.mdx (1)
141-141: Enhance documentation with ReactNode examplesWhile the type update is correct, consider adding usage examples that demonstrate the new ReactNode capability, such as:
- Using JSX elements in title
- Mixing text with styled components
- Complex nested elements
Example addition to the documentation:
+ ### Rich Content Title + + You can now use React elements in the title: + + ```tsx + <Alert + title={<> + <strong>Important:</strong> System Update + </>} + > + Update details... + </Alert> + ```
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.changeset/quick-peas-care.md(1 hunks)apps/docs/content/docs/components/alert.mdx(1 hunks)packages/components/alert/src/alert.tsx(1 hunks)packages/components/alert/src/use-alert.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .changeset/quick-peas-care.md
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: TypeScript
- GitHub Check: Build
🔇 Additional comments (2)
packages/components/alert/src/alert.tsx (1)
65-65: Verify isEmpty utility compatibility with ReactNodeThe change to use
isEmptyfor title validation aligns with the description check pattern. However, we should ensure thatisEmptycorrectly handles all possible ReactNode types (elements, arrays, fragments, etc.).Let's verify the isEmpty implementation:
✅ Verification successful
isEmpty utility is compatible with ReactNode types
The implementation in
shared-utils/assertion.tssafely handles all ReactNode scenarios:
- Elements and components (return false)
- null/undefined/empty string (return true)
- Arrays of elements (checked recursively)
- Object-based elements (checked properly)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check isEmpty implementation in shared-utils rg -A 10 "export.+isEmpty.+="Length of output: 29
Script:
#!/bin/bash # First, let's find how isEmpty is imported in alert.tsx rg "import.*isEmpty" packages/components/alert/src/alert.tsx # As backup, search for isEmpty function declarations across the codebase ast-grep --pattern 'function isEmpty($_) { $$$ }' # Also search for const declarations ast-grep --pattern 'const isEmpty = $_'Length of output: 208
Script:
#!/bin/bash # Find shared-utils package location fd -t d shared-utils packages/ # Once found, search for isEmpty in that directory rg -t ts -t tsx "isEmpty" packages/shared-utils -A 5Length of output: 146
Script:
#!/bin/bash # Search for isEmpty in the correct package directory rg "isEmpty" packages/utilities/shared-utils/ -A 5 # Also try to find the specific file that might contain the implementation fd -t f -e ts -e tsx . packages/utilities/shared-utils/srcLength of output: 2124
packages/components/alert/src/use-alert.ts (1)
20-20: LGTM! Type change aligns with requirementsThe change from
stringtoReactNodecorrectly implements the requested feature, allowing React elements in the title prop.
Closes #4525
📝 Description
Change
titletype fromstringtoReactNode.⛳️ Current behavior (updates)
This throws typing error.
🚀 New behavior
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
Summary by CodeRabbit
New Features
Bug Fixes
Documentation