Skip to content

Commit f3e47bd

Browse files
committed
misc(design) : introduce SimpleModalBottomSheet component
1 parent 9d05eb8 commit f3e47bd

File tree

1 file changed

+67
-0
lines changed

1 file changed

+67
-0
lines changed
Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/*
2+
* Copyright 2025 New Vector Ltd.
3+
*
4+
* SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
5+
* Please see LICENSE files in the repository root for full details.
6+
*/
7+
8+
package io.element.android.libraries.designsystem.components
9+
10+
import androidx.compose.foundation.layout.Column
11+
import androidx.compose.foundation.layout.ColumnScope
12+
import androidx.compose.foundation.layout.Spacer
13+
import androidx.compose.foundation.layout.fillMaxWidth
14+
import androidx.compose.foundation.layout.height
15+
import androidx.compose.foundation.layout.padding
16+
import androidx.compose.material3.ExperimentalMaterial3Api
17+
import androidx.compose.material3.rememberModalBottomSheetState
18+
import androidx.compose.runtime.Composable
19+
import androidx.compose.ui.Modifier
20+
import androidx.compose.ui.tooling.preview.datasource.LoremIpsum
21+
import androidx.compose.ui.unit.dp
22+
import io.element.android.compound.theme.ElementTheme
23+
import io.element.android.libraries.designsystem.preview.ElementPreview
24+
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
25+
import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
26+
import io.element.android.libraries.designsystem.theme.components.Text
27+
28+
@OptIn(ExperimentalMaterial3Api::class)
29+
@Composable
30+
fun SimpleModalBottomSheet(
31+
title: String,
32+
onDismiss: () -> Unit,
33+
modifier: Modifier = Modifier,
34+
content: @Composable ColumnScope.() -> Unit,
35+
) {
36+
ModalBottomSheet(
37+
onDismissRequest = onDismiss,
38+
modifier = modifier,
39+
sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
40+
) {
41+
Column(
42+
modifier = Modifier
43+
.fillMaxWidth()
44+
.padding(16.dp),
45+
) {
46+
Text(
47+
title,
48+
style = ElementTheme.typography.fontBodyLgMedium,
49+
color = ElementTheme.colors.textPrimary,
50+
)
51+
Spacer(Modifier.height(8.dp))
52+
content()
53+
}
54+
}
55+
}
56+
57+
@PreviewsDayNight
58+
@Composable
59+
internal fun SimpleModalBottomSheetPreview() = ElementPreview {
60+
SimpleModalBottomSheet(title = "A title", onDismiss = {}) {
61+
Text(
62+
text = LoremIpsum(20).values.first(),
63+
color = ElementTheme.colors.textSecondary,
64+
style = ElementTheme.typography.fontBodyMdRegular,
65+
)
66+
}
67+
}

0 commit comments

Comments
 (0)