fix(examples): clean up tutorial examples for v14#3089
Merged
Conversation
Simplify channel initialization, align CSS layer naming with v14 conventions, and remove unnecessary styling overrides.
|
Size Change: 0 B Total Size: 613 kB ℹ️ View Unchanged
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3089 +/- ##
=======================================
Coverage 79.53% 79.53%
=======================================
Files 426 426
Lines 12174 12174
Branches 3916 3916
=======================================
Hits 9683 9683
Misses 2491 2491 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
github-actions bot
pushed a commit
that referenced
this pull request
Apr 3, 2026
## [14.0.0-beta.6](v14.0.0-beta.5...v14.0.0-beta.6) (2026-04-03) ### ⚠ BREAKING CHANGES * for existing code but changes the accepted values. ### `getGroupChannelDisplayInfo` return value changed The utility function `getGroupChannelDisplayInfo` (from `src/components/ChannelListItem/utils.tsx`) no longer returns `overflowCount` in its result object. ### `AvatarProps.size` type widened to accept arbitrary strings The `size` prop on `AvatarProps` changed from the union `'2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | null` to `'2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | (string & {}) | null`. This allows passing custom size strings while preserving autocomplete for the known values. ### `GroupAvatarProps.size` type widened to accept arbitrary strings The `size` prop on `GroupAvatarProps` changed from `'2xl' | 'xl' | 'lg' | null` to `'2xl' | 'xl' | 'lg' | (string & {}) | null`. This allows passing custom size strings while preserving autocomplete for the known values. ### New `capLimit` prop on `AvatarStack` A new optional `capLimit` prop (type `number`, default `3`) controls the maximum number of avatars rendered before overflow. When `displayInfo` has more entries than `capLimit`, only the first `capLimit` items are shown and a "+N" badge displays the remainder. ### `GroupAvatarMember` type gains optional `id` field The `GroupAvatarMember` type now includes an optional `id?: string` field. When present, it is used as the React `key` for rendered avatars instead of the fallback `${userName}-${imageUrl}-${index}` pattern. ## Behavioral Changes ### `ChannelAvatar` always renders via `GroupAvatar` internally Previously, `ChannelAvatar` conditionally chose between `<Avatar>` (for 0–1 members) and `<GroupAvatar>` (for 2+ members). It now always delegates to `<GroupAvatar>`, which itself renders a single `<Avatar>` when fewer than 2 members are present. The visual output is unchanged, but the component tree structure differs. ### `GroupAvatar` auto-caps displayed members at 4 (or 2 with overflow) Previously, callers controlled how many members to display and the overflow count. Now `GroupAvatar` internally slices `displayMembers`: - **4 or fewer members:** all are rendered, no badge. - **More than 4 members:** only the first 2 are rendered, with a "+N" badge showing the count of remaining members. ### `AvatarStack` auto-caps displayed items (default: 3, configurable via `capLimit`) Previously, callers controlled how many items to display and the overflow count. Now `AvatarStack` internally slices `displayInfo` based on the `capLimit` prop (default `3`): - **`capLimit` or fewer items:** all are rendered, no badge. - **More than `capLimit` items:** only the first `capLimit` are rendered, with a "+N" badge showing the count of remaining items. ### `TypingIndicator` no longer manually slices typing users The `TypingIndicator` component previously sliced the list of typing users to a maximum of 3 before passing to `AvatarStack`. It now passes all typing users, relying on `AvatarStack`'s internal capping (also at 3). The net visual result is unchanged. ### chore * adjustmens to Avatar, GroupAvatar and ChannelAvatar ([#3087](#3087)) ([49d576e](49d576e)) ### Bug Fixes * **examples:** clean up tutorial examples for v14 ([#3089](#3089)) ([6239895](6239895)) * **examples:** enable async voice recording preview in thread composer ([#3092](#3092)) ([6c7cd42](6c7cd42)) * **examples:** fix resize handle alignment and thread border gap in RTL ([#3091](#3091)) ([2f060ae](2f060ae)) * **Icons, RTL:** update icon catalog, RTL layout fixes, dark mode & thread voice recording ([#3090](#3090)) ([a4b1c26](a4b1c26)), closes [#3080](#3080)
|
🎉 This PR is included in version 14.0.0-beta.6 🎉 The release is available on: Your semantic-release bot 📦🚀 |
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
2 participants
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.
🎯 Goal
Align tutorial examples with v14 conventions and simplify the code to make the tutorial easier to follow.
🛠 Implementation details
base/theme→stream/stream-overridesto match v14 naming conventionschannel.watch()calls where ChannelList handles it, usedisReadyboolean instead of storing channel in state)CustomChannelListItemChannelListand related importsWithComponents/Chatnesting ordertutorial-livestreamtheme with genericstr-chat__theme-custom🎨 UI Changes
No visual regressions — changes are structural/convention cleanup only.