Add 'as' prop support to BreadcrumbItem #1526
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsxOops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "/packages/ui".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in "packages/ui/.eslintrc.cjs". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThe pull request modifies the Changes
Possibly related issues
Poem
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
CodeRabbit Configuration File (
|
![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 (2)
packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx (2)
25-27: Consider improving type safety and default behavior.A few suggestions to enhance the implementation:
- The default value of "a" might not be ideal when there's no href. Consider:
- { as = "a", children, className, href, icon: Icon, theme: customTheme = {}, ...props } + { as, children, className, href, icon: Icon, theme: customTheme = {}, ...props }
- The ref casting to 'never' could be improved with proper typing.
Line range hint
22-42: Consider adding documentation for Next.js usage.Since this change is specifically beneficial for Next.js applications, consider:
- Adding JSDoc comments with Next.js usage examples
- Including type hints for common Next.js Link usage
- Adding integration tests with Next.js Link component
Example JSDoc:
/** * @example * // With Next.js Link * import Link from 'next/link'; * * <BreadcrumbItem as={Link} href="/path"> * Home * </BreadcrumbItem> */
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx(2 hunks)
🔇 Additional comments (3)
packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsx (3)
1-1: LGTM! Clean import addition.The ElementType import is correctly added to support the new 'as' prop type.
18-18: LGTM! Well-typed prop addition.The
asprop is correctly typed as optional ElementType, maintaining consistency with similar components like NavbarBrand.
Line range hint
25-40: Verify accessibility implications.Please ensure that:
- ARIA attributes are properly preserved when using custom components
- The component remains keyboard navigable when rendered as different elements
- The semantic structure remains valid in the breadcrumb navigation
Let's verify the current accessibility implementation:
✅ Verification successful
Accessibility implementation verified and found compliant
The current implementation follows accessibility best practices:
- Proper semantic structure using
nav,ol, andlielements- Correct ARIA attributes with
aria-hiddenfor decorative elements- Native keyboard navigation through proper use of anchor elements
- Comprehensive accessibility test coverage
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for existing accessibility-related tests and attributes rg -l 'aria-|role=' packages/ui/src/components/Breadcrumb/ rg -l 'accessibility|a11y' packages/ui/src/components/Breadcrumb/Length of output: 296
Script:
#!/bin/bash # Check test file for accessibility tests and component implementation echo "=== Breadcrumb.spec.tsx ===" rg -A 5 -B 5 'aria-|role=|keyboard|focus|navigate' packages/ui/src/components/Breadcrumb/Breadcrumb.spec.tsx echo -e "\n=== Breadcrumb.tsx ===" rg -A 5 -B 5 'aria-|role=|nav' packages/ui/src/components/Breadcrumb/Breadcrumb.tsx echo -e "\n=== BreadcrumbItem.tsx ===" cat packages/ui/src/components/Breadcrumb/BreadcrumbItem.tsxLength of output: 4192
As described in #1521, this PR adds a
asprop toBreadcrumbItem. This prop is similar to theasprop inNavbarBrand. It is useful in Next.js, where we need to use the customLinkcomponent instead of the regulara.Summary by CodeRabbit
BreadcrumbItemcomponent with more flexible rendering options