From 3c3f473534afa3038b3fe27d07447c5fec144cf3 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Tue, 14 Feb 2023 13:10:59 +0100 Subject: [PATCH] Add some previews. --- .../theme/components/FloatingActionButton.kt | 27 ++++++++++++++++++ .../designsystem/theme/components/Icon.kt | 20 +++++++++++++ .../theme/components/IconButton.kt | 22 +++++++++++++++ .../theme/components/MediumTopAppBar.kt | 20 +++++++++++++ .../components/ModalBottomSheetLayout.kt | 28 +++++++++++++++++++ .../designsystem/theme/components/Surface.kt | 22 +++++++++++++++ .../theme/components/TextField.kt | 18 ++++++++++++ .../theme/components/TopAppBar.kt | 20 +++++++++++++ 8 files changed, 177 insertions(+) diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/FloatingActionButton.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/FloatingActionButton.kt index e27f2e7b25..690a58334d 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/FloatingActionButton.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/FloatingActionButton.kt @@ -17,6 +17,10 @@ package io.element.android.libraries.designsystem.theme.components import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.padding +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Close import androidx.compose.material3.FloatingActionButtonDefaults import androidx.compose.material3.FloatingActionButtonElevation import androidx.compose.material3.contentColorFor @@ -25,6 +29,10 @@ import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight @Composable fun FloatingActionButton( @@ -48,3 +56,22 @@ fun FloatingActionButton( content = content, ) } + +@Preview +@Composable +internal fun FloatingActionButtonLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun FloatingActionButtonDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + Box(modifier = Modifier.padding(8.dp)) { + FloatingActionButton(onClick = {}) { + Icon(imageVector = Icons.Filled.Close, contentDescription = "") + } + } +} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Icon.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Icon.kt index 6006a6c60a..5682cb4bd5 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Icon.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Icon.kt @@ -16,12 +16,17 @@ package io.element.android.libraries.designsystem.theme.components +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Close import androidx.compose.material3.LocalContentColor import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ImageBitmap import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.tooling.preview.Preview +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight @Composable fun Icon( @@ -52,3 +57,18 @@ fun Icon( tint = tint, ) } + +@Preview +@Composable +internal fun IconImageVectorLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun IconImageVectorDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + Icon(imageVector = Icons.Filled.Close, contentDescription = "") +} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconButton.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconButton.kt index 5af819c1f0..e5dee44333 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconButton.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconButton.kt @@ -17,10 +17,15 @@ package io.element.android.libraries.designsystem.theme.components import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Close import androidx.compose.material3.IconButtonDefaults import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight @Composable fun IconButton( @@ -39,3 +44,20 @@ fun IconButton( content = content, ) } + +@Preview +@Composable +internal fun IconButtonLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun IconButtonDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + IconButton(onClick = {}) { + Icon(imageVector = Icons.Filled.Close, contentDescription = "") + } +} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/MediumTopAppBar.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/MediumTopAppBar.kt index cbc215717d..0c13bb2e8c 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/MediumTopAppBar.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/MediumTopAppBar.kt @@ -14,6 +14,8 @@ * limitations under the License. */ +@file:OptIn(ExperimentalMaterial3Api::class) + package io.element.android.libraries.designsystem.theme.components import androidx.compose.foundation.layout.RowScope @@ -24,6 +26,9 @@ import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -46,3 +51,18 @@ fun MediumTopAppBar( scrollBehavior = scrollBehavior, ) } + +@Preview +@Composable +internal fun MediumTopAppBarLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun MediumTopAppBarDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + MediumTopAppBar(title = { Text(text = "Title") }) +} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheetLayout.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheetLayout.kt index 6b558e3418..7c498a610c 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheetLayout.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ModalBottomSheetLayout.kt @@ -14,8 +14,11 @@ * limitations under the License. */ +@file:OptIn(ExperimentalMaterialApi::class, ExperimentalMaterialApi::class) + package io.element.android.libraries.designsystem.theme.components +import androidx.compose.foundation.background import androidx.compose.foundation.layout.ColumnScope import androidx.compose.material.ExperimentalMaterialApi import androidx.compose.material.MaterialTheme @@ -28,7 +31,10 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight @OptIn(ExperimentalMaterialApi::class) @Composable @@ -55,3 +61,25 @@ fun ModalBottomSheetLayout( content = content, ) } + +@Preview +@Composable +internal fun ModalBottomSheetLayoutLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun ModalBottomSheetLayoutDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + ModalBottomSheetLayout( + sheetState = ModalBottomSheetState(ModalBottomSheetValue.Expanded), + sheetContent = { + Text(text = "Sheet Content", modifier = Modifier.background(color = Color.Green)) + } + ) { + Text(text = "Content", modifier = Modifier.background(color = Color.Red)) + } +} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Surface.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Surface.kt index 8518d8a715..d9c86fba82 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Surface.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Surface.kt @@ -17,6 +17,8 @@ package io.element.android.libraries.designsystem.theme.components import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.size import androidx.compose.material3.MaterialTheme import androidx.compose.material3.contentColorFor import androidx.compose.runtime.Composable @@ -24,8 +26,11 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight @Composable fun Surface( @@ -49,3 +54,20 @@ fun Surface( content = content, ) } + +@Preview +@Composable +internal fun SurfaceLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun SurfaceDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + Surface { + Spacer(modifier = Modifier.size(64.dp)) + } +} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt index 27995b46af..e9f6502fba 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TextField.kt @@ -29,6 +29,9 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Shape import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.input.VisualTransformation +import androidx.compose.ui.tooling.preview.Preview +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -77,3 +80,18 @@ fun TextField( colors = colors, ) } + +@Preview +@Composable +internal fun TextFieldLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun TextFieldDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + TextField(value = "Hello", onValueChange = {}) +} diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TopAppBar.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TopAppBar.kt index 76c388cefe..a187a0ae12 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TopAppBar.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/TopAppBar.kt @@ -14,6 +14,8 @@ * limitations under the License. */ +@file:OptIn(ExperimentalMaterial3Api::class) + package io.element.android.libraries.designsystem.theme.components import androidx.compose.foundation.layout.RowScope @@ -24,6 +26,9 @@ import androidx.compose.material3.TopAppBarDefaults import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.tooling.preview.Preview +import io.element.android.libraries.designsystem.preview.ElementPreviewDark +import io.element.android.libraries.designsystem.preview.ElementPreviewLight @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -46,3 +51,18 @@ fun TopAppBar( scrollBehavior = scrollBehavior, ) } + +@Preview +@Composable +internal fun TopAppBarLightPreview() = + ElementPreviewLight { ContentToPreview() } + +@Preview +@Composable +internal fun TopAppBarDarkPreview() = + ElementPreviewDark { ContentToPreview() } + +@Composable +private fun ContentToPreview() { + TopAppBar(title = { Text(text = "Title") }) +}