Introduce new Avatar designs #6089
Conversation
gpunto
force-pushed
the
redesign/avatar
branch
2 times, most recently
from
acc1122 to
bc933aa
Compare
| </value> | ||
| </option> | ||
| </AndroidXmlCodeStyleSettings> | ||
| <JavaCodeStyleSettings> |
There was a problem hiding this comment.
Updating this since Android Studio wants to set this style now.
I'm still not convinced we should have this file committed. I understand is to have a shared code style, but we have Spotless anyway for enforcing that.
| import io.getstream.chat.android.ui.common.utils.extensions.initials | ||
|
|
||
| @Composable | ||
| internal fun Avatar( |
There was a problem hiding this comment.
At the moment the various avatar implementations are all in this file to avoid conflicting with the existing ones. I'll move them in the follow up PR when replace old with new implementation.
|
|
||
| import io.getstream.chat.android.core.internal.InternalStreamChatApi | ||
|
|
||
| internal fun String.initials(): String { |
There was a problem hiding this comment.
Optimization to do it in O(N) time and avoid the various allocations the previous impl was doing, especially given that this is called at rendering time.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
WalkthroughIntroduces a new unified design token system (StreamTokens) consolidating radii and spacing, expands the theme with semantic color properties for buttons, state, presence, and avatars, adds internal avatar UI components with placeholders and online indicators, extends typography with emphasis styles, and updates utilities and resources. Changes
Sequence DiagramsequenceDiagram
participant App as App/Composable
participant Avatar as Avatar<br/>(Composable)
participant Theme as ChatTheme
participant Colors as StreamColors
participant Placeholder as AvatarPlaceholder<br/>Utility
participant Indicator as OnlineIndicator<br/>(Composable)
App->>Avatar: Render Avatar(user)
Avatar->>Theme: Retrieve Colors & Typography
Avatar->>Colors: Access colors<br/>(accentSuccess, accentNeutral)
alt User has imageUrl
Avatar->>Avatar: Load & display image<br/>with Crossfade
else No image
Avatar->>Placeholder: Generate placeholder colors<br/>& initials
Placeholder->>Colors: Get avatarPaletteBg/Text<br/>by identifier
Placeholder-->>Avatar: Return (bgColor, textColor)
Avatar->>Avatar: Render initials<br/>with placeholder styling
end
Avatar->>Indicator: Show OnlineIndicator<br/>(if enabled)
Indicator->>Colors: Get presenceBgOnline/Offline
Indicator-->>Avatar: Render status badge
Avatar-->>App: Display final Avatar UI
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/AvatarPlaceholderUtils.kt`:
- Around line 26-40: The placeholder colors are stale because
rememberAvatarPlaceholderColors uses remember keyed only by identifier and
suppresses magic numbers; update it to include ChatTheme.colors in the remember
key (e.g., remember(identifier, ChatTheme.colors)) so theme changes invalidate
the cache, and replace the hardcoded when/number logic with a palette list
(List<Pair<Color,Color>>) (use identifier.hashCode().absoluteValue %
palette.size to pick the entry) so you can remove `@Suppress`("MagicNumber") and
avoid magic numbers.
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/AvatarStack.kt`:
- Around line 61-69: The preview function AvatarStackPreview currently uses the
standard `@Preview`; replace that with the project's StreamPreview helper
annotation to follow guidelines: update the annotation on AvatarStackPreview to
`@StreamPreview` and keep the composable signature and body (users list, ChatTheme
and call to UserAvatarStack(overlap = 16.dp, users = users, size =
AvatarSize.Md)) unchanged so the preview behavior remains identical while
conforming to StreamPreview usage.
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt`:
- Around line 118-165: StreamColors KDoc is missing `@param` entries for the new
design-system color properties; update the StreamColors class KDoc to add `@param`
documentation for each new public parameter (accentError, accentNeutral,
accentSuccess, accentPrimary, avatarPaletteBg1..avatarPaletteBg5,
avatarPaletteText1..avatarPaletteText5, borderCoreImage, borderCoreOnDark,
borderCoreSurfaceSubtle, borderCorePrimary, textPrimary, stateBgDisabled,
stateTextDisabled, buttonStyleGhostBg, buttonStyleGhostBorder,
buttonStyleGhostTextPrimary, buttonStyleGhostTextSecondary,
buttonStyleOutlineBg, buttonStyleOutlineBorder, buttonStyleOutlineText,
buttonTypeDestructiveBg, buttonTypeDestructiveBorder, buttonTypeDestructiveText,
buttonTypeDestructiveTextInverse, buttonTypePrimaryBg,
buttonTypePrimaryBgDisabled, buttonTypePrimaryBorder, buttonTypePrimaryText,
buttonTypePrimaryTextDisabled, buttonTypeSecondaryTextDisabled, chatBgIncoming,
chatBgOutgoing, controlRemoveBg, controlRemoveBorder, controlRemoveIcon,
presenceBgOnline, presenceBgOffline, presenceBorder) describing purpose and
expected usage; ensure the KDoc sits above the StreamColors class declaration
(not as inline comments) and follows existing `@param` style/format used by other
documented parameters.
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamTypography.kt`:
- Around line 58-61: The class KDoc for StreamTypography is missing
documentation for the new public fields bodyEmphasis, captionEmphasis, and
metadataEmphasis; update the class-level KDoc parameter list to include brief
descriptions for each of these TextStyle properties (explain their intended
use/semantics and any distinctions between them), ensuring the param names match
exactly (bodyEmphasis, captionEmphasis, metadataEmphasis) and follow the
project's KDoc style for public API docs.
- Around line 145-159: The new emphasis TextStyles (bodyEmphasis,
captionEmphasis, metadataEmphasis) are missing the provided fontFamily and thus
ignore overrides; update each TextStyle in StreamTypography (the emphasis
entries shown) to include the fontFamily parameter passed into defaultTypography
(or the surrounding function/class that provides fontFamily) so the created
TextStyle sets fontFamily = fontFamily, preserving app-provided fonts and
consistent typography.
🧹 Nitpick comments (6)
.idea/codeStyles/Project.xml (1)
20-53: Ensure Java import layout aligns with any Spotless Java configuration if applicable.The import layout configuration is valid and follows a sensible ordering (static imports first, grouped together; non-static imports separated by package group). Since the project uses Spotless for code style enforcement (per repository learnings), verify that this IDE configuration doesn't conflict with Spotless rules if Java files are also formatted by Spotless—otherwise developers may see constant reformatting on save vs. build.
The trailing
<emptyLine />on line 50 will add a blank line after the final import group, which is typically fine but worth confirming matches team preference.stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/ComposerLinkPreview.kt (1)
217-223: Consider using@StreamPreviewhelper for the preview.Per coding guidelines, Compose previews should use
@StreamPreviewhelpers instead of the standard@Previewannotation.stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/StreamAvatar.kt (3)
153-181: Redundant modifiers on the Icon.The
Iconat lines 171-178 re-applies.background(background)and receives the outermodifierparameter, while its parentBoxalready sets the background and size. This is redundant and could cause visual issues if the passedmodifiercontains conflicting sizing/background.♻️ Suggested fix
} else { Icon( painter = painterResource(R.drawable.stream_compose_ic_user), contentDescription = null, tint = foreground, - modifier = modifier - .background(background) - .size(size.toPlaceholderIconSize()), + modifier = Modifier.size(size.toPlaceholderIconSize()), ) }
183-202: Same redundancy inChannelAvatarPlaceholder.The
Iconmodifier re-applies.background(background)and the outermodifier, while the parentBoxalready handles background and sizing.♻️ Suggested fix
Box( modifier .background(background) .size(size.value), contentAlignment = Alignment.Center, ) { Icon( painter = painterResource(R.drawable.stream_compose_ic_team), contentDescription = null, tint = foreground, - modifier = modifier - .background(background) - .size(size.toPlaceholderIconSize()), + modifier = Modifier.size(size.toPlaceholderIconSize()), ) }
218-259: Consider using@StreamPreviewhelper for the preview.Per coding guidelines, Compose previews should use
@StreamPreviewhelpers instead of the standard@Previewannotation.stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt (1)
174-176: Avoid@Suppress("LongMethod")unless it’s justified in the code.Please either extract parts of the builders or add a short rationale comment near the suppression. As per coding guidelines, avoid suppressions unless documented.
Also applies to: 248-250
...c/main/java/io/getstream/chat/android/compose/ui/components/avatar/AvatarPlaceholderUtils.kt
Show resolved
Hide resolved
...-compose/src/main/java/io/getstream/chat/android/compose/ui/components/avatar/AvatarStack.kt
Show resolved
Hide resolved
...hat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamColors.kt
Show resolved
Hide resolved
...android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamTypography.kt
Outdated
Show resolved
Hide resolved
...android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/StreamTypography.kt
Show resolved
Hide resolved
SDK Size Comparison 📏
|
gpunto
force-pushed
the
redesign/avatar
branch
3 times, most recently
from
8fde498 to
653cac1
Compare
gpunto
force-pushed
the
redesign/avatar
branch
6 times, most recently
from
d2bedd9 to
1ff939c
Compare
|
gpunto
force-pushed
the
redesign/avatar
branch
from
1ff939c to
51f31b0
Compare
🎯 Goal
Redesigns the avatar components
🛠 Implementation details
Note: this PR only introduces the components. I'll replace the old ones in a follow up PR.
Introduce new:
AvatarUserAvatar+ placeholderChannelAvatar+ placeholdeAvatarStack&UserAvatarStack🎨 UI Changes
Figma
🧪 Testing
Not visible in the sample yet, since they're not used, but you can run the compose preview.
☑️Contributor Checklist
General
Code & documentation
☑️Reviewer Checklist
🎉 GIF
Please provide a suitable gif that describes your work on this pull request
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.