Repository navigation
docs(examples): use the ChannelHeader Title slot in the Channel details recipe - #3373
Merged
Merged
Conversation
…ls recipe The recipe's header was rebuilt from the SDK's parts only to make the title a button. ChannelHeader now takes a Title component, so the recipe replaces just the title and keeps the SDK's subtitle, typing indicator, avatar and navigation buttons.
MartinCupela
requested review from
NikolaGoranNaumovski and
oliverlaz
as code owners
November 2, 2026 14:35
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
Delegate header rendering examples/cookbook/src/recipes/panels/channel-details/ChannelHeaderWithDetails.tsx |
The recipe passes a custom title button to ChannelHeader. The button has an accessible label, reflects the panel’s open state, and toggles the panel. ChannelHeader replaces the recipe’s hand-built header elements. |
Estimated code review effort: 2 (Simple) | ~10 minutes
Change: Other
Possibly related PRs
- GetStream/stream-chat-react#3367: Adds the
ChannelHeadertitle prop and its title-props type, which this change uses. - GetStream/stream-chat-react#3342: Changes the default
ChannelHeaderSubtitletyping behavior, which the recipe now uses throughChannelHeader.
Merge Risk: 
ffff8
-
The recipe’s title and details interaction remain aligned with the SDK header, with no identified issue blocking merge.
Pre-merge checks: 
-
Check name Status Explanation Title check The title clearly and concisely describes the main change: using the ChannelHeader Title slot in the Channel details recipe. Description check The description includes all required sections. It explains the goal, implementation, and UI behavior, and it documents the validation performed. The UI Changes section states that no screenshots are … Docstring Coverage No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat… Linked Issues check Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Check skipped because no linked issues were found for this pull request. Full details: Description check
-
Explanation
The description includes all required sections. It explains the goal, implementation, and UI behavior, and it documents the validation performed. The UI Changes section states that no screenshots are needed because the UI is unchanged.
Full details: Docstring Coverage
-
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 1 files.
-
Finishing Touches
-
Generate docstrings
-
- Commit to this branch
- Create a new PR
Generate unit tests (beta)
-
- Commit to this branch
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
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.
Contributor
|
Size Change: -1.3 kB (-0.14%) Total Size: 904 kB 📦 View Changed
ℹ️ View Unchanged
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3373 +/- ##
=======================================
Coverage 88.82% 88.82%
=======================================
Files 563 563
Lines 17159 17159
Branches 5255 5255
=======================================
Hits 15241 15241
Misses 1918 1918 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
oliverlaz
approved these changes
Nov 2, 2026
|
🎉 This PR is included in version 15.0.0-rc.4 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 15.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Ticket: https://linear.app/stream/issue/REACT-1442
🎯 Goal
Use the new
ChannelHeaderTitleslot (#3367) in the UI Cookbook's Channel details recipe, so the recipe matches its docs page.🛠 Implementation details
The recipe rebuilt the whole channel header from the SDK's parts, only to make the channel's title a button that opens the details panel. It now passes that button as
Title:TitleThatOpensDetailsrenders the button, with the same aria-label,aria-expandedand classes as before.ChannelHeaderWithDetailsis<ChannelHeader Title={TitleThatOpensDetails} />, so the SDK draws the subtitle, the typing indicator, the avatar and the navigation buttons.The CSS is unchanged. The file matches the code sample on the docs page (GetStream/getstream.io#889).
🎨 UI Changes
None: the header looks and behaves as before. Checked in the cookbook at 1280×720; clicking the title opens and closes Channel details.
Summary by CodeRabbit