Skip to content

Align modal bottom sheets with Figma #6480

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

Draft
andremion wants to merge 9 commits into
base: develop
Choose a base branch
from
Draft

Align modal bottom sheets with Figma #6480

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a8be07d
Unify ModalBottomSheet usage behind Stream wrappers
andremion May 29, 2026
46e5480
Introduce ChannelActionsSheet
andremion May 29, 2026
bb0d084
Move default channel menu header next to ChannelActionsSheet
andremion May 29, 2026
d097df7
Make sheet previews and Paparazzi snapshots render
andremion May 29, 2026
bdac541
Drop redundant top padding from member info sheet header
andremion May 29, 2026
52de98d
Move ReactionsMenu preview/snapshot to sheet level
andremion May 29, 2026
f65c424
Add ChannelActionsSheet sample coverage parity with SelectedChannelMenu
andremion May 29, 2026
de48d51
Revert SelectedChannelMenu shape default to match develop
andremion May 29, 2026
76c600f
Restore SelectedChannelMenuSample's param shape to match develop
andremion May 29, 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
27 changes: 8 additions & 19 deletions ...in/java/io/getstream/chat/android/compose/sample/feature/channel/list/ChannelsActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,7 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyItemScope
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalDrawerSheet
Expand All @@ -51,7 +49,6 @@ import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
Expand All @@ -78,7 +75,7 @@ import io.getstream.chat.android.compose.state.channels.list.SearchQuery
import io.getstream.chat.android.compose.ui.channels.ChannelsScreen
import io.getstream.chat.android.compose.ui.channels.SearchMode
import io.getstream.chat.android.compose.ui.channels.header.ChannelListHeader
import io.getstream.chat.android.compose.ui.channels.info.SelectedChannelMenu
import io.getstream.chat.android.compose.ui.channels.info.ChannelActionsSheet
import io.getstream.chat.android.compose.ui.channels.list.ChannelItem
import io.getstream.chat.android.compose.ui.channels.list.ChannelList
import io.getstream.chat.android.compose.ui.components.SearchInput
Expand Down Expand Up @@ -317,10 +314,8 @@ class ChannelsActivity : ComponentActivity() {
/**
* An example of what a custom UI can be, when not using [ChannelsScreen].
*
* It's important to note that if we want to use the [SelectedChannelMenu] to expose information and
* options that the user can make with each channel, we need to use a [Box] and overlap the
* two elements. This makes it easier as it's all presented in the same layer, rather than being
* wrapped in drawers or more components.
* Renders [ChannelActionsSheet] over the channel list when the user long-presses a channel,
* exposing channel-level options without leaving the list.
*/
@Composable
private fun MyCustomUi() {
Expand Down Expand Up @@ -366,18 +361,12 @@ class ChannelsActivity : ComponentActivity() {
viewModel = channelsViewModel,
onViewInfoAction = ::viewChannelInfo,
)
SelectedChannelMenu(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.wrapContentHeight()
.align(Alignment.Center),
shape = RoundedCornerShape(16.dp),
selectedChannel = selectedChannel,
ChannelActionsSheet(
channel = selectedChannel,
actions = channelActions,
onActionClick = channelsViewModel::executeOrConfirm,
onDismiss = channelsViewModel::dismissChannelAction,
currentUser = user,
channelActions = channelActions,
onChannelOptionConfirm = { action -> channelsViewModel.executeOrConfirm(action) },
onDismiss = { channelsViewModel.dismissChannelAction() },
)
}
}
Expand Down
43 changes: 28 additions & 15 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 @@ -735,8 +735,8 @@ public final class io/getstream/chat/android/compose/ui/channel/attachments/Comp
public final fun getLambda$-1910049996$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$-373404507$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function5;
public final fun getLambda$-484386624$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$-592598395$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-625087214$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$-920851327$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/channel/attachments/ComposableSingletons$ChannelMediaAttachmentsPreviewScreenKt {
Expand Down Expand Up @@ -778,10 +778,8 @@ public final class io/getstream/chat/android/compose/ui/channel/info/ComposableS
public final class io/getstream/chat/android/compose/ui/channel/info/ComposableSingletons$ChannelInfoMemberInfoModalSheetKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/channel/info/ComposableSingletons$ChannelInfoMemberInfoModalSheetKt;
public fun <init> ()V
public final fun getLambda$-598057063$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-936863084$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1598288791$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1795314802$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1260922134$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$2097097761$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/channel/info/ComposableSingletons$ChannelInfoOptionItemKt {
Expand Down Expand Up @@ -824,10 +822,10 @@ public final class io/getstream/chat/android/compose/ui/channel/info/ComposableS
public final fun getLambda$-1290011797$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1839460112$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1996460951$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-949819074$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-952635417$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1135501951$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1273794324$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1411993017$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1424577796$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1947836857$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$218021444$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}
Expand Down Expand Up @@ -878,6 +876,18 @@ public final class io/getstream/chat/android/compose/ui/channels/header/Composab
public final fun getLambda$621281156$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/channels/info/ChannelActionsSheetKt {
public static final fun ChannelActionsSheet (Lio/getstream/chat/android/models/Channel;Ljava/util/List;Lkotlin/jvm/functions/Function1;Lkotlin/jvm/functions/Function0;Landroidx/compose/ui/Modifier;Lio/getstream/chat/android/models/User;Landroidx/compose/runtime/Composer;II)V
}

public final class io/getstream/chat/android/compose/ui/channels/info/ComposableSingletons$ChannelActionsSheetKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/channels/info/ComposableSingletons$ChannelActionsSheetKt;
public fun <init> ()V
public final fun getLambda$-1753748109$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1870424128$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$35220375$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/channels/info/ComposableSingletons$SelectedChannelMenuKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/channels/info/ComposableSingletons$SelectedChannelMenuKt;
public fun <init> ()V
Expand Down Expand Up @@ -1434,11 +1444,10 @@ public final class io/getstream/chat/android/compose/ui/components/messageaction
public final class io/getstream/chat/android/compose/ui/components/messageactions/ComposableSingletons$ReactionsMenuKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/messageactions/ComposableSingletons$ReactionsMenuKt;
public fun <init> ()V
public final fun getLambda$-943682626$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1324752998$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$1339387013$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$1569361386$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function4;
public final fun getLambda$2029267930$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$22009528$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$86962370$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/components/messageactions/ComposableSingletons$UserReactionRowKt {
Expand Down Expand Up @@ -1632,6 +1641,8 @@ public final class io/getstream/chat/android/compose/ui/components/poll/Composab
public final fun getLambda$-1980307438$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$-232122758$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-49181804$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$1341088853$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$585859762$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$705192511$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

Expand All @@ -1645,6 +1656,7 @@ public final class io/getstream/chat/android/compose/ui/components/poll/Composab
public final class io/getstream/chat/android/compose/ui/components/poll/ComposableSingletons$PollMoreOptionsDialogKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/poll/ComposableSingletons$PollMoreOptionsDialogKt;
public fun <init> ()V
public final fun getLambda$1255763954$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$2062109506$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

Expand All @@ -1658,18 +1670,17 @@ public final class io/getstream/chat/android/compose/ui/components/poll/Composab
public final class io/getstream/chat/android/compose/ui/components/poll/ComposableSingletons$PollOptionVotesDialogKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/poll/ComposableSingletons$PollOptionVotesDialogKt;
public fun <init> ()V
public final fun getLambda$-1191991588$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1278904423$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1865090991$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-2004235384$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$1365316907$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-405208265$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-492121100$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-626086100$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$715521557$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
}

public final class io/getstream/chat/android/compose/ui/components/poll/ComposableSingletons$PollViewResultDialogKt {
public static final field INSTANCE Lio/getstream/chat/android/compose/ui/components/poll/ComposableSingletons$PollViewResultDialogKt;
public fun <init> ()V
public final fun getLambda$1904811249$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1949074933$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/chat/android/compose/ui/components/poll/PollAnswersKt {
Expand Down Expand Up @@ -1842,9 +1853,11 @@ public final class io/getstream/chat/android/compose/ui/messages/attachments/Com
public fun <init> ()V
public final fun getLambda$-115487913$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1442140508$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-1456790190$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$-2013272462$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
public final fun getLambda$-2042605497$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$12639049$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda$2047105752$stream_chat_android_compose_release ()Lkotlin/jvm/functions/Function3;
}

public final class io/getstream/chat/android/compose/ui/messages/attachments/ComposableSingletons$AttachmentTypePickerKt {
Expand Down
8 changes: 3 additions & 5 deletions ...o/getstream/chat/android/compose/ui/attachments/preview/MediaGalleryPreviewOptionsMenu.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SheetValue
import androidx.compose.material3.Text
import androidx.compose.material3.rememberStandardBottomSheetState
Expand All @@ -42,6 +41,7 @@ import io.getstream.chat.android.compose.state.mediagallerypreview.MediaGalleryP
import io.getstream.chat.android.compose.state.mediagallerypreview.Reply
import io.getstream.chat.android.compose.state.mediagallerypreview.SaveMedia
import io.getstream.chat.android.compose.state.mediagallerypreview.ShowInChat
import io.getstream.chat.android.compose.ui.components.StreamCardBottomSheet
import io.getstream.chat.android.compose.ui.components.StreamHorizontalDivider
import io.getstream.chat.android.compose.ui.theme.ChatTheme
import io.getstream.chat.android.compose.ui.theme.MediaGalleryOptionsConfig
Expand Down Expand Up @@ -74,12 +74,10 @@ internal fun MediaGalleryOptionsMenu(
onDismiss: () -> Unit,
modifier: Modifier = Modifier,
) {
ModalBottomSheet(
StreamCardBottomSheet(
onDismissRequest = onDismiss,
modifier = modifier,
sheetState = rememberStandardBottomSheetState(initialValue = SheetValue.Expanded, skipHiddenState = false),
containerColor = ChatTheme.colors.backgroundCoreElevation1,
scrimColor = ChatTheme.colors.backgroundCoreScrim,
onDismissRequest = onDismiss,
) {
Column(modifier = Modifier.fillMaxWidth()) {
options.forEachIndexed { index, option ->
Expand Down
Loading
Loading