Add some previews.

2023-02-14 13:10:59 +01:00
parent cbbcd49bc1
commit 3c3f473534
8 changed files with 177 additions and 0 deletions
--- 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 = "")
+        }
+    }
+}
--- 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 = "")
+}
--- 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 = "")
+    }
+}
--- 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") })
+}
--- 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))
+    }
+}
--- 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))
+    }
+}
--- 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 = {})
+}
--- 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") })
+}