Skip to content

Update file picker UI and refactor radio controls #6216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andremion merged 7 commits into from
Mar 10, 2026
Merged

Update file picker UI and refactor radio controls #6216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ef0114d
Update `StreamDesign` colors for radio and check controls
andremion Mar 6, 2026
db9f464
Add `RadioButton` component and refactor `RadioCheck` to use `RadioCo…
andremion Mar 6, 2026
cbcb401
Use `RadioButton` for single selection in `FilesPicker`
andremion Mar 6, 2026
8919358
Update UI of file picker components
andremion Mar 6, 2026
a629d27
Update `StreamHorizontalDivider` thickness and refresh snapshots
andremion Mar 6, 2026
80145fd
Remove unnecessary contentDescription
andremion Mar 10, 2026
6e4c571
Fix e2e tests
andremion Mar 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions stream-chat-android-compose/api/stream-chat-android-compose.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1426,11 +1426,9 @@ public final class io/getstream/chat/android/compose/ui/components/attachments/f
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/attachments/files/ComposableSingletons$FilesPickerKt;
public static field lambda-1 Lkotlin/jvm/functions/Function2;
public static field lambda-2 Lkotlin/jvm/functions/Function2;
public static field lambda-3 Lkotlin/jvm/functions/Function2;
public fun <init> ()V
public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-2$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-3$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/components/attachments/files/FilesPickerItemImageKt {
Expand Down Expand Up @@ -1602,11 +1600,17 @@ public final class io/getstream/chat/android/compose/ui/components/common/Compos
public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/components/common/ComposableSingletons$RadioCheckKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/common/ComposableSingletons$RadioCheckKt;
public final class io/getstream/chat/android/compose/ui/components/common/ComposableSingletons$RadioControlsKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/common/ComposableSingletons$RadioControlsKt;
public static field lambda-1 Lkotlin/jvm/functions/Function2;
public static field lambda-2 Lkotlin/jvm/functions/Function2;
public static field lambda-3 Lkotlin/jvm/functions/Function2;
public static field lambda-4 Lkotlin/jvm/functions/Function2;
public fun <init> ()V
public final fun getLambda-1$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-2$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-3$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-4$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/components/common/MenuOptionItemKt {
Expand Down Expand Up @@ -3587,8 +3591,8 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign {
public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Colors {
public static final field $stable I
public static final field Companion Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors$Companion;
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIILkotlin/jvm/internal/DefaultConstructorMarker;)V
public synthetic fun <init> (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJLkotlin/jvm/internal/DefaultConstructorMarker;)V
Comment thread
andremion marked this conversation as resolved.
public final fun component1-0d7_KjU ()J
public final fun component10-0d7_KjU ()J
public final fun component11-0d7_KjU ()J
Expand Down Expand Up @@ -3661,12 +3665,10 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Color
public final fun component72-0d7_KjU ()J
public final fun component73-0d7_KjU ()J
public final fun component74-0d7_KjU ()J
public final fun component75-0d7_KjU ()J
public final fun component76-0d7_KjU ()J
public final fun component8-0d7_KjU ()J
public final fun component9-0d7_KjU ()J
public final fun copy-UuUHjgE (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;
public static synthetic fun copy-UuUHjgE$default (Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;
public final fun copy-PluTXJ0 (JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ)Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;
public static synthetic fun copy-PluTXJ0$default (Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJIIILjava/lang/Object;)Lio/getstream/chat/android/compose/ui/theme/StreamDesign$Colors;
public fun equals (Ljava/lang/Object;)Z
public final fun getAccentBlack-0d7_KjU ()J
public final fun getAccentError-0d7_KjU ()J
Expand Down Expand Up @@ -3786,6 +3788,7 @@ public final class io/getstream/chat/android/compose/ui/theme/StreamDesign$Color
public final fun getControlPlaybackToggleText-0d7_KjU ()J
public final fun getControlProgressBarFill-0d7_KjU ()J
public final fun getControlProgressBarTrack-0d7_KjU ()J
public final fun getControlRadioButtonIndicator-0d7_KjU ()J
public final fun getControlRadioCheckBg-0d7_KjU ()J
public final fun getControlRadioCheckBgSelected-0d7_KjU ()J
public final fun getControlRadioCheckBorder-0d7_KjU ()J
Expand Down
2 changes: 1 addition & 1 deletion .../src/main/java/io/getstream/chat/android/compose/ui/components/StreamHorizontalDivider.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import androidx.compose.ui.unit.dp
import io.getstream.chat.android.compose.ui.theme.ChatTheme

@Composable
internal fun StreamHorizontalDivider(thickness: Dp = .5.dp) {
internal fun StreamHorizontalDivider(thickness: Dp = 1.dp) {
HorizontalDivider(
thickness = thickness,
color = ChatTheme.colors.borderCoreSubtle,
Expand Down
53 changes: 30 additions & 23 deletions ...ain/java/io/getstream/chat/android/compose/ui/components/attachments/files/FilesPicker.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,12 @@ import androidx.activity.compose.rememberLauncherForActivityResult
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
Expand All @@ -40,6 +38,8 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.getstream.chat.android.compose.R
import io.getstream.chat.android.compose.state.messages.attachments.AttachmentPickerItemState
import io.getstream.chat.android.compose.ui.components.StreamHorizontalDivider
import io.getstream.chat.android.compose.ui.components.common.RadioButton
import io.getstream.chat.android.compose.ui.components.common.RadioCheck
import io.getstream.chat.android.compose.ui.theme.ChatTheme
import io.getstream.chat.android.compose.ui.theme.StreamTokens
Expand Down Expand Up @@ -83,29 +83,29 @@ public fun FilesPicker(
}

Column(modifier = modifier) {
Row(Modifier.fillMaxWidth()) {
Row(
modifier = Modifier
.testTag("Stream_FindFilesButton")
.fillMaxWidth()
.clickable { fileSelectContract.launch(allowMultipleSelection) }
.padding(StreamTokens.spacingSm),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
) {
Text(
modifier = Modifier.padding(StreamTokens.spacingMd),
text = stringResource(id = R.string.stream_compose_recent_files),
style = ChatTheme.typography.bodyEmphasis,
style = ChatTheme.typography.bodyDefault,
color = ChatTheme.colors.textPrimary,
)

Spacer(modifier = Modifier.weight(6f))

IconButton(
content = {
Icon(
modifier = Modifier.testTag("Stream_FindFilesButton"),
painter = painterResource(id = R.drawable.stream_compose_ic_more_files),
contentDescription = stringResource(id = R.string.stream_compose_send_attachment),
tint = ChatTheme.colors.accentPrimary,
)
},
onClick = { fileSelectContract.launch(allowMultipleSelection) },
Icon(
painter = painterResource(id = R.drawable.stream_compose_ic_chevron_right),
contentDescription = null,
tint = ChatTheme.colors.textSecondary,
Comment thread
andremion marked this conversation as resolved.
)
}

StreamHorizontalDivider()

LazyColumn(modifier) {
items(files) { fileItem -> itemContent(fileItem) }
}
Expand Down Expand Up @@ -142,7 +142,7 @@ internal fun DefaultFilesPickerItem(
Column(
modifier = Modifier.weight(1f),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.Center,
verticalArrangement = Arrangement.spacedBy(StreamTokens.spacing2xs),
) {
Text(
text = fileItem.attachmentMetaData.title ?: "",
Expand All @@ -156,10 +156,17 @@ internal fun DefaultFilesPickerItem(
)
}

RadioCheck(
checked = fileItem.isSelected,
onCheckedChange = null,
)
if (allowMultipleSelection) {
RadioCheck(
checked = fileItem.isSelected,
onCheckedChange = null,
)
} else {
RadioButton(
checked = fileItem.isSelected,
onCheckedChange = null,
)
}
}
}

Expand Down
75 changes: 65 additions & 10 deletions ...ompose/ui/components/common/RadioCheck.kt → ...ose/ui/components/common/RadioControls.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,59 @@ import io.getstream.chat.android.compose.ui.theme.ChatTheme
import io.getstream.chat.android.compose.ui.util.clickable
import io.getstream.chat.android.compose.ui.util.ifNotNull

@Composable
internal fun RadioButton(
checked: Boolean,
onCheckedChange: ((Boolean) -> Unit)?,
modifier: Modifier = Modifier,
enabled: Boolean = true,
) {
RadioControlBase(
checked = checked,
onCheckedChange = onCheckedChange,
modifier = modifier,
enabled = enabled,
) {
Box(
modifier = Modifier
.size(10.dp)
.background(ChatTheme.colors.controlRadioButtonIndicator, CircleShape),
)
}
}

@Composable
internal fun RadioCheck(
checked: Boolean,
onCheckedChange: ((Boolean) -> Unit)?,
modifier: Modifier = Modifier,
borderColor: Color = ChatTheme.colors.controlRadioCheckBorder,
enabled: Boolean = true,
) {
RadioControlBase(
checked = checked,
onCheckedChange = onCheckedChange,
modifier = modifier,
borderColor = borderColor,
enabled = enabled,
) {
Icon(
modifier = Modifier.size(12.dp),
painter = painterResource(R.drawable.stream_compose_ic_checkmark),
tint = ChatTheme.colors.controlRadioCheckIconSelected,
contentDescription = null,
)
}
}

@Composable
private fun RadioControlBase(
checked: Boolean,
onCheckedChange: ((Boolean) -> Unit)?,
modifier: Modifier = Modifier,
borderColor: Color = ChatTheme.colors.controlRadioCheckBorder,
enabled: Boolean = true,
content: @Composable () -> Unit,
) {
val colors = ChatTheme.colors
Box(
Expand All @@ -57,24 +103,33 @@ internal fun RadioCheck(
else -> background(colors.backgroundCoreDisabled, CircleShape)
}
}
.ifNotNull(onCheckedChange) { onCheckedChange ->
.ifNotNull(onCheckedChange) { onChange ->
clickable(
enabled = enabled,
bounded = false,
onClick = { onCheckedChange(!checked) },
onClick = { onChange(!checked) },
)
},
contentAlignment = Alignment.Center,
) {
if (checked) {
Icon(
modifier = Modifier
.align(Alignment.Center)
.size(12.dp),
painter = painterResource(R.drawable.stream_compose_ic_checkmark),
tint = colors.controlRadioCheckIconSelected,
contentDescription = null,
)
content()
}
}
}

@Preview
@Composable
private fun RadioButtonPreview() {
ChatTheme {
Row(
Modifier.padding(16.dp),
horizontalArrangement = Arrangement.spacedBy(16.dp),
) {
RadioButton(checked = false, enabled = true, onCheckedChange = {})
RadioButton(checked = true, enabled = true, onCheckedChange = {})
RadioButton(checked = false, enabled = false, onCheckedChange = {})
RadioButton(checked = true, enabled = false, onCheckedChange = {})
}
}
}
Expand Down
Loading
Loading