feat: add icon element props for semantic #979
Conversation
|
@json-q is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
Summary of ChangesHello @json-q, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a significant enhancement to the Tabs component's customization capabilities. By refactoring how styling and class names are applied, it now provides developers with fine-grained control over the appearance of tab icons. This change improves the component's flexibility, allowing for more precise design adjustments and better integration into various UI themes without affecting other elements. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
Walkthrough将 TabNode 的样式 API 从平铺的 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 分钟 Possibly related PRs
诗
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
The pull request successfully introduces semantic styling and class name props for the icon element within the tabs, aligning with the feature description. The changes in TabNode.tsx and index.tsx correctly propagate these new styling options, and the test cases in index.test.tsx validate the functionality. However, there are a couple of places where optional properties are accessed directly, which could lead to runtime errors.
src/TabNavList/TabNode.tsx
Outdated
| [`${tabPrefix}-focus`]: focus, | ||
| })} | ||
| style={style} | ||
| style={styles.root} |
There was a problem hiding this comment.
The styles prop is defined as optional in TabNodeProps, but styles.root is accessed directly here. This could lead to a runtime error if styles is undefined. Please use optional chaining (styles?.root) to safely access the property.
| style={styles.root} | |
| style={styles?.root} |
src/TabNavList/TabNode.tsx
Outdated
| )} | ||
| {icon && <span className={`${tabPrefix}-icon`}>{icon}</span>} | ||
| {icon && ( | ||
| <span className={clsx(`${tabPrefix}-icon`, classNames?.icon)} style={styles.icon}> |
There was a problem hiding this comment.
Similar to the root style, the styles prop is optional, but styles.icon is accessed directly. This could cause a runtime error if styles is undefined. Please use optional chaining (styles?.icon).
| <span className={clsx(`${tabPrefix}-icon`, classNames?.icon)} style={styles.icon}> | |
| <span className={clsx(`${tabPrefix}-icon`, classNames?.icon)} style={styles?.icon}> |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/TabNavList/TabNode.tsx`:
- Line 98: The code uses styles.root directly which throws if styles is
undefined; update the usage in TabNode (where style={styles.root}) to guard with
optional chaining or a fallback (e.g. style={styles?.root} or
style={styles?.root ?? undefined}) so the component won't crash when the styles
prop is omitted; locate the style assignment in TabNode.tsx and replace
styles.root with styles?.root (or provide a default styles object) accordingly.
- Around line 129-133: 在 TabNode 组件的 JSX 中，style={styles.icon} 会在 styles
未定义时抛出异常；将其改为使用可选链（即 styles?.icon）或在组件开始处给 styles 默认值，确保访问 styles.icon
前先判空；在包含图标的 span（引用 tabPrefix、classNames?.icon 的位置）替换为使用 styles?.icon 以避免运行时错误。
1 participant
Summary by CodeRabbit
发布说明
新功能
测试
✏️ Tip: You can customize this high-level summary in your review settings.