fix: unable to customize css styles of 'toolbar' component in Web Platform #106
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughStyle prop is now forwarded to the underlying web components across toolbar wrappers (Root, ToggleGroup, ToggleItem, Separator, Link, Button) in toolbar.web.tsx. Render functions were updated to include style={style} on the inner Component. No public API signatures or control flow changed. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type 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 (3)
packages/toolbar/src/toolbar.web.tsx (3)
104-104: Prefer accessibilityRole over role for RN Web.Use the platform-idiomatic prop for better typing and cross-platform a11y.
Apply:
- <Component ref={ref} onPress={onPress} role='button' style={style} {...props} /> + <Component ref={ref} onPress={onPress} accessibilityRole='button' style={style} {...props} />
115-115: Wrap Separator with Radix Toolbar.Separator for consistency & a11y.Align with Menubar pattern so the separator participates in Radix semantics.
Apply:
-const Separator = React.forwardRef<SeparatorRef, SeparatorProps>( - ({ asChild, style, ...props }, ref) => { - const Component = asChild ? Slot.View : View; - return <Component ref={ref} style={style} {...props} />; - } -); +const Separator = React.forwardRef<SeparatorRef, SeparatorProps>( + ({ asChild, style, ...props }, ref) => { + const Component = asChild ? Slot.View : View; + return ( + <Toolbar.Separator asChild> + <Component ref={ref} style={style} {...props} /> + </Toolbar.Separator> + ); + } +);
136-136: Prefer accessibilityRole on Button.Same reasoning as ToggleItem; keeps typings clean on RNW.
Apply:
- <Component ref={ref} role='button' style={style} {...props} /> + <Component ref={ref} accessibilityRole='button' style={style} {...props} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/toolbar/src/toolbar.web.tsx(6 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/toolbar/src/toolbar.web.tsx (2)
packages/menubar/src/menubar.web.tsx (2)
props(448-455)props(353-362)packages/toggle-group/src/toggle-group.web.tsx (1)
viewProps(17-59)
🔇 Additional comments (3)
packages/toolbar/src/toolbar.web.tsx (3)
26-26: Root: style now forwarded — LGTM.This fixes the Web styling gap for Root.
57-57: ToggleGroup: style forwarding — LGTM.Matches ToggleGroup usage in related primitives; no side effects expected.
125-125: Link: style forwarding — LGTM.This unblocks Web overrides on Link.
While working on #105 I found a bug. CSS styles passed through
"toolbar"component doesn't have any effect in Web platform.Summary by CodeRabbit