Skip to content

Commit 75cafde

Browse files
andremionandremion
authored
Restyle unread divider and extract shared MessagesStripDivider (#6417)
Adopt the new strip design for the unread separator: full-width banner with backgroundCoreSurfaceSubtle fill, top/bottom borderCoreSubtle, metadataEmphasis text, and an inline %d count. Pull the shared strip layout into MessagesStripDivider, used by both the unread and the thread-replies separators. Rename the existing MessageDivider (pill) to MessagesDateDivider so the codebase tracks the Figma vocabulary. Normalize the thread separator's testTag to mergeDescendants semantics, matching the unread and date wrappers. Add Paparazzi coverage: per-component MessagesDateDividerTest and MessagesStripDividerTest, plus list-level cases for the unread separator on screen and a thread-mode separator (previously zero coverage).
1 parent db25173 commit 75cafde

21 files changed

Lines changed: 269 additions & 51 deletions

‎stream-chat-android-compose/api/stream-chat-android-compose.api‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2081,25 +2081,33 @@ public final class io/getstream/chat/android/compose/ui/messages/header/Composab
20812081
public final fun getLambda$957576860$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
20822082
}
20832083

2084-
public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessageDividerKt {
2085-
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessageDividerKt;
2086-
public fun <init> ()V
2087-
public final fun getLambda$112548111$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
2088-
}
2089-
20902084
public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessageItemKt {
20912085
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessageItemKt;
20922086
public fun <init> ()V
20932087
public final fun getLambda$-1743229499$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
20942088
public final fun getLambda$1362745058$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
20952089
}
20962090

2091+
public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesDateDividerKt {
2092+
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesDateDividerKt;
2093+
public fun <init> ()V
2094+
public final fun getLambda$-1504635216$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
2095+
public final fun getLambda$1340569822$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
2096+
}
2097+
20972098
public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesKt {
20982099
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesKt;
20992100
public fun <init> ()V
21002101
public final fun getLambda$203042131$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
21012102
}
21022103

2104+
public final class io/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesStripDividerKt {
2105+
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/messages/list/ComposableSingletons$MessagesStripDividerKt;
2106+
public fun <init> ()V
2107+
public final fun getLambda$-1884807062$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
2108+
public final fun getLambda$228610811$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
2109+
}
2110+
21032111
public final class io/getstream/chat/android/compose/ui/messages/list/MessageContainerKt {
21042112
public static final field HighlightFadeOutDurationMillis I
21052113
public static final fun DefaultMessageContent (Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/ui/common/state/messages/list/MessageItemState;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function2;Landroidx/compose/runtime/Composer;III)V

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageItem.kt‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,6 @@ import io.getstream.chat.android.compose.ui.theme.MessageListTypingIndicatorItem
6868
import io.getstream.chat.android.compose.ui.theme.MessageListUnreadSeparatorItemContentParams
6969
import io.getstream.chat.android.compose.ui.theme.MessageStyling
7070
import io.getstream.chat.android.compose.ui.theme.StreamTokens
71-
import io.getstream.chat.android.compose.ui.util.bottomBorder
72-
import io.getstream.chat.android.compose.ui.util.topBorder
7371
import io.getstream.chat.android.models.Message
7472
import io.getstream.chat.android.models.Option
7573
import io.getstream.chat.android.models.Poll
@@ -217,7 +215,7 @@ public fun LazyItemScope.MessageItem(
217215
*/
218216
@Composable
219217
internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorItemState) {
220-
MessageDivider(
218+
MessagesDateDivider(
221219
text = ChatTheme.dateFormatter.formatRelativeDate(dateSeparator.date),
222220
modifier = Modifier
223221
.semantics(mergeDescendants = true) {
@@ -235,14 +233,14 @@ internal fun DefaultMessageDateSeparatorContent(dateSeparator: DateSeparatorItem
235233
*/
236234
@Composable
237235
internal fun DefaultMessageUnreadSeparatorContent(unreadSeparatorItemState: UnreadSeparatorItemState) {
238-
MessageDivider(
239-
text = stringResource(R.string.stream_compose_message_list_unread_separator),
240-
modifier = Modifier
241-
.semantics(mergeDescendants = true) {
242-
testTag = "Stream_UnreadMessagesBadge"
243-
}
244-
.padding(vertical = StreamTokens.spacingXs)
245-
.fillMaxWidth(),
236+
MessagesStripDivider(
237+
modifier = Modifier.semantics(mergeDescendants = true) {
238+
testTag = "Stream_UnreadMessagesBadge"
239+
},
240+
text = stringResource(
241+
R.string.stream_compose_message_list_unread_separator,
242+
unreadSeparatorItemState.unreadCount,
243+
),
246244
)
247245
}
248246

@@ -255,25 +253,15 @@ internal fun DefaultMessageUnreadSeparatorContent(unreadSeparatorItemState: Unre
255253
@Composable
256254
internal fun DefaultMessageThreadSeparatorContent(threadSeparator: ThreadDateSeparatorItemState) {
257255
val replyCount = threadSeparator.replyCount
258-
val colors = ChatTheme.colors
259-
260-
Text(
261-
modifier = Modifier
262-
.padding(vertical = StreamTokens.spacingXs)
263-
.topBorder(colors.borderCoreSubtle)
264-
.bottomBorder(colors.borderCoreSubtle)
265-
.fillMaxWidth()
266-
.background(colors.backgroundCoreSurfaceSubtle)
267-
.padding(horizontal = StreamTokens.spacingMd, vertical = StreamTokens.spacingXs)
268-
.testTag("Stream_RepliesCount"),
256+
MessagesStripDivider(
257+
modifier = Modifier.semantics(mergeDescendants = true) {
258+
testTag = "Stream_RepliesCount"
259+
},
269260
text = pluralStringResource(
270261
R.plurals.stream_compose_message_list_thread_separator,
271262
replyCount,
272263
replyCount,
273264
),
274-
color = colors.chatTextSystem,
275-
style = ChatTheme.typography.metadataEmphasis,
276-
textAlign = TextAlign.Center,
277265
)
278266
}
279267

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessageDivider.kt renamed to stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessagesDateDivider.kt

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@
1717
package io.getstream.chat.android.compose.ui.messages.list
1818

1919
import androidx.compose.foundation.background
20-
import androidx.compose.foundation.layout.Arrangement
2120
import androidx.compose.foundation.layout.Box
22-
import androidx.compose.foundation.layout.Column
2321
import androidx.compose.foundation.layout.padding
2422
import androidx.compose.foundation.shape.CircleShape
2523
import androidx.compose.material3.Text
@@ -31,7 +29,7 @@ import io.getstream.chat.android.compose.ui.theme.ChatTheme
3129
import io.getstream.chat.android.compose.ui.theme.StreamTokens
3230

3331
@Composable
34-
internal fun MessageDivider(text: String, modifier: Modifier = Modifier) {
32+
internal fun MessagesDateDivider(text: String, modifier: Modifier = Modifier) {
3533
val colors = ChatTheme.colors
3634

3735
Box(modifier, contentAlignment = Alignment.Center) {
@@ -48,15 +46,26 @@ internal fun MessageDivider(text: String, modifier: Modifier = Modifier) {
4846

4947
@Preview
5048
@Composable
51-
private fun MessageDividerPreview() {
49+
private fun MessagesDateDividerTodayPreview() {
5250
ChatTheme {
53-
Column(
54-
horizontalAlignment = Alignment.CenterHorizontally,
55-
verticalArrangement = Arrangement.spacedBy(StreamTokens.spacingXs),
56-
) {
57-
MessageDivider("Unread messages")
58-
MessageDivider("Today")
59-
MessageDivider("Tue, 25 Dec")
60-
}
51+
MessagesDateDividerToday()
6152
}
6253
}
54+
55+
@Composable
56+
internal fun MessagesDateDividerToday() {
57+
MessagesDateDivider(text = "Today")
58+
}
59+
60+
@Preview
61+
@Composable
62+
private fun MessagesDateDividerAbsoluteDatePreview() {
63+
ChatTheme {
64+
MessagesDateDividerAbsoluteDate()
65+
}
66+
}
67+
68+
@Composable
69+
internal fun MessagesDateDividerAbsoluteDate() {
70+
MessagesDateDivider(text = "Tue, 25 Dec")
71+
}

‎stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/list/MessagesStripDivider.kt‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/*
2+
* Copyright (c) 2014-2026 Stream.io Inc. All rights reserved.
3+
*
4+
* Licensed under the Stream License;
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://github.com/GetStream/stream-chat-android/blob/main/LICENSE
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
package io.getstream.chat.android.compose.ui.messages.list
18+
19+
import androidx.compose.foundation.background
20+
import androidx.compose.foundation.layout.fillMaxWidth
21+
import androidx.compose.foundation.layout.padding
22+
import androidx.compose.material3.Text
23+
import androidx.compose.runtime.Composable
24+
import androidx.compose.ui.Modifier
25+
import androidx.compose.ui.text.style.TextAlign
26+
import androidx.compose.ui.tooling.preview.Preview
27+
import io.getstream.chat.android.compose.ui.theme.ChatTheme
28+
import io.getstream.chat.android.compose.ui.theme.StreamTokens
29+
import io.getstream.chat.android.compose.ui.util.bottomBorder
30+
import io.getstream.chat.android.compose.ui.util.topBorder
31+
32+
@Composable
33+
internal fun MessagesStripDivider(text: String, modifier: Modifier = Modifier) {
34+
val colors = ChatTheme.colors
35+
Text(
36+
modifier = modifier
37+
.padding(vertical = StreamTokens.spacingXs)
38+
.topBorder(colors.borderCoreSubtle)
39+
.bottomBorder(colors.borderCoreSubtle)
40+
.fillMaxWidth()
41+
.background(colors.backgroundCoreSurfaceSubtle)
42+
.padding(horizontal = StreamTokens.spacingMd, vertical = StreamTokens.spacingXs),
43+
text = text,
44+
color = colors.chatTextSystem,
45+
style = ChatTheme.typography.metadataEmphasis,
46+
textAlign = TextAlign.Center,
47+
)
48+
}
49+
50+
@Preview
51+
@Composable
52+
private fun MessagesStripDividerUnreadPreview() {
53+
ChatTheme {
54+
MessagesStripDividerUnread()
55+
}
56+
}
57+
58+
@Composable
59+
internal fun MessagesStripDividerUnread() {
60+
MessagesStripDivider(text = "9 unread messages")
61+
}
62+
63+
@Preview
64+
@Composable
65+
private fun MessagesStripDividerRepliesPreview() {
66+
ChatTheme {
67+
MessagesStripDividerReplies()
68+
}
69+
}
70+
71+
@Composable
72+
internal fun MessagesStripDividerReplies() {
73+
MessagesStripDivider(text = "5 replies")
74+
}

‎stream-chat-android-compose/src/main/res/values-es/strings.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133
<string name="stream_compose_message_list_show_translation">"Mostrar traducción"</string>
134134
<string name="stream_compose_message_list_thread_footnote_thread_replies">"%d respuestas"</string>
135135
<string name="stream_compose_message_list_thread_footnote_thread_reply">"%d respuesta"</string>
136-
<string name="stream_compose_message_list_unread_separator">"Mensajes no leídos"</string>
136+
<string name="stream_compose_message_list_unread_separator">"%d mensajes no leídos"</string>
137137
<string name="stream_compose_message_list_unsupported_attachment">"Archivo adjunto no compatible"</string>
138138
<string name="stream_compose_message_list_view">"Ver"</string>
139139
<string name="stream_compose_message_list_view_original">"Ver original"</string>

‎stream-chat-android-compose/src/main/res/values-fr/strings.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133
<string name="stream_compose_message_list_show_translation">"Afficher la traduction"</string>
134134
<string name="stream_compose_message_list_thread_footnote_thread_replies">"%d réponses"</string>
135135
<string name="stream_compose_message_list_thread_footnote_thread_reply">"%d réponse"</string>
136-
<string name="stream_compose_message_list_unread_separator">"Messages non lus"</string>
136+
<string name="stream_compose_message_list_unread_separator">"%d messages non lus"</string>
137137
<string name="stream_compose_message_list_unsupported_attachment">"Pièce jointe non prise en charge"</string>
138138
<string name="stream_compose_message_list_view">"Voir"</string>
139139
<string name="stream_compose_message_list_view_original">"Voir l\'original"</string>

‎stream-chat-android-compose/src/main/res/values-hi/strings.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,8 +189,8 @@
189189
<string name="stream_compose_message_list_show_translation">"अनुवाद दिखाएँ"</string>
190190
<string name="stream_compose_message_list_thread_footnote_thread_replies">"%d जवाब"</string>
191191
<string name="stream_compose_message_list_thread_footnote_thread_reply">"%d जवाब"</string>
192+
<string name="stream_compose_message_list_unread_separator">"%d अपठित मैसेज"</string>
192193
<string name="stream_compose_message_list_unsupported_attachment">"असमर्थित अटैचमेंट"</string>
193-
<string name="stream_compose_message_list_unread_separator">"अपठित मैसेज"</string>
194194
<string name="stream_compose_message_list_view">"देखें"</string>
195195
<string name="stream_compose_message_list_view_original">"मूल देखें"</string>
196196
<string name="stream_compose_message_list_you">"आप"</string>

‎stream-chat-android-compose/src/main/res/values-in/strings.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133
<string name="stream_compose_message_list_show_translation">"Tampilkan terjemahan"</string>
134134
<string name="stream_compose_message_list_thread_footnote_thread_replies">"%d balasan"</string>
135135
<string name="stream_compose_message_list_thread_footnote_thread_reply">"%d balasan"</string>
136-
<string name="stream_compose_message_list_unread_separator">"Pesan Belum Dibaca"</string>
136+
<string name="stream_compose_message_list_unread_separator">"%d pesan belum dibaca"</string>
137137
<string name="stream_compose_message_list_unsupported_attachment">"Lampiran tidak didukung"</string>
138138
<string name="stream_compose_message_list_view">"Lihat"</string>
139139
<string name="stream_compose_message_list_view_original">"Lihat aslinya"</string>

‎stream-chat-android-compose/src/main/res/values-it/strings.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,8 +189,8 @@
189189
<string name="stream_compose_message_list_show_translation">"Mostra traduzione"</string>
190190
<string name="stream_compose_message_list_thread_footnote_thread_replies">"%d risposte"</string>
191191
<string name="stream_compose_message_list_thread_footnote_thread_reply">"%d risposta"</string>
192+
<string name="stream_compose_message_list_unread_separator">"%d messaggi non letti"</string>
192193
<string name="stream_compose_message_list_unsupported_attachment">"Allegato non supportato"</string>
193-
<string name="stream_compose_message_list_unread_separator">"Messaggi non letti"</string>
194194
<string name="stream_compose_message_list_view">"Visualizza"</string>
195195
<string name="stream_compose_message_list_view_original">"Vedi originale"</string>
196196
<string name="stream_compose_message_list_you">"Tu"</string>

‎stream-chat-android-compose/src/main/res/values-ja/strings.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@
144144
<plurals name="stream_compose_message_list_thread_separator">
145145
<item quantity="other">"%d件の返信"</item>
146146
</plurals>
147-
<string name="stream_compose_message_list_unread_separator">"未読メッセージ"</string>
147+
<string name="stream_compose_message_list_unread_separator">"%d件の未読メッセージ"</string>
148148
<string name="stream_compose_message_list_unsupported_attachment">"サポートされていない添付ファイル"</string>
149149
<string name="stream_compose_message_list_view">"表示"</string>
150150
<string name="stream_compose_message_list_view_original">"原文を表示"</string>

0 commit comments

Comments
 (0)