feat(ui): add StreamAvatarGroup and StreamBadgeCount #43

xsahil03x · 2026-02-02T11:33:57Z

StreamAvatarGroup	StreamBadgeCount

Summary by CodeRabbit

Release Notes

New Features
- Added StreamAvatarGroup component for displaying up to four avatars in a grid layout
- Added StreamBadgeCount component for displaying text-based badges with customizable sizes
- Added text direction selector to preview toolbar for RTL/LTR switching
Enhancements
- Extended avatar sizing with new XL variant for larger displays
- Expanded online indicator with child widget support and improved positioning controls
- Added XL size option for online indicators
- Improved avatar component with enhanced border styling
- Updated avatar stack with refined size management
- Added numericXl typography style
UI/UX Improvements
- Enhanced component gallery with improved folder organization
- Added text direction preview support

coderabbitai · 2026-02-02T11:34:05Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

🔍 Trigger a full review

📝 Walkthrough

Walkthrough

Two new Flutter components (StreamAvatarGroup and StreamBadgeCount) are introduced with comprehensive theme support and gallery showcases. Existing avatar and indicator components are updated with size variants and border enhancements. The gallery application is restructured with text direction configuration support and expanded UI controls for component preview configuration.

Changes

Cohort / File(s)	Summary
New Core Components `packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_group.dart`, `packages/stream_core_flutter/lib/src/components/badge/stream_badge_count.dart`	Introduces StreamAvatarGroup (2x2 grid layout with overflow badge) and StreamBadgeCount (pill-shaped badge component) with size enums and theme integration.
New Theming Infrastructure `packages/stream_core_flutter/lib/src/theme/components/stream_badge_count_theme.dart`, `packages/stream_core_flutter/lib/src/theme/components/stream_badge_count_theme.g.theme.dart`, `packages/stream_core_flutter/lib/src/theme/stream_theme.dart`, `packages/stream_core_flutter/lib/src/theme/stream_theme.g.theme.dart`, `packages/stream_core_flutter/lib/src/theme/stream_theme_extensions.dart`	Adds StreamBadgeCountTheme and StreamBadgeCountThemeData with size/color configuration, integrates into main theme system, and extends theme accessors.
Avatar Component Updates `packages/stream_core_flutter/lib/src/components/avatar/stream_avatar.dart`, `packages/stream_core_flutter/lib/src/theme/components/stream_avatar_theme.dart`, `packages/stream_core_flutter/lib/src/theme/components/stream_avatar_theme.g.theme.dart`	Adds xl size variant (64px), replaces Color-based borderColor with BoxBorder-based border property, updates theme schema.
Avatar Stack Refactoring `packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_stack.dart`	Introduces StreamAvatarStackSize enum (xs/sm), replaces List<Widget> with Iterable<Widget>, removes extraAvatarBuilder, uses StreamBadgeCount for overflow indicator.
Online Indicator Enhancement `packages/stream_core_flutter/lib/src/components/indicator/stream_online_indicator.dart`, `packages/stream_core_flutter/lib/src/theme/components/stream_online_indicator_theme.dart`, `packages/stream_core_flutter/lib/src/theme/components/stream_online_indicator_theme.g.theme.dart`	Removes public StreamOnlineIndicatorSize enum from component; adds size/alignment/offset as constructor parameters for child-based positioning; extends theme with new size and alignment properties.
Component Exports `packages/stream_core_flutter/lib/src/components.dart`, `packages/stream_core_flutter/lib/src/theme.dart`	Exports new StreamAvatarGroup, StreamBadgeCount, and StreamBadgeCountTheme components/themes.
Gallery Component Showcases `apps/design_system_gallery/lib/components/stream_avatar_group.dart`, `apps/design_system_gallery/lib/components/stream_badge_count.dart`	Adds comprehensive playground and showcase demos for new components with configurable controls, multiple sections (size variants, count variants, usage patterns), and example UI cards.
Gallery Structure Updates `apps/design_system_gallery/lib/app/gallery_app.directories.g.dart`, `apps/design_system_gallery/lib/app/gallery_shell.dart`	Wires new components into Widgetbook structure; adds directory collapse logic to default folders/components to collapsed state while keeping categories expanded; removes explicit isInitiallyExpanded flags.
Avatar Gallery Updates `apps/design_system_gallery/lib/components/stream_avatar.dart`, `apps/design_system_gallery/lib/components/stream_avatar_stack.dart`, `apps/design_system_gallery/lib/components/stream_online_indicator.dart`	Adds xl size usage description to StreamAvatar; updates StreamAvatarStack playground to use new StreamAvatarStackSize enum; extends StreamOnlineIndicator with child-wrapping feature and alignment variants section.
Text Direction Configuration `apps/design_system_gallery/lib/config/preview_configuration.dart`, `apps/design_system_gallery/lib/core/preview_wrapper.dart`, `apps/design_system_gallery/lib/widgets/toolbar/text_direction_selector.dart`, `apps/design_system_gallery/lib/widgets/toolbar/toolbar.dart`, `apps/design_system_gallery/lib/widgets/toolbar/toolbar_widgets.dart`	Adds TextDirection support to PreviewConfiguration with getter/setter; wraps previews with Directionality widget; introduces TextDirectionSelector dropdown UI; integrates into toolbar alongside TextScaleSelector.
Typography Enhancement `apps/design_system_gallery/lib/semantics/typography.dart`, `packages/stream_core_flutter/lib/src/theme/semantics/stream_text_theme.dart`, `packages/stream_core_flutter/lib/src/theme/semantics/stream_text_theme.g.theme.dart`	Adds numericXl text style to StreamTextTheme; updates typography quick reference sizing information.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~75 minutes

Suggested reviewers

renefloor

Poem

🐰 Hoppy times in design land!
New badges bloom and avatars stand,
Grouped in grids with overflow care,
Directions flow both left and right with flair.
Theme cascades through every widget layer—
A comprehensive gift, beyond compare! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description lacks required sections from the template (CLA, description text, testing info) and only contains screenshots without written explanation.	Add the required template sections including Linear ticket reference, CLA checklist, comprehensive description of the changes, and testing instructions.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main changes: adding two new UI components (StreamAvatarGroup and StreamBadgeCount) to the design system.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/avatar-group-and-badge-count

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Disable text scaling in `StreamAvatarGroup` and `StreamAvatarStack` to prevent text from overflowing when the system text scale factor is large.

Adds a new control to the gallery toolbar that allows toggling the text direction between LTR (Left-to-Right) and RTL (Right-to-Left). This helps in testing component layouts for different reading directions. The changes include: - A new `TextDirectionSelector` widget in the toolbar. - Updating the `PreviewConfiguration` to manage the text direction state. - Wrapping the preview content with a `Directionality` widget to apply the selected text direction.

codecov · 2026-02-02T12:38:23Z

Codecov Report

❌ Patch coverage is 4.12371% with 186 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (main-design-system@3acc381). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
...lib/src/components/avatar/stream_avatar_group.dart	0.00%	89 Missing ⚠️
...r/lib/src/components/badge/stream_badge_count.dart	0.00%	38 Missing ⚠️
...lib/src/components/avatar/stream_avatar_stack.dart	0.00%	26 Missing ⚠️
.../components/indicator/stream_online_indicator.dart	0.00%	17 Missing ⚠️
...src/theme/components/stream_badge_count_theme.dart	9.09%	10 Missing ⚠️
...utter/lib/src/components/avatar/stream_avatar.dart	0.00%	5 Missing ⚠️
...flutter/lib/src/theme/stream_theme_extensions.dart	0.00%	1 Missing ⚠️

❌ Your patch status has failed because the patch coverage (4.12%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files

@@                  Coverage Diff                  @@
##             main-design-system      #43   +/-   ##
=====================================================
  Coverage                      ?   42.02%           
=====================================================
  Files                         ?       77           
  Lines                         ?     1951           
  Branches                      ?        0           
=====================================================
  Hits                          ?      820           
  Misses                        ?     1131           
  Partials                      ?        0

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

xsahil03x · 2026-02-02T13:30:55Z

@coderabbitai review

coderabbitai · 2026-02-02T13:31:06Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In
`@packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_group.dart`:
- Around line 103-145: The build method in StreamAvatarGroup currently relies
only on an assert to ensure children is not empty (which is stripped in
release), so add a runtime guard at the top of build (before computing
colorScheme/size) to handle empty children; for example, if (children.isEmpty)
throw ArgumentError.value(children, 'children', 'StreamAvatarGroup must have at
least one child') or return a placeholder (e.g., SizedBox.shrink()) depending on
desired behavior—update the StreamAvatarGroup.build function to perform this
check so downstream calls to children.length / .first in _buildForOne,
_buildForTwo, _buildForThree, _buildForFour, and _buildForFourOrMore are safe in
release builds.

🧹 Nitpick comments (2)

apps/design_system_gallery/lib/semantics/typography.dart (1)

432-436: Consider deriving size labels from the theme to avoid drift.
The quick‑reference size string is manual; pulling sizes from textTheme.numeric* (fontSize) would keep it in sync automatically.

packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_stack.dart (1)

110-110: Consider using List<Widget> instead of Iterable<Widget>.

Using Iterable<Widget> and then calling .length (line 145) can be O(n) for lazy iterables, since the collection must be fully traversed. Given that this widget targets small avatar counts, the impact is minimal, but using List<Widget> would be more explicit about expectations and avoid redundant iteration.

packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_group.dart

packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_stack.dart

feat(ui): add avatar group and badge count

8736a46

xsahil03x requested a review from a team as a code owner February 2, 2026 11:33

xsahil03x added 5 commits February 2, 2026 17:08

chore: fix lints

309b942

chore: fix formatting

74be580

chore: disable text scaling in avatars

fd73701

Disable text scaling in `StreamAvatarGroup` and `StreamAvatarStack` to prevent text from overflowing when the system text scale factor is large.

chore: push leftover changes

4ca1f89

xsahil03x added 2 commits February 2, 2026 18:41

chore: Fix avatar group and badge borders

35f98ee

chore: add docs

1af504c

coderabbitai bot reviewed Feb 2, 2026

View reviewed changes

packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_group.dart Show resolved Hide resolved

chore: update accent success colors

51cd383

xsahil03x mentioned this pull request Feb 3, 2026

refactor(ui)!: Redesign Avatar components GetStream/stream-chat-flutter#2502

Open

fix: handle empty children in avatar group and stack

0f4faae

renefloor reviewed Feb 3, 2026

View reviewed changes

packages/stream_core_flutter/lib/src/components/avatar/stream_avatar_stack.dart Show resolved Hide resolved

renefloor approved these changes Feb 3, 2026

View reviewed changes

xsahil03x enabled auto-merge (squash) February 3, 2026 08:38

xsahil03x disabled auto-merge February 3, 2026 08:40

xsahil03x merged commit b4b8ae2 into main-design-system Feb 3, 2026
3 of 4 checks passed

xsahil03x deleted the feat/avatar-group-and-badge-count branch February 3, 2026 08:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): add StreamAvatarGroup and StreamBadgeCount #43

feat(ui): add StreamAvatarGroup and StreamBadgeCount #43

xsahil03x commented Feb 2, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Feb 2, 2026 •

edited

Loading

Review skipped

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

codecov bot commented Feb 2, 2026 •

edited

Loading

Uh oh!

xsahil03x commented Feb 2, 2026

Uh oh!

coderabbitai bot commented Feb 2, 2026

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(ui): add StreamAvatarGroup and StreamBadgeCount #43

feat(ui): add StreamAvatarGroup and StreamBadgeCount #43

Conversation

xsahil03x commented Feb 2, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

codecov bot commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

xsahil03x commented Feb 2, 2026

Uh oh!

coderabbitai bot commented Feb 2, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

xsahil03x commented Feb 2, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Feb 2, 2026 •

edited

Loading

codecov bot commented Feb 2, 2026 •

edited

Loading