feat(components): add TopBar component (DS-5242) - #444
Conversation
|
Warning Review limit reached
Next review available in: 12 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughAdded the polymorphic ChangesTopBar component
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
# Conflicts: # .storybook/components/Roadmap/data.ts
|
Visit the preview URL for this PR (updated for commit 315016e): https://react-koobiq-next--prs-444-d1h7fywj.web.app (expires Sat, 08 Aug 2026 18:07:00 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff |
|
@coderabbitai review |
✅ Action performedReview finished.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
packages/components/src/components/TopBar/TopBar.stories.tsx (1)
49-117: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMove
AppIconandContentinto eachrenderthat uses them.
AppIcon(Line 49) andContent(Line 71) are declared at module scope. Consumers who open the Storybook Source panel forWithLogoAndCounter,WithBreadcrumbs,CollapsingActions,Position, orShadowwill not see these definitions in the copyable snippet.Define these helpers inside each
renderfunction that uses them.As per coding guidelines, "Define story data and helpers inside
renderso they appear in the Storybook Source panel."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/components/src/components/TopBar/TopBar.stories.tsx` around lines 49 - 117, Move the module-scoped AppIcon and Content helper definitions into every render function for WithLogoAndCounter, WithBreadcrumbs, CollapsingActions, Position, and Shadow that uses them. Keep each helper’s implementation and usage behavior unchanged so Storybook includes the definitions in each story’s copyable Source output.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/components/src/components/TopBar/TopBar.mdx`:
- Around line 71-76: Update the Shadow section text associated with
Stories.Shadow so the sentence identifies hasShadow as a prop, preserving the
existing explanation that it only paints the bottom shadow.
In `@packages/components/src/components/TopBar/TopBar.tsx`:
- Around line 38-53: Update the public type declarations around TopBar so
exported TopBarProps does not expose private CompoundedComponent or
TopBarComponent symbols. Export the helper types used by the public API, or
derive TopBarProps through the exported TopBar value while preserving its
existing generic ref-aware props behavior.
- Around line 23-29: The component-controlled data attributes are currently
spread in an order that lets DataAttributeProps override computed values. In
packages/components/src/components/TopBar/TopBar.tsx lines 23-29, keep
{...other} before the controlled data-position and data-shadow attributes so
those values remain final; in
packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.tsx
lines 43-55, merge {...other} before data-placement so the computed placement
remains final.
---
Nitpick comments:
In `@packages/components/src/components/TopBar/TopBar.stories.tsx`:
- Around line 49-117: Move the module-scoped AppIcon and Content helper
definitions into every render function for WithLogoAndCounter, WithBreadcrumbs,
CollapsingActions, Position, and Shadow that uses them. Keep each helper’s
implementation and usage behavior unchanged so Storybook includes the
definitions in each story’s copyable Source output.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 49333369-1a4f-446f-8978-5a58a9c12cfb
📒 Files selected for processing (21)
.storybook/components/Roadmap/data.tspackages/components/src/components/TopBar/TopBar.mdxpackages/components/src/components/TopBar/TopBar.module.csspackages/components/src/components/TopBar/TopBar.stories.tsxpackages/components/src/components/TopBar/TopBar.test.tsxpackages/components/src/components/TopBar/TopBar.tsxpackages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.csspackages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.tsxpackages/components/src/components/TopBar/components/TopBarContainer/index.tspackages/components/src/components/TopBar/components/TopBarContainer/types.tspackages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.csspackages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.tsxpackages/components/src/components/TopBar/components/TopBarTitle/index.tspackages/components/src/components/TopBar/components/TopBarTitle/types.tspackages/components/src/components/TopBar/components/index.tspackages/components/src/components/TopBar/index.tspackages/components/src/components/TopBar/types.tspackages/components/src/components/index.tspackages/components/src/global.csstools/api-extractor/config.jsontools/public_api_guard/components/TopBar.api.md
There was a problem hiding this comment.
Pull request overview
This PR introduces a new TopBar compound component to @koobiq/react-components, including its styling, documentation (MDX + Storybook stories), tests, and the necessary public API extractor/guard updates to expose it as part of the library.
Changes:
- Added
TopBarwithTopBar.ContainerandTopBar.Title, including polymorphicassupport and state viadata-*attributes. - Added Storybook docs/stories and Vitest + Testing Library coverage for rendering, accessibility semantics, and keyboard behavior.
- Updated API Extractor config + API guard report, and introduced a global z-index layer token for the sticky TopBar.
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| tools/public_api_guard/components/TopBar.api.md | Adds the API Extractor public API report for the new TopBar surface. |
| tools/api-extractor/config.json | Registers TopBar for API Extractor so its API report is generated/validated in CI. |
| packages/components/src/global.css | Introduces --kbq-layer-topbar to support predictable stacking for the sticky TopBar. |
| packages/components/src/components/TopBar/types.ts | Defines TopBar public prop types and topBarPropPosition. |
| packages/components/src/components/TopBar/TopBar.tsx | Implements the TopBar root component and compounds Container/Title. |
| packages/components/src/components/TopBar/TopBar.test.tsx | Adds unit tests for root/subcomponents, data attributes, and toolbar keyboard navigation. |
| packages/components/src/components/TopBar/TopBar.stories.tsx | Adds Storybook stories demonstrating variants (position, shadow, breadcrumbs, collapsing actions). |
| packages/components/src/components/TopBar/TopBar.module.css | Adds base layout, sticky positioning, shadow styles, and CSS variable hooks for customization. |
| packages/components/src/components/TopBar/TopBar.mdx | Adds component documentation page with usage guidance, props, CSS variables, and accessibility notes. |
| packages/components/src/components/TopBar/index.ts | Exports TopBar, types, and related subcomponent exports from the component folder. |
| packages/components/src/components/TopBar/components/TopBarTitle/types.ts | Defines TopBarTitle prop types. |
| packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.tsx | Implements TopBar.Title with typography utility classes and polymorphic as. |
| packages/components/src/components/TopBar/components/TopBarTitle/TopBarTitle.module.css | Styles the title (ellipsis, min width, foreground color, reset margin). |
| packages/components/src/components/TopBar/components/TopBarTitle/index.ts | Exports TopBarTitle and its types. |
| packages/components/src/components/TopBar/components/TopBarContainer/types.ts | Defines TopBarContainer prop types and topBarContainerPropPlacement. |
| packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.tsx | Implements TopBar.Container, including optional useToolbar semantics when isToolbar is set. |
| packages/components/src/components/TopBar/components/TopBarContainer/TopBarContainer.module.css | Styles start/end container placement, gaps, sizing, and clipping behavior. |
| packages/components/src/components/TopBar/components/TopBarContainer/index.ts | Exports TopBarContainer and its types. |
| packages/components/src/components/TopBar/components/index.ts | Barrel export for TopBar subcomponents. |
| packages/components/src/components/index.ts | Re-exports TopBar from the package’s components index. |
| .storybook/components/Roadmap/data.ts | Marks TopBar as done (experimental) in the Storybook roadmap data. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary by CodeRabbit
New Features
Documentation
Tests