Fix count badge sizing and add XS variant

[gpunto]

Goal

Fix count badge sizing and add XS variant

Implementation

Two changes for the count badge:

• In Update channel info styling, avatar xxl size and switch #6283 I mistakenly swapped the spacing for L & S
• While checking the designs, I also realized that there's an XS variant that we didn't have, so added that

Also update the avatar -> count badge mapping in light of the above

🎨 UI Changes

Here's an updated preview. For the avatar changes, please check the new snapshots

Testing

Check that badges are shown correctly, especially for group avatars (e.g. in channel list & message list)

Summary by CodeRabbit

• Style
  • Refined group avatar display by adjusting size relationships between avatars and count badges.
  • Added new count badge size variant for improved visual balance in various layouts.

[github-actions]

PR checklist ✅

All required conditions are satisfied:

• Title length is OK (or ignored by label).
• At least one pr: label exists.
• Sections ### Goal, ### Implementation, and ### Testing are filled.

🎉 Great job! This PR is ready for review.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

SDK Size Comparison 📏

SDK	Before	After	Difference	Status
stream-chat-android-client	5.25 MB	5.68 MB	0.43 MB	🟡
stream-chat-android-ui-components	10.60 MB	10.98 MB	0.38 MB	🟡
stream-chat-android-compose	12.81 MB	12.08 MB	-0.73 MB	🚀

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c56cc14a-bfff-4ffe-94fa-bfacdcb3ac4c

📥 Commits

Reviewing files that changed from the base of the PR and between 3caa040 and e68ea7a.

⛔ Files ignored due to path filters (4)

• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.channels_ChannelListTest_loaded_channels.png is excluded by !**/*.png
• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.channels_ChannelListTest_loading_more_channels.png is excluded by !**/*.png
• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.channels_SelectedChannelMenuTest_selected_channel.png is excluded by !**/*.png
• stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.channels_SelectedChannelMenuTest_selected_channel_in_dark_mode.png is excluded by !**/*.png

📒 Files selected for processing (2)

• stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/ChannelAvatar.kt
• stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/common/CountBadge.kt

---

Walkthrough

Avatar tier sizing mappings are adjusted to pair with different count badge sizes. Concurrently, a new ExtraSmall count badge size is introduced, and styling properties for existing badge sizes (Large, Medium, Small) are updated with new spacing and typography values.

Changes

Cohort / File(s)	Summary
Avatar Tier Sizing Configuration stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/ChannelAvatar.kt	Updated XL preset to pair AvatarSize.Medium with CountBadgeSize.Small (previously Medium); updated L preset to pair AvatarSize.Small with CountBadgeSize.ExtraSmall (previously Small).
Count Badge Size Variants stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/common/CountBadge.kt	Added new ExtraSmall variant with minSize = 20.dp, spacing = StreamTokens.spacing2xs, and textStyle = numericMedium. Updated existing sizes: Large now uses spacingSm and numericExtraLarge; Medium now uses numericExtraLarge; Small now uses spacingXs and numericExtraLarge. Updated entries list to include ExtraSmall.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Badge sizes dance in harmony,
Extra small joins the family,
Avatars shift their tier so neat,
Typography and spacing sweet! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: fixing count badge sizing and adding an XS variant, which aligns with both files modified.
Description check	✅ Passed	The description provides a clear goal, implementation details, and UI changes with a screenshot, but lacks sections for Testing details, Contributor Checklist, and Reviewer Checklist as specified in the template.
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 docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/count-badge-sizes

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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